Skip to content

Commit ae4cab2

Browse files
hschnehschne
committed
Tweak design
1 parent d586a35 commit ae4cab2

13 files changed

Lines changed: 197 additions & 115 deletions

File tree

‎.design/ruby-community-guides/TASKS.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ Date: 2026-05-17
3737

3838
## Responsive & Polish
3939

40-
- [ ] **Responsive pass on `media.scss`**: Add breakpoint rules for the guide layout (TOC column collapse at tablet/mobile), nav wrapping, homepage guide-links stacking on mobile. No tokens here — only layout behaviour changes at breakpoints. _New content in `media.scss`._
40+
- [x] **Responsive pass on `media.scss`**: Add breakpoint rules for the guide layout (TOC column collapse at tablet/mobile), nav wrapping, homepage guide-links stacking on mobile. No tokens here — only layout behaviour changes at breakpoints. _New content in `media.scss`._
4141

42-
- [ ] **Typography polish pass on `base.scss`**: Review heading hierarchy, paragraph spacing, blockquote styling, and link underline behaviour across all three pages in a browser. Tune `--space-*` values between chapters, tighten or loosen where reading rhythm feels off. _Modifies `base.scss`._
42+
- [x] **Typography polish pass on `base.scss`**: Review heading hierarchy, paragraph spacing, blockquote styling, and link underline behaviour across all three pages in a browser. Tune `--space-*` values between chapters, tighten or loosen where reading rhythm feels off. _Modifies `base.scss`._
4343

44-
- [ ] **Accessibility pass**: Verify focus styles on all interactive elements using `--color-border-focus` / `--shadow-focus`. Check heading hierarchy on all three pages. Confirm TOC is keyboard-navigable. Add `aria-current="page"` to active nav link. Verify `prefers-reduced-motion` is respected for any transitions. _Touches `base.scss`, `components.scss`, layout files._
44+
- [x] **Accessibility pass**: Verify focus styles on all interactive elements using `--color-border-focus` / `--shadow-focus`. Check heading hierarchy on all three pages. Confirm TOC is keyboard-navigable. Add `aria-current="page"` to active nav link. Verify `prefers-reduced-motion` is respected for any transitions. _Touches `base.scss`, `components.scss`, layout files._
4545

4646
---
4747

‎_layouts/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</head>
1414
<body>
1515

16-
<header class="site-header">
16+
<header class="site-header" role="banner">
1717
<nav class="nav" aria-label="Main navigation">
1818
<a class="nav__title" href="{{ "/" | relative_url }}">{{ site.title }}</a>
1919
<div class="nav__links">

‎_layouts/guide.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
---
44

55
<div class="guide-layout">
6+
<article class="guide-content">{{ content }}</article>
7+
68
{% if page.chapters %}
79
<nav class="toc" aria-label="Guide contents">
810
<ol class="toc__list">
@@ -14,6 +16,4 @@
1416
</ol>
1517
</nav>
1618
{% endif %}
17-
18-
<article class="guide-content">{{ content }}</article>
1919
</div>

‎_layouts/home.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="index-layout">
6+
<article class="index-content">{{ content }}</article>
7+
8+
<aside class="index-aside" aria-label="Supplementary information">
9+
{% if page.aside %} {{ page.aside | markdownify }} {% endif %}
10+
</aside>
11+
</div>

‎_sass/base.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,13 @@
8383
&:active {
8484
color: var(--color-link-active);
8585
}
86+
// Visible focus ring for keyboard users — outline instead of box-shadow
87+
// so it works on all backgrounds including dark mode
8688
&:focus-visible {
87-
outline: none;
88-
box-shadow: var(--shadow-focus);
89+
outline: 2px solid var(--color-border-focus);
90+
outline-offset: 3px;
8991
border-radius: var(--border-radius-sm);
92+
text-decoration: none;
9093
}
9194
}
9295

‎_sass/components.scss‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,33 @@
9191
}
9292

9393
// ── Homepage guide index ──────────────────────────────────────────────────
94-
// Styles the guide link + description pairs on the homepage.
95-
// Uses the natural markdown output: h2 section heading, then a paragraph
96-
// containing the link, then a description paragraph.
94+
// Same geometry as guide pages: primary content column + right rail.
95+
96+
.index-layout {
97+
max-width: var(--max-width-content);
98+
margin-inline: auto;
99+
padding-inline: var(--space-6);
100+
padding-block: var(--space-8) var(--space-10);
101+
display: grid;
102+
grid-template-columns: 1fr;
103+
gap: 0;
104+
}
105+
106+
.index-content {
107+
max-width: var(--max-width-prose);
108+
min-width: 0;
109+
110+
h1 {
111+
margin-bottom: var(--space-5);
112+
}
113+
114+
h2 {
115+
margin-top: var(--space-8);
116+
margin-bottom: var(--space-4);
117+
padding-bottom: var(--space-3);
118+
border-bottom: 1px solid var(--color-border-subtle);
119+
}
97120

98-
.page-content {
99121
// Guide link paragraphs: make the guide link prominent
100122
h2 + p > a:only-child {
101123
font-family: var(--font-display);
@@ -110,25 +132,13 @@
110132
}
111133
}
112134

113-
// Spacing between sections
114-
h2 {
115-
margin-top: var(--space-8);
116-
margin-bottom: var(--space-4);
117-
padding-bottom: var(--space-3);
118-
border-bottom: 1px solid var(--color-border-subtle);
119-
}
120-
121-
h1 {
122-
margin-bottom: var(--space-5);
123-
}
124-
125135
// Voices list
126136
h2 ~ ul {
127137
list-style: none;
128138
padding: 0;
129139
display: grid;
130-
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
131-
gap: var(--space-2) var(--space-6);
140+
grid-template-columns: 1fr;
141+
gap: var(--space-2);
132142

133143
li {
134144
margin: 0;
@@ -140,6 +150,10 @@
140150
}
141151
}
142152

153+
.index-aside {
154+
display: none;
155+
}
156+
143157
// ── Guide layout ──────────────────────────────────────────────────────────
144158
// Mobile first: single column. Desktop: TOC rail + prose column.
145159

@@ -155,27 +169,38 @@
155169

156170
.guide-content {
157171
min-width: 0; // prevent overflow in grid
172+
max-width: var(--max-width-prose);
158173

159174
h1 {
160-
margin-bottom: var(--space-5);
175+
font-size: var(--font-size-3xl);
176+
letter-spacing: var(--letter-spacing-tight);
177+
margin-bottom: var(--space-4);
178+
}
179+
180+
// Lead paragraph immediately after h1
181+
h1 + p {
182+
font-size: var(--font-size-lg);
183+
color: var(--color-text-secondary);
184+
line-height: var(--line-height-normal);
185+
margin-bottom: var(--space-7);
161186
}
162187

163188
h2 {
164-
margin-top: var(--space-8);
189+
margin-top: var(--space-9);
165190
margin-bottom: var(--space-4);
166-
padding-top: var(--space-4);
191+
padding-top: var(--space-5);
167192
border-top: 1px solid var(--color-border-subtle);
193+
font-size: var(--font-size-2xl);
194+
letter-spacing: var(--letter-spacing-tight);
168195
}
169196

170197
h3 {
171198
margin-top: var(--space-6);
172199
margin-bottom: var(--space-3);
173200
}
174201

175-
p,
176-
ul,
177-
ol {
178-
max-width: var(--max-width-prose);
202+
p {
203+
line-height: var(--line-height-relaxed);
179204
}
180205
}
181206

‎_sass/media.scss‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@
3636
padding-block: var(--space-6) var(--space-8);
3737
}
3838

39-
// Guide: tighter chapter spacing on mobile
40-
.guide-layout {
39+
// Page layouts: tighter spacing on mobile
40+
.guide-layout,
41+
.index-layout {
4142
padding-inline: var(--space-4);
4243
padding-block: var(--space-6) var(--space-8);
4344
}
@@ -60,12 +61,17 @@
6061

6162
// Guide layout: activate two-column grid at desktop width
6263
@media (min-width: 1024px) {
63-
.guide-layout {
64-
grid-template-columns: var(--toc-width) 1fr;
64+
.guide-layout,
65+
.index-layout {
66+
grid-template-columns: minmax(0, 1fr) var(--toc-width);
6567
gap: var(--toc-gap);
6668
align-items: start;
6769
}
6870

71+
.index-aside {
72+
display: block;
73+
}
74+
6975
.toc {
7076
display: block;
7177
position: sticky;

‎_site/assets/css/main.css‎

Lines changed: 58 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/assets/css/main.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/conferences/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</head>
1414
<body>
1515

16-
<header class="site-header">
16+
<header class="site-header" role="banner">
1717
<nav class="nav" aria-label="Main navigation">
1818
<a class="nav__title" href="/">Ruby Community Guides</a>
1919
<div class="nav__links">

0 commit comments

Comments
 (0)