Skip to content

Commit 503b37d

Browse files
prudhommprudhomm
committed
improving background sections
1 parent aaf6896 commit 503b37d

File tree

5 files changed

+203
-8
lines changed

5 files changed

+203
-8
lines changed

‎src/css/doc.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@
1616
/* max-width: var(--doc-max-width--desktop); */
1717
min-width: 0;
1818
}
19+
20+
/* When there's no TOC sidebar, use more horizontal space */
21+
main > .content > article.doc:only-child {
22+
padding-left: 0.5rem !important;
23+
padding-right: 0.5rem !important;
24+
}
25+
26+
/* Remove horizontal margins from exampleblocks when no TOC */
27+
article.doc:only-child .exampleblock {
28+
margin-left: 0 !important;
29+
margin-right: 0 !important;
30+
}
1931
}
2032

2133
.doc [id] {
@@ -1624,3 +1636,51 @@ details.proof[open] > summary::before {
16241636
border: none;
16251637
transform: translateX(0.25em) translateY(2px);
16261638
}
1639+
1640+
/* Inline badges for tags and labels */
1641+
.doc .badge {
1642+
display: inline-block;
1643+
padding: 0.25em 0.6em;
1644+
font-size: 0.75em;
1645+
font-weight: 600;
1646+
line-height: 1;
1647+
color: #fff;
1648+
text-align: center;
1649+
white-space: nowrap;
1650+
vertical-align: baseline;
1651+
border-radius: 0.25rem;
1652+
margin-left: 0.5em;
1653+
}
1654+
1655+
/* Badge color variants */
1656+
.doc .badge-primary {
1657+
background-color: #1565c0;
1658+
}
1659+
1660+
.doc .badge-success {
1661+
background-color: #2e7d32;
1662+
}
1663+
1664+
.doc .badge-info {
1665+
background-color: #0288d1;
1666+
}
1667+
1668+
.doc .badge-warning {
1669+
background-color: #ff8f00;
1670+
}
1671+
1672+
.doc .badge-danger {
1673+
background-color: #d32f2f;
1674+
}
1675+
1676+
.doc .badge-secondary {
1677+
background-color: #455a64;
1678+
}
1679+
1680+
/* Co-funding specific badge */
1681+
.doc .badge-cofunding {
1682+
background-color: #d32f2f; /* red to indicate co-funding */
1683+
display: inline-flex;
1684+
align-items: center;
1685+
gap: 0.3em;
1686+
}

‎src/css/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@
2626
flex: 0 0 var(--toc-width);
2727
order: 1;
2828
}
29+
30+
/* When content has only one child (no TOC), reduce .doc margin to use more space */
31+
main > .content > article.doc:only-child {
32+
margin-left: 0 !important;
33+
margin-right: 0 !important;
34+
}
2935
}
3036

3137
@media screen and (min-width: 1216px) {

‎src/css/section-backgrounds.css‎

Lines changed: 134 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/* Full-width alternating section backgrounds for long single-page layouts */
22

3+
/* ============================================
4+
MANUAL SECTIONS (with .section-gray / .section-white classes)
5+
============================================ */
6+
37
/* Full-width section wrappers with alternating backgrounds */
48
.doc .openblock.section-gray,
59
.doc .openblock.section-white {
@@ -50,13 +54,17 @@
5054
padding-top: 3.5rem;
5155
padding-bottom: 3.5rem;
5256
}
53-
}
5457

55-
/* ============================================
56-
Card styling for quoteblocks in sections
57-
============================================ */
58+
/* When no TOC sidebar, reduce section padding to use more space */
59+
article.doc:only-child .openblock.section-gray,
60+
article.doc:only-child .openblock.section-white {
61+
padding-left: calc(50vw - 50% + 0.5rem) !important;
62+
padding-right: calc(50vw - 50% + 0.5rem) !important;
63+
}
64+
/* Note: exampleblock margin removal for no-TOC is handled globally in doc.css */
65+
}
5866

59-
/* Style quoteblocks inside sections as cards */
67+
/* Card styling for quoteblocks in manual sections */
6068
.doc .section-gray .quoteblock,
6169
.doc .section-white .quoteblock {
6270
background: #fff;
@@ -68,8 +76,8 @@
6876
transition: box-shadow 0.2s ease, transform 0.2s ease;
6977
}
7078

71-
.doc .section-gray .quoteblock:hover,
72-
.doc .section-white .quoteblock:hover {
79+
.doc .section-gray .quoteblock:not(:has(img)):hover,
80+
.doc .section-white .quoteblock:not(:has(img)):hover {
7381
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
7482
transform: translateY(-2px);
7583
}
@@ -109,3 +117,122 @@
109117
margin-bottom: 0.25rem;
110118
color: var(--heading-font-color, #262626);
111119
}
120+
121+
/* ============================================
122+
AUTOMATIC ALTERNATING SECTIONS (for pages with :page-alternating-sections: true)
123+
============================================ */
124+
125+
/* Base styles for automatic alternating sections */
126+
.doc > .sect1:nth-child(even),
127+
.doc > .sect1:nth-child(odd) {
128+
margin-left: calc(-50vw + 50%);
129+
margin-right: calc(-50vw + 50%);
130+
padding-left: calc(50vw - 50% + 1rem);
131+
padding-right: calc(50vw - 50% + 1rem);
132+
padding-top: 2rem;
133+
padding-bottom: 2rem;
134+
margin-top: 0;
135+
margin-bottom: 0;
136+
}
137+
138+
/* Even sections (2, 4, 6, 8...) - gray background */
139+
.doc > .sect1:nth-child(even) {
140+
background-color: #e9ecef;
141+
}
142+
143+
/* Odd sections (1, 3, 5, 7...) - white background */
144+
.doc > .sect1:nth-child(odd) {
145+
background-color: #fff;
146+
}
147+
148+
/* Section body and all containers - force full width expansion */
149+
.doc > .sect1 .sectionbody,
150+
.doc > .sect1 .sectionbody > *,
151+
.doc > .sect1 .sectionbody > * > * {
152+
max-width: none !important;
153+
margin-left: 0 !important;
154+
margin-right: 0 !important;
155+
}
156+
157+
.doc > .sect1 .sectionbody {
158+
margin-top: 1rem;
159+
width: 100%;
160+
}
161+
162+
/* Grids inside automatic sections - force full width expansion */
163+
.doc > .sect1 .exampleblock,
164+
.doc > .sect1 .exampleblock.grid,
165+
.doc > .sect1 .exampleblock.grid-2,
166+
.doc > .sect1 .exampleblock.grid-3 {
167+
max-width: none !important;
168+
width: 100% !important;
169+
margin-left: 0 !important;
170+
margin-right: 0 !important;
171+
}
172+
173+
.doc > .sect1 .exampleblock > .content,
174+
.doc > .sect1 .exampleblock.grid > .content,
175+
.doc > .sect1 .exampleblock.grid-2 > .content,
176+
.doc > .sect1 .exampleblock.grid-3 > .content {
177+
max-width: none !important;
178+
width: 100% !important;
179+
margin-left: 0 !important;
180+
margin-right: 0 !important;
181+
}
182+
183+
/* Individual cards in automatic sections - maintain nice aspect ratio */
184+
.doc > .sect1 .exampleblock .quoteblock {
185+
max-width: 600px;
186+
width: 100%;
187+
justify-self: start;
188+
}
189+
190+
/* For 3-column grids, smaller max width */
191+
.doc > .sect1 .exampleblock.grid-3 .quoteblock {
192+
max-width: 400px;
193+
}
194+
195+
/* Desktop adjustments for automatic sections */
196+
@media screen and (min-width: 1024px) {
197+
.doc > .sect1:nth-child(even),
198+
.doc > .sect1:nth-child(odd) {
199+
padding-left: calc(50vw - 50% + 2rem);
200+
padding-right: calc(50vw - 50% + 2rem);
201+
padding-top: 3rem;
202+
padding-bottom: 3rem;
203+
}
204+
205+
/* When no TOC sidebar, optimize for more content space */
206+
article.doc:only-child .sect1:nth-child(even),
207+
article.doc:only-child .sect1:nth-child(odd) {
208+
padding-left: calc(50vw - 50% + 1rem);
209+
padding-right: calc(50vw - 50% + 1rem);
210+
}
211+
212+
/* On desktop, allow cards to be slightly wider */
213+
.doc > .sect1 .exampleblock .quoteblock {
214+
max-width: 700px;
215+
}
216+
217+
.doc > .sect1 .exampleblock.grid-3 .quoteblock {
218+
max-width: 450px;
219+
}
220+
}
221+
222+
/* Wide screens adjustments */
223+
@media screen and (min-width: 1440px) {
224+
.doc > .sect1:nth-child(even),
225+
.doc > .sect1:nth-child(odd) {
226+
padding-left: calc(50vw - 50% + 3rem);
227+
padding-right: calc(50vw - 50% + 3rem);
228+
}
229+
230+
/* On wide screens, cards can be even larger */
231+
.doc > .sect1 .exampleblock .quoteblock {
232+
max-width: 800px;
233+
}
234+
235+
.doc > .sect1 .exampleblock.grid-3 .quoteblock {
236+
max-width: 500px;
237+
}
238+
}

‎src/css/toc.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
}
117117

118118
.toc.sidebar.is-hidden-toc {
119-
/* display: none !important; */
119+
display: none !important;
120120
flex: none;
121121
}
122122

‎src/partials/toc.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
{{#unless (eq page.attributes.toclevels '0')}}
12
<aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
23
<div class="toc-menu"></div>
34
</aside>
5+
{{/unless}}

0 commit comments

Comments
 (0)