Skip to content

Commit 8a36df9

Browse files
hschnehschne
committed
Fix base path
1 parent 5429ab2 commit 8a36df9

26 files changed

Lines changed: 261 additions & 3704 deletions

‎.github/workflows/jekyll.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929
id: pages
3030
uses: actions/configure-pages@v5
3131
- name: Build with Jekyll
32-
run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
32+
run: bundle exec jekyll build --baseurl "/rubyevents-guides"
3333
env:
3434
JEKYLL_ENV: production
3535
- name: Upload artifact

‎.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# Edit at https://www.toptal.com/developers/gitignore?templates=node,jekyll,ruby,vim
33

44
### Jekyll ###
5-
_site/
5+
/_site/
66
.sass-cache/
77
.jekyll-cache/
88
.jekyll-metadata
@@ -231,4 +231,3 @@ tags
231231
# End of https://www.toptal.com/developers/gitignore/api/node,jekyll,ruby,vim
232232
.design
233233
.agents
234-
_site

‎DESIGN_REVIEW.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Design Review — Mobile Sticky Guide Header
2+
3+
## Screenshots captured
4+
5+
- `screenshots/review-meetups-mobile-top-375.png`
6+
- `screenshots/review-meetups-mobile-sticky-closed-375.png`
7+
- `screenshots/review-meetups-mobile-sticky-open-375.png`
8+
- `screenshots/review-meetups-tablet-768.png`
9+
- `screenshots/review-meetups-desktop-1280.png`
10+
11+
## Result
12+
13+
Pass. The sticky header appears only on mobile after scrolling, preserves the editorial style, and the burger menu exposes both guide-switching links and the page TOC.
14+
15+
## Checks
16+
17+
- Visual hierarchy: header is compact and visible without overpowering the article.
18+
- Responsive behavior: hidden at 768px/tablet and desktop; active at 375px mobile.
19+
- Interaction states: menu opens/closes, link clicks close it, Escape/outside click close it.
20+
- Accessibility: uses a real button with `aria-expanded`/`aria-controls`; menu links remain semantic navigation.
21+
- Motion: respects `prefers-reduced-motion`.
22+
23+
## Notes
24+
25+
No must-fix issues found in the captured states.

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
url: "https://hansschnedlitz.com"
2-
baseurl: "/rubyevents-guides"
2+
baseurl: ""
33
title: "Ruby Community Guides"
44
description: "Practical guides for starting and running Ruby communities."
55

‎_includes/toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% assign toc_variant = include.variant | default: "desktop" %} {% if
22
page.chapters %}
33
<nav class="toc toc--{{ toc_variant }}" aria-label="Guide contents">
4-
{% if toc_variant == "mobile" %}
4+
{% if toc_variant == "mobile" or toc_variant == "sticky" %}
55
<p class="toc__heading">Contents</p>
66
{% endif %}
77
<ol class="toc__list">

‎_layouts/default.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="preload" href="{{ "/assets/css/main.css" | relative_url }}" as="style">
1111
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">
1212
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
13+
<script src="{{ "/js/mobile-sticky-header.js" | relative_url }}" defer></script>
1314
</head>
1415
<body>
1516

@@ -29,6 +30,29 @@
2930
</nav>
3031
</header>
3132

33+
{% if page.chapters %}
34+
<header class="mobile-sticky-header" data-mobile-sticky-header>
35+
<a class="mobile-sticky-header__title" href="{{ page.url | relative_url }}">{{ page.title }}</a>
36+
<button class="mobile-sticky-header__toggle" type="button" aria-expanded="false" aria-controls="mobile-sticky-menu" data-mobile-menu-toggle>
37+
<span class="mobile-sticky-header__toggle-icon" aria-hidden="true"></span>
38+
<span class="mobile-sticky-header__toggle-label">Menu</span>
39+
</button>
40+
<div class="mobile-sticky-header__menu" id="mobile-sticky-menu" data-mobile-menu hidden>
41+
<nav class="mobile-sticky-header__links" aria-label="Guide navigation">
42+
<a href="{{ "/meetups/" | relative_url }}"
43+
{% if page.url contains '/meetups/' %}aria-current="page"{% endif %}>
44+
Meetups
45+
</a>
46+
<a href="{{ "/conferences/" | relative_url }}"
47+
{% if page.url contains '/conferences/' %}aria-current="page"{% endif %}>
48+
Conferences
49+
</a>
50+
</nav>
51+
{% include toc.html variant="sticky" %}
52+
</div>
53+
</header>
54+
{% endif %}
55+
3256
<main>
3357
{{ content }}
3458
</main>

‎_sass/components.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,107 @@
7373
}
7474
}
7575

76+
// ── Mobile sticky guide header ───────────────────────────────────────────
77+
78+
.mobile-sticky-header {
79+
display: none;
80+
}
81+
82+
.mobile-sticky-header__title {
83+
min-width: 0;
84+
overflow: hidden;
85+
color: var(--color-accent);
86+
font-family: var(--font-display);
87+
font-size: var(--font-size-base);
88+
font-weight: var(--font-weight-bold);
89+
letter-spacing: var(--letter-spacing-tight);
90+
text-decoration: none;
91+
text-overflow: ellipsis;
92+
white-space: nowrap;
93+
}
94+
95+
.mobile-sticky-header__toggle {
96+
display: inline-flex;
97+
align-items: center;
98+
gap: var(--space-2);
99+
border: 1px solid var(--color-border);
100+
border-radius: var(--border-radius-full);
101+
background: var(--color-bg);
102+
color: var(--color-text);
103+
cursor: pointer;
104+
font: inherit;
105+
font-size: var(--font-size-sm);
106+
font-weight: var(--font-weight-semibold);
107+
line-height: var(--line-height-snug);
108+
padding: var(--space-2) var(--space-3);
109+
110+
&:focus-visible {
111+
outline: none;
112+
box-shadow: var(--shadow-focus);
113+
}
114+
}
115+
116+
.mobile-sticky-header__toggle-icon {
117+
position: relative;
118+
inline-size: 1rem;
119+
block-size: 2px;
120+
border-radius: var(--border-radius-full);
121+
background: currentColor;
122+
123+
&::before,
124+
&::after {
125+
content: "";
126+
position: absolute;
127+
inset-inline: 0;
128+
block-size: 2px;
129+
border-radius: var(--border-radius-full);
130+
background: currentColor;
131+
}
132+
133+
&::before {
134+
transform: translateY(-5px);
135+
}
136+
137+
&::after {
138+
transform: translateY(5px);
139+
}
140+
}
141+
142+
.mobile-sticky-header__menu {
143+
grid-column: 1 / -1;
144+
margin-top: var(--space-3);
145+
border: 1px solid var(--color-border);
146+
border-radius: var(--border-radius-lg);
147+
background: var(--color-bg);
148+
box-shadow: var(--shadow-md);
149+
padding: var(--space-4);
150+
}
151+
152+
.mobile-sticky-header__links {
153+
display: flex;
154+
gap: var(--space-3);
155+
margin-bottom: var(--space-4);
156+
padding-bottom: var(--space-4);
157+
border-bottom: 1px solid var(--color-border-subtle);
158+
159+
a {
160+
flex: 1;
161+
border: 1px solid var(--color-border-subtle);
162+
border-radius: var(--border-radius-full);
163+
color: var(--color-text-secondary);
164+
font-size: var(--font-size-sm);
165+
font-weight: var(--font-weight-semibold);
166+
padding: var(--space-2) var(--space-3);
167+
text-align: center;
168+
text-decoration: none;
169+
170+
&[aria-current="page"] {
171+
border-color: var(--color-accent);
172+
color: var(--color-accent);
173+
}
174+
}
175+
}
176+
76177
// ── Default page content wrapper ──────────────────────────────────────────
77178
// Used by homepage and simple pages. Guide pages use their own layout.
78179

@@ -387,6 +488,10 @@
387488
padding: var(--space-4);
388489
border-block: 1px solid var(--color-toc-border);
389490
}
491+
492+
&--sticky {
493+
display: block;
494+
}
390495
}
391496

392497
.toc__heading {

‎_sass/media.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,54 @@
1010
// lg: 1024px small desktop
1111
// xl: 1280px desktop
1212

13+
// Mobile guide header (up to tablet)
14+
// ─────────────────────────────────────────────────────────────────────────────
15+
16+
@media (max-width: 767px) {
17+
.mobile-sticky-header {
18+
position: fixed;
19+
z-index: 20;
20+
inset-block-start: var(--space-3);
21+
inset-inline: var(--space-3);
22+
display: grid;
23+
grid-template-columns: minmax(0, 1fr) auto;
24+
align-items: center;
25+
column-gap: var(--space-3);
26+
padding: var(--space-3);
27+
border: 1px solid var(--color-border-subtle);
28+
border-radius: var(--border-radius-lg);
29+
background: var(--color-bg);
30+
box-shadow: var(--shadow-md);
31+
opacity: 0;
32+
pointer-events: none;
33+
transform: translateY(calc(-1 * var(--space-6)));
34+
transition:
35+
opacity var(--duration-normal) var(--easing-out),
36+
transform var(--duration-normal) var(--easing-out);
37+
}
38+
39+
.mobile-sticky-header[data-visible] {
40+
opacity: 1;
41+
pointer-events: auto;
42+
transform: translateY(0);
43+
}
44+
45+
.mobile-sticky-header__menu[hidden] {
46+
display: none;
47+
}
48+
49+
.mobile-sticky-header__menu .toc__list {
50+
max-height: min(55vh, 28rem);
51+
overflow-y: auto;
52+
}
53+
}
54+
55+
@media (prefers-reduced-motion: reduce) {
56+
.mobile-sticky-header {
57+
transition: none;
58+
}
59+
}
60+
1361
// Mobile (up to 640px)
1462
// ─────────────────────────────────────────────────────────────────────────────
1563

‎_site/AGENTS.md‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)