Skip to content

Commit 07a2087

Browse files
jpscajpsca
committed
auto
1 parent f78c84b commit 07a2087

File tree

10 files changed

+201
-85
lines changed

10 files changed

+201
-85
lines changed

‎docs/assets/css/base.css‎

Lines changed: 67 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ html {
5252
--space-large: 2em;
5353
--space-x-large: 3em;
5454
--space-xx-large: 4em;
55-
--transition: 0.15s ease;
56-
--transition-slow: 0.3s ease;
55+
--transition-slow: 0.15s ease;
56+
--transition-slow-slow: 0.3s ease;
5757
}
5858

5959
@media (prefers-color-scheme: dark) {
@@ -235,7 +235,7 @@ a {
235235
font-weight: 500;
236236
text-decoration: underline;
237237
text-underline-offset: 0.1em;
238-
transition: color var(--transition), text-decoration-color var(--transition)
238+
transition: color var(--transition-slow), text-decoration-color var(--transition-slow)
239239
}
240240
strong a {
241241
font-weight: inherit
@@ -269,36 +269,30 @@ video::cue {
269269

270270
/******* UTILS *******/
271271

272-
.only-light {
273-
display: block;
274-
}
275-
.only-dark {
276-
display: none;
272+
@media (prefers-color-scheme: light) {
273+
html:not(.cs-dark) .only-dark {
274+
display: none;
275+
}
277276
}
278277
@media (prefers-color-scheme: dark) {
279278
html:not(.cs-light) .only-light {
280279
display: none;
281280
}
282-
html:not(.cs-light) .only-dark {
283-
display: block;
284-
}
285281
}
286-
html.cs-dark .only-light {
282+
html.cs-dark .only-light,
283+
html.cs-light .only-dark {
287284
display: none;
288285
}
289-
html.cs-dark .only-dark {
290-
display: block;
291-
}
292286

293287

294288
/******* BUTTONS *******/
295289

296290
.button {
297291
appearance: none;
298-
font-size: 0.9em;
292+
font-size: 0.8em;
299293
letter-spacing: -0.02em;
300294
border-radius: 1.5em;
301-
padding: 0.9em 1em;
295+
padding: 0.9em 1em 0.9em 1.2em;
302296
background: transparent;
303297
color: var(--color-grey);
304298
display: inline-flex;
@@ -309,7 +303,7 @@ html.cs-dark .only-dark {
309303
line-height: 1em;
310304
margin: 0.5em 0;
311305
box-shadow: 0 0 0 0 rgba(0,0,0, 0.1);
312-
transition: background var(--transition), box-shadow var(--transition);
306+
transition: background var(--transition-slow), box-shadow var(--transition-slow);
313307
}
314308
.button[href] {
315309
cursor: pointer;
@@ -626,7 +620,7 @@ html.cs-dark .highlight {
626620
right: 0.4em;
627621
text-transform: uppercase;
628622
bottom: 0.4em;
629-
transition: background var(--transition), opacity var(--transition);
623+
transition: background var(--transition-slow), opacity var(--transition-slow);
630624
}
631625
@media (min-width: 64em) {
632626
.highlight button.copy {
@@ -854,7 +848,7 @@ html.cs-dark .highlight {
854848
opacity: 0.05;
855849
font-size: 0.9em;
856850
margin-left: 0.4em;
857-
transition: opacity var(--transition);
851+
transition: opacity var(--transition-slow);
858852
}
859853

860854
.page__content h1:hover .headerlink,
@@ -1343,6 +1337,14 @@ html.cs-dark .page__content img.invert {
13431337
padding-top: 0.75rem;
13441338
}
13451339
.tabbed-set > input:first-child:checked ~ .tabbed-content > :first-child,
1340+
.tabbed-set > input:nth-child(2):checked ~ .tabbed-content > :nth-child(2),
1341+
.tabbed-set > input:nth-child(3):checked ~ .tabbed-content > :nth-child(3),
1342+
.tabbed-set > input:nth-child(4):checked ~ .tabbed-content > :nth-child(4),
1343+
.tabbed-set > input:nth-child(5):checked ~ .tabbed-content > :nth-child(5),
1344+
.tabbed-set > input:nth-child(6):checked ~ .tabbed-content > :nth-child(6),
1345+
.tabbed-set > input:nth-child(7):checked ~ .tabbed-content > :nth-child(7),
1346+
.tabbed-set > input:nth-child(8):checked ~ .tabbed-content > :nth-child(8),
1347+
.tabbed-set > input:nth-child(9):checked ~ .tabbed-content > :nth-child(9) {
13461348
.tabbed-set > input:nth-child(10):checked ~ .tabbed-content > :nth-child(10),
13471349
.tabbed-set > input:nth-child(11):checked ~ .tabbed-content > :nth-child(11),
13481350
.tabbed-set > input:nth-child(12):checked ~ .tabbed-content > :nth-child(12),
@@ -1353,14 +1355,50 @@ html.cs-dark .page__content img.invert {
13531355
.tabbed-set > input:nth-child(17):checked ~ .tabbed-content > :nth-child(17),
13541356
.tabbed-set > input:nth-child(18):checked ~ .tabbed-content > :nth-child(18),
13551357
.tabbed-set > input:nth-child(19):checked ~ .tabbed-content > :nth-child(19),
1356-
.tabbed-set > input:nth-child(2):checked ~ .tabbed-content > :nth-child(2),
13571358
.tabbed-set > input:nth-child(20):checked ~ .tabbed-content > :nth-child(20),
1358-
.tabbed-set > input:nth-child(3):checked ~ .tabbed-content > :nth-child(3),
1359-
.tabbed-set > input:nth-child(4):checked ~ .tabbed-content > :nth-child(4),
1360-
.tabbed-set > input:nth-child(5):checked ~ .tabbed-content > :nth-child(5),
1361-
.tabbed-set > input:nth-child(6):checked ~ .tabbed-content > :nth-child(6),
1362-
.tabbed-set > input:nth-child(7):checked ~ .tabbed-content > :nth-child(7),
1363-
.tabbed-set > input:nth-child(8):checked ~ .tabbed-content > :nth-child(8),
1364-
.tabbed-set > input:nth-child(9):checked ~ .tabbed-content > :nth-child(9) {
13651359
display: block;
1366-
}
1360+
}
1361+
1362+
/******* Columns *******/
1363+
1364+
.columns {
1365+
display: flex;
1366+
flex-direction: column;
1367+
flex-wrap: nowrap;
1368+
gap: 1em;
1369+
}
1370+
@media (min-width: 48rem) {
1371+
.columns {
1372+
flex-direction: row;
1373+
justify-content: stretch;
1374+
}
1375+
}
1376+
.columns > * {
1377+
width: 100%;
1378+
}
1379+
1380+
/******* Stack *******/
1381+
1382+
.stacked {
1383+
display: flex;
1384+
flex-direction: column;
1385+
}
1386+
@media (min-width: 48rem) {
1387+
.stacked {
1388+
flex-direction: row;
1389+
}
1390+
.stacked > * {
1391+
transform: scale(0.95);
1392+
transition: all var(--transition-slow);
1393+
width: 100%;
1394+
height: fit-content;
1395+
}
1396+
.stacked :nth-child(2) { margin: 10% 0 0 -40%; }
1397+
.stacked :nth-child(3) { margin: 20% 0 0 -40%; }
1398+
.stacked :nth-child(4) { margin: 30% 0 0 -40%; }
1399+
.stacked :nth-child(5) { margin: 40% 0 0 -40%; }
1400+
.stacked > *:hover {
1401+
z-index: 20;
1402+
transform: scale(1);
1403+
}
1404+
}

‎docs/assets/css/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
@import "base.css";
22
@import "layout.css";
3-
@import "index.css";
3+
@import "index.css";

‎docs/content/quickstart/config.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ The `pages` list of the section can contain page paths or other sections.
104104

105105
Clicking on the section title will fold or unfold its page tree.
106106

107-
### Section/pages
107+
### Section/page
108108

109109
A section can also be a page. To do this, add a `path` attribute with the path of the Markdown
110110
file, relative to the `content` folder.
@@ -136,6 +136,21 @@ docs = Docs(__file__, pages=[
136136

137137
Clicking on the section title will show its page.
138138

139+
### Automatically adding all pages from a folder
140+
141+
If instead of a list of pages, the `pages` attribute is a folder path **inside the contents dir**, all the markdown files in that folder will be added as pages, in order.
142+
143+
```python {hl_lines="4"}
144+
docs = Docs(__file__, pages=[
145+
{
146+
"title": "Components",
147+
"pages": "components/"
148+
},
149+
# ...
150+
])
151+
```
152+
153+
139154
### Sections that start closed
140155

141156
A section is by default "open," meaning it shows all of its pages and subsections. However, sometimes a section with many pages can create too much visual noise. You can specify that a section should be rendered "closed" by default by using the `"closed": True` property:

‎docs/content/quickstart/setup.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,15 @@ Open [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your browser, and you'l
8080

8181
The generated home page is different from the rest: it's a welcome/marketing page. Clicking on the "Documentation" link takes you to the first page of your actual documentation.
8282

83-
![Home page](/assets/images/page-home-light.png){ .only-light }
84-
![Home page](/assets/images/page-home-dark.png){ .only-dark }
85-
86-
![First page](/assets/images/page-index-light.png){ .only-light }
87-
![First page](/assets/images/page-index-dark.png){ .only-dark }
83+
<div markdown="span" class="stacked only-light">
84+
[![Home page](/assets/images/page-home-light.png)](/assets/images/page-home-light.png){ target="blank"}
85+
[![First page](/assets/images/page-index-light.png)](/assets/images/page-index-light.png){ target="blank"}
86+
</div>
87+
88+
<div markdown="span" class="stacked only-dark">
89+
[![Home page](/assets/images/page-home-dark.png)](/assets/images/page-home-dark.png){ target="blank"}
90+
[![First page](/assets/images/page-index-dark.png)](/assets/images/page-index-dark.png){ target="blank"}
91+
</div>
8892

8993
## Build
9094

‎docs/views/index.jinja‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<div>
3434
<img src="/assets/images/grid-markdown.png" aria-hidden="true" />
3535
<div>
36-
<h3>Simple yet powerful&nbsp;formatting</h3>
36+
<h3>Simple yet powerful formatting</h3>
3737
<p>Write in Markdown, plus enjoy powerful features like callbacks, flexible code blocks, and much&nbsp;more.</p>
3838
</div>
3939
</div>
@@ -42,7 +42,7 @@
4242
<article>
4343
<div>
4444
<div>
45-
<h3>Built-in full-text&nbsp;search</h3>
45+
<h3>Built-in offline full-text search</h3>
4646
<p>Automatically generates a full-text search index for you. No third-party service&nbsp;required.</p>
4747
</div>
4848
<img src="/assets/images/grid-search.png" aria-hidden="true" />
@@ -51,24 +51,25 @@
5151

5252
<article>
5353
<div>
54-
<img src="/assets/images/grid-marbles.png" aria-hidden="true" />
5554
<div>
56-
<h3>Multi-language & multi-version&nbsp;capable</h3>
57-
<p>Easily manage documentation for multiple versions and languages, right out of the box. No plugins or complicated setup&nbsp;needed.</p>
55+
<h3>Works on all devices and with light/dark modes</h3>
56+
<p>WriteADoc automatically adapts to perfectly fit the available screen, no matter the type or size of the viewing device and whether you're an early bird or a night&nbsp;owl.</p>
5857
</div>
58+
<img src="/assets/images/grid-devices.png" aria-hidden="true" />
5959
</div>
6060
</article>
6161

6262
<article>
6363
<div>
64+
<img src="/assets/images/grid-marbles.png" aria-hidden="true" />
6465
<div>
65-
<h3>Works on all devices and with light/dark&nbsp;modes</h3>
66-
<p>WriteADoc automatically adapts to perfectly fit the available screen, no matter the type or size of the viewing device and whether you're an early bird or a night owl.</p>
66+
<h3>Multi-language & multi-version capable</h3>
67+
<p>Easily manage documentation for multiple versions and languages, right out of the box. No plugins or complicated setup&nbsp;needed.</p>
6768
</div>
68-
<img src="/assets/images/grid-devices.png" aria-hidden="true" />
6969
</div>
7070
</article>
7171

72+
7273
<article>
7374
<div>
7475
<img src="/assets/images/grid-yours.png" aria-hidden="true" />

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[project]
22
name = "writeadoc"
3-
version = "0.2.0"
3+
version = "0.3.0"
44
description = "Focus on your content and let WriteADoc take care of the rest"
55
authors = [
66
{name = "Juan Pablo Scaletti", email = "[email protected]"},

0 commit comments

Comments
 (0)