|
118 | 118 | border-bottom: 1px solid var(--color-border-subtle); |
119 | 119 | } |
120 | 120 |
|
121 | | - // Guide link paragraphs: make the guide link prominent |
122 | | - h2 + p > a:only-child { |
123 | | - font-family: var(--font-display); |
124 | | - font-size: var(--font-size-lg); |
125 | | - font-weight: var(--font-weight-bold); |
126 | | - color: var(--color-accent); |
127 | | - text-decoration: none; |
128 | | - |
129 | | - &:hover { |
130 | | - color: var(--color-accent-hover); |
131 | | - text-decoration: underline; |
132 | | - } |
133 | | - } |
134 | | - |
135 | 121 | // Voices list |
136 | 122 | h2 ~ ul { |
137 | 123 | list-style: none; |
|
150 | 136 | } |
151 | 137 | } |
152 | 138 |
|
| 139 | + .guide-links { |
| 140 | + display: grid; |
| 141 | + grid-template-columns: 1fr; |
| 142 | + gap: var(--space-5); |
| 143 | + margin-block: var(--space-5) var(--space-8); |
| 144 | + } |
| 145 | + |
| 146 | + .guide-link { |
| 147 | + padding-block: var(--space-5); |
| 148 | + border-block: 1px solid var(--color-border-subtle); |
| 149 | + |
| 150 | + & + & { |
| 151 | + border-top: 0; |
| 152 | + margin-top: calc(var(--space-5) * -1); |
| 153 | + } |
| 154 | + |
| 155 | + &__label { |
| 156 | + margin-bottom: var(--space-2); |
| 157 | + color: var(--color-text-tertiary); |
| 158 | + font-size: var(--font-size-sm); |
| 159 | + font-weight: var(--font-weight-semibold); |
| 160 | + letter-spacing: var(--letter-spacing-caps); |
| 161 | + line-height: var(--line-height-snug); |
| 162 | + text-transform: uppercase; |
| 163 | + } |
| 164 | + |
| 165 | + h3 { |
| 166 | + margin-bottom: var(--space-3); |
| 167 | + font-size: var(--font-size-xl); |
| 168 | + } |
| 169 | + |
| 170 | + a { |
| 171 | + color: var(--color-accent); |
| 172 | + text-decoration: none; |
| 173 | + |
| 174 | + &:hover { |
| 175 | + color: var(--color-accent-hover); |
| 176 | + text-decoration: underline; |
| 177 | + text-decoration-thickness: 1px; |
| 178 | + text-underline-offset: 4px; |
| 179 | + } |
| 180 | + } |
| 181 | + |
| 182 | + p:last-child { |
| 183 | + color: var(--color-text-secondary); |
| 184 | + } |
| 185 | + } |
| 186 | + |
| 187 | + .status-note { |
| 188 | + display: inline-block; |
| 189 | + margin-bottom: var(--space-4); |
| 190 | + color: var(--color-accent); |
| 191 | + font-size: var(--font-size-sm); |
| 192 | + font-weight: var(--font-weight-semibold); |
| 193 | + letter-spacing: var(--letter-spacing-caps); |
| 194 | + line-height: var(--line-height-snug); |
| 195 | + text-transform: uppercase; |
| 196 | + } |
| 197 | + |
153 | 198 | .index-aside { |
154 | 199 | display: none; |
155 | 200 | } |
|
205 | 250 | } |
206 | 251 |
|
207 | 252 | // ── Table of contents ───────────────────────────────────────────────────── |
208 | | - // Hidden on mobile, shown as sticky side rail on desktop. |
209 | 253 |
|
210 | 254 | .toc { |
211 | | - display: none; // shown via media query at desktop width |
| 255 | + &--desktop { |
| 256 | + display: none; // shown via media query at desktop width |
| 257 | + } |
| 258 | + |
| 259 | + &--mobile { |
| 260 | + display: block; |
| 261 | + margin-block: var(--space-6) var(--space-7); |
| 262 | + padding: var(--space-4); |
| 263 | + border-block: 1px solid var(--color-toc-border); |
| 264 | + } |
| 265 | + } |
| 266 | + |
| 267 | + .toc__heading { |
| 268 | + margin-bottom: var(--space-3); |
| 269 | + color: var(--color-text-secondary); |
| 270 | + font-family: var(--font-body); |
| 271 | + font-size: var(--font-size-sm); |
| 272 | + font-weight: var(--font-weight-semibold); |
| 273 | + letter-spacing: var(--letter-spacing-caps); |
| 274 | + line-height: var(--line-height-snug); |
| 275 | + text-transform: uppercase; |
212 | 276 | } |
213 | 277 |
|
214 | 278 | .toc__list { |
|
294 | 358 | justify-content: space-between; |
295 | 359 | gap: var(--space-4); |
296 | 360 | font-size: var(--font-size-sm); |
297 | | - color: var(--color-text-tertiary); |
| 361 | + color: var(--color-text-secondary); |
298 | 362 |
|
299 | 363 | a { |
300 | 364 | color: var(--color-text-secondary); |
|
0 commit comments