Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
Make everything have no border radius, add skip link, make focus on h1 better looking (#55)
+56
-16
+11
-4
src/components/rewrite/SeasonLayout.astro
+11
-4
src/components/rewrite/SeasonLayout.astro
···
26
26
</aside>
27
27
<main>
28
28
<div class="main-inner">
29
-
<h1 id="main-content" tabindex="-1">
30
-
<slot name="main-title" />
31
-
</h1>
29
+
<div class="main-heading-wrapper">
30
+
<h1 id="main-content" tabindex="-1">
31
+
<slot name="main-title" />
32
+
</h1>
33
+
</div>
32
34
<slot />
33
35
</div>
34
36
</main>
···
95
97
}
96
98
}
97
99
98
-
h1 {
100
+
.main-heading-wrapper {
101
+
display: flex;
99
102
position: sticky;
100
103
top: 0;
101
104
padding-block: 16px;
102
105
background-color: var(--color-canvas);
106
+
}
107
+
108
+
h1 {
109
+
display: inline-block;
103
110
}
104
111
</style>
-1
src/components/rewrite/SiteHeader.astro
-1
src/components/rewrite/SiteHeader.astro
+13
src/components/rewrite/SkipLink.astro
+13
src/components/rewrite/SkipLink.astro
···
1
+
<a href="#main-content" class="visually-hidden">Skip to main content</a>
2
+
3
+
<style>
4
+
a:focus-visible {
5
+
background-color: var(--color-canvas);
6
+
position: fixed;
7
+
inset-block-start: 16px;
8
+
inset-inline-start: 24px;
9
+
z-index: 1;
10
+
padding: 4px 8px;
11
+
outline-offset: 0;
12
+
}
13
+
</style>
+11
-5
src/components/rewrite/VideoItem.astro
+11
-5
src/components/rewrite/VideoItem.astro
···
12
12
<a href={`https://www.youtube.com/watch?v=${ytId}`}>
13
13
<span class="cluster gap-text-icon">
14
14
<Icon
15
-
name="lucide:youtube"
15
+
name="lucide:circle-play"
16
16
title="Watch on YouTube"
17
17
role="img"
18
-
size="1.5em"
18
+
size="2em"
19
19
/>
20
20
<span>{title}</span>
21
21
</span>
···
31
31
padding: 16px;
32
32
background-color: var(--color-surface-1);
33
33
border: 1px solid var(--color-surface-2);
34
-
border-radius: 8px;
35
34
text-wrap: balance;
36
35
text-align: center;
37
-
font-weight: var(--font-weight-body);
38
36
line-height: 1.5;
39
37
40
-
--cluster-horizontal-alignment: center;
38
+
--cluster-direction: column;
41
39
42
40
&:focus-visible {
43
41
outline-offset: 8px;
44
42
outline: 4px solid;
43
+
}
44
+
45
+
span {
46
+
max-width: 40ch;
47
+
}
48
+
49
+
:global(g) {
50
+
stroke-width: 1.25px;
45
51
}
46
52
}
47
53
</style>
+2
src/layouts/rewrite/BaseLayout.astro
+2
src/layouts/rewrite/BaseLayout.astro
···
2
2
import { Font } from 'astro:assets';
3
3
import { Head } from 'astro-capo';
4
4
import CustomCursor from '@/components/rewrite/CustomCursor.astro';
5
+
import SkipLink from '@/components/rewrite/SkipLink.astro';
5
6
import '@/styles/rewrite/global.css';
6
7
7
8
const { title } = Astro.props;
···
23
24
<PostHog /> -->
24
25
</Head>
25
26
<body>
27
+
<SkipLink />
26
28
<slot />
27
29
<CustomCursor />
28
30
</body>
+7
-3
src/pages/rewrite/seasons/[season_id]/[member_name].astro
+7
-3
src/pages/rewrite/seasons/[season_id]/[member_name].astro
···
130
130
<ol role="list" class="flow session-list">
131
131
{sessions.map((session, i) => (
132
132
<li>
133
-
<h2>
133
+
<h3>
134
134
<VideoItem
135
135
ytId={session.id}
136
136
title={`Session ${i + 1} - ${session.title}`}
137
137
/>
138
-
</h2>
138
+
</h3>
139
139
</li>
140
140
))}
141
141
</ol>
···
179
179
> :global(div) {
180
180
outline: 2px solid var(--color-canvas-text);
181
181
outline-offset: 4px;
182
-
border-radius: 1px;
183
182
}
184
183
}
185
184
···
202
201
translate: 12px;
203
202
text-decoration-line: underline;
204
203
text-decoration-style: wavy;
204
+
font-weight: var(--font-weight-heading);
205
205
}
206
206
207
207
&[aria-disabled='true'] {
···
224
224
225
225
.session-wrapper > * + * {
226
226
--flow-space: 1em;
227
+
}
228
+
229
+
.session-list {
230
+
margin-block-start: 8px;
227
231
}
228
232
229
233
.session-list > * + * {
+12
-2
src/styles/rewrite/global.css
+12
-2
src/styles/rewrite/global.css
···
67
67
:focus-visible {
68
68
outline: 2px solid var(--color-canvas-text);
69
69
outline-offset: 4px;
70
-
border-radius: 1px;
70
+
}
71
+
72
+
h1,
73
+
h2,
74
+
h3 {
75
+
margin: 0;
71
76
}
72
77
73
78
h1,
74
79
h2 {
75
-
margin: 0;
76
80
font-size: 1rem;
77
81
font-weight: var(--font-weight-heading);
82
+
}
83
+
84
+
h3 {
85
+
font-size: clamp(1rem, 0.8214rem + 0.8929cqi, 1.25rem);
86
+
font-weight: var(--font-weight-body);
78
87
}
79
88
80
89
ul[role='list'],
···
111
120
112
121
.cluster {
113
122
display: flex;
123
+
flex-direction: var(--cluster-direction, row);
114
124
flex-wrap: wrap;
115
125
align-items: center;
116
126
justify-content: var(--cluster-horizontal-alignment, flex-start);