The source code for my personal website
refactor: move copyright under toc on desktop
+73
-37
+73
-37
src/pages/blog/[slug].astro
+73
-37
src/pages/blog/[slug].astro
···
31
31
</div>
32
32
</div>
33
33
34
-
<details class="toc" open>
35
-
<summary>Table of Contents</summary>
36
-
<ul>
37
-
{headings.filter(h => h.depth > 1 && h.depth < 4).map(h => (
38
-
<li class={`depth-${h.depth}`}>
39
-
<a draggable="false" href={`#${h.slug}`}>{h.text}</a>
40
-
</li>
41
-
))}
42
-
</ul>
43
-
</details>
44
-
45
-
<section class="article">
46
-
<Content />
34
+
<div class="sidebar">
35
+
<details class="toc" open>
36
+
<summary>Table of Contents</summary>
37
+
<ul>
38
+
{headings.filter(h => h.depth > 1 && h.depth < 4).map(h => (
39
+
<li class={`depth-${h.depth}`}>
40
+
<a draggable="false" href={`#${h.slug}`}>{h.text}</a>
41
+
</li>
42
+
))}
43
+
</ul>
44
+
</details>
47
45
<p class="copyright">
48
-
This article is licensed under the
46
+
This blog post is licensed under
49
47
<a draggable="false" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
50
-
CC BY-NC-ND 4.0
51
-
</a>
52
-
license.
48
+
CC BY-NC-ND 4.0</a>.
53
49
</p>
50
+
</div>
51
+
52
+
<section class="article">
53
+
<Content />
54
54
</section>
55
+
56
+
<p class="copyright mobile">
57
+
This blog post is licensed under
58
+
<a draggable="false" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
59
+
CC BY-NC-ND 4.0</a>.
60
+
</p>
55
61
</div>
56
62
</Page>
57
63
···
102
108
}
103
109
}
104
110
105
-
.toc {
111
+
.sidebar {
106
112
position: fixed;
107
113
left: max(20px, calc(50% - 24rem - 300px));
108
114
max-height: calc(100vh - 140px);
115
+
width: 250px;
116
+
display: flex;
117
+
flex-direction: column;
118
+
119
+
& > .copyright {
120
+
color: rgba(194, 200, 204, 0.4);
121
+
padding-top: var(--space-sm);
122
+
font-size: 10px;
123
+
124
+
& > a {
125
+
color: var(--text-muted);
126
+
text-decoration: none;
127
+
}
128
+
}
129
+
130
+
@media only screen and (max-width: 1400px) {
131
+
position: relative;
132
+
max-height: none;
133
+
width: 100%;
134
+
left: 0;
135
+
136
+
& > .copyright {
137
+
display: none;
138
+
}
139
+
}
140
+
}
141
+
142
+
.copyright.mobile {
143
+
display: none;
144
+
color: rgba(194, 200, 204, 0.4);
145
+
font-size: 10px;
146
+
border-top: 1px solid rgba(194, 200, 204, 0.1);
147
+
padding-top: 8px;
148
+
margin-top: var(--space-sm);
149
+
150
+
& > a {
151
+
color: var(--text-muted);
152
+
text-decoration: none;
153
+
}
154
+
155
+
@media only screen and (max-width: 1400px) {
156
+
display: block;
157
+
}
158
+
}
159
+
160
+
.toc {
109
161
border: 1px solid var(--border);
110
162
background: var(--bg-secondary);
111
163
border-radius: var(--radius);
112
164
padding: var(--space-sm);
113
165
overflow-y: auto;
114
-
width: 250px;
166
+
flex: 1;
167
+
max-height: calc(100vh - 200px);
115
168
116
169
& summary {
117
170
font-size: 14px;
···
147
200
font-size: 13px;
148
201
display: block;
149
202
padding: 2px 0;
150
-
transition: color 0.2s;
151
203
white-space: nowrap;
152
204
overflow: hidden;
153
205
text-overflow: ellipsis;
···
171
223
172
224
@media only screen and (max-width: 1400px) {
173
225
margin-top: 12px;
174
-
position: relative;
175
226
overflow: visible;
176
227
max-height: none;
177
-
width: calc(100% - 22px);
178
-
left: 0;
179
-
top: 0;
228
+
flex: none;
180
229
181
230
&:not([open]) {
182
231
margin-bottom: 0;
···
330
379
text-decoration-color: transparent;
331
380
text-underline-offset: 2px;
332
381
color: var(--accent-blue);
333
-
transition: text-decoration-color 0.25s ease-out;
334
382
-webkit-user-drag: none;
335
383
user-drag: none;
336
384
}
···
400
448
401
449
& :global(blockquote p) {
402
450
margin: 0px;
403
-
}
404
-
405
-
& > .copyright {
406
-
border-top: 1px solid rgba(194, 200, 204, 0.1);
407
-
color: rgba(194, 200, 204, 0.4);
408
-
padding-top: 8px;
409
-
font-size: 10px;
410
-
411
-
& > a {
412
-
color: var(--text-muted);
413
-
text-decoration: none;
414
-
}
415
451
}
416
452
}
417
453
</style>