Skip to content

Commit 6106d88

Browse files
nikoshellnikoshell
committed
Create separate layout for markdown pages.
1 parent 09efdcb commit 6106d88

File tree

5 files changed

+218
-99
lines changed

5 files changed

+218
-99
lines changed

‎src/layouts/Layout.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import Header from "@components/Header.astro";
44
import Footer from "@components/Footer.astro";
55
import Search from "@components/Search.astro";
66
7+
import "../styles/global.css";
8+
import "@fontsource-variable/inter";
9+
710
export interface Props {
811
title: string;
912
description: string;

‎src/layouts/MarkdownLayout.astro‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import Layout from "@layouts/Layout.astro";
3+
4+
import "../styles/markdown.css";
5+
6+
const { title, description } = Astro.props;
7+
---
8+
9+
<Layout title={title} description={description}>
10+
<slot />
11+
</Layout>

‎src/pages/[...slug].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { type CollectionEntry, getCollection } from "astro:content";
3-
import Layout from "../layouts/Layout.astro";
3+
import Layout from "@layouts/MarkdownLayout.astro";
44
55
import Prose from "../components/prose/prose.astro";
66
import ButtonLink from "../components/button-link/button-link.astro";

‎src/styles/global.css‎

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -46,104 +46,6 @@ body {
4646
grid-column: 1 / 4;
4747
}
4848

49-
.prose :is(h1, h2, h3, h4, h5, h6) a {
50-
text-decoration: none !important;
51-
}
52-
53-
.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
54-
text-decoration: underline !important;
55-
}
56-
57-
.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
58-
outline: 4px solid #0073e6;
59-
outline-offset: 5px;
60-
}
61-
62-
ul.milestone-done li {
63-
position: relative;
64-
list-style: none;
65-
}
66-
67-
ul.milestone-done li::before {
68-
content: "\2705 " !important;
69-
background: none !important;
70-
}
71-
72-
ul.milestone-todo li {
73-
position: relative;
74-
list-style: none;
75-
}
76-
77-
ul.milestone-todo li::before {
78-
content: "\1F4DD " !important;
79-
background: none !important;
80-
}
81-
82-
img.findaid-accent-round-marker {
83-
width: 120px;
84-
min-width: 70px;
85-
padding: 0 10px;
86-
display: inline-block;
87-
margin: 0;
88-
}
89-
90-
table.finaid-timeline td {
91-
padding-bottom: 1rem;
92-
}
93-
94-
div.finaid-sponsor {
95-
width: 50%;
96-
margin: 0 auto 2rem auto;
97-
}
98-
99-
summary h4::after {
100-
content: "👇";
101-
}
102-
103-
.list-disc li {
104-
list-style: none;
105-
position: relative;
106-
}
107-
108-
ul.list-disc li::before {
109-
content: "";
110-
display: inline-block;
111-
width: 25px;
112-
height: 20px;
113-
/*background-image: url(/img/list-item.svg);*/
114-
background-size: 100%;
115-
background-repeat: no-repeat;
116-
background-position: 50% 50%;
117-
position: absolute;
118-
left: -30px;
119-
top: 0.2em;
120-
}
121-
122-
ul ul.list-disc li {
123-
list-style: disc;
124-
}
125-
ul ul.list-disc li::before {
126-
display: none;
127-
}
128-
129-
p.tick::before {
130-
content: "\2705 ";
131-
padding: 0.5rem;
132-
}
133-
134-
p.cross::before {
135-
content: "\274C ";
136-
padding: 0.5rem;
137-
}
138-
139-
p.tick::after,
140-
p.cross::after {
141-
content: "\23EC";
142-
display: inline-block;
143-
font-size: 1.3em;
144-
margin-left: 0.4em;
145-
}
146-
14749
/* typography */
14850
.prose {
14951
h1,

‎src/styles/markdown.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
.prose :is(h1, h2, h3, h4, h5, h6) a {
2+
text-decoration: none !important;
3+
}
4+
5+
.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
6+
text-decoration: underline !important;
7+
}
8+
9+
.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
10+
outline: 4px solid #0073e6;
11+
outline-offset: 5px;
12+
}
13+
14+
ul.milestone-done li {
15+
position: relative;
16+
list-style: none;
17+
}
18+
19+
ul.milestone-done li::before {
20+
content: "\2705 " !important;
21+
background: none !important;
22+
}
23+
24+
ul.milestone-todo li {
25+
position: relative;
26+
list-style: none;
27+
}
28+
29+
ul.milestone-todo li::before {
30+
content: "\1F4DD " !important;
31+
background: none !important;
32+
}
33+
34+
img.findaid-accent-round-marker {
35+
width: 120px;
36+
min-width: 70px;
37+
padding: 0 10px;
38+
display: inline-block;
39+
margin: 0;
40+
}
41+
42+
table.finaid-timeline td {
43+
padding-bottom: 1rem;
44+
}
45+
46+
div.finaid-sponsor {
47+
width: 50%;
48+
margin: 0 auto 2rem auto;
49+
}
50+
51+
summary h4::after {
52+
content: "👇";
53+
}
54+
55+
.list-disc li {
56+
list-style: none;
57+
position: relative;
58+
}
59+
60+
ul.list-disc li::before {
61+
content: "";
62+
display: inline-block;
63+
width: 25px;
64+
height: 20px;
65+
/*background-image: url(/img/list-item.svg);*/
66+
background-size: 100%;
67+
background-repeat: no-repeat;
68+
background-position: 50% 50%;
69+
position: absolute;
70+
left: -30px;
71+
top: 0.2em;
72+
}
73+
74+
ul ul.list-disc li {
75+
list-style: disc;
76+
}
77+
ul ul.list-disc li::before {
78+
display: none;
79+
}
80+
81+
p.tick::before {
82+
content: "\2705 ";
83+
padding: 0.5rem;
84+
}
85+
86+
p.cross::before {
87+
content: "\274C ";
88+
padding: 0.5rem;
89+
}
90+
91+
p.tick::after,
92+
p.cross::after {
93+
content: "\23EC";
94+
display: inline-block;
95+
font-size: 1.3em;
96+
margin-left: 0.4em;
97+
}
98+
99+
/* typography */
100+
.prose {
101+
h1,
102+
h2,
103+
h3,
104+
h4,
105+
h5,
106+
h6 {
107+
position: relative;
108+
109+
span.heading-link {
110+
font-size: 0.5em;
111+
margin-left: 0.2em;
112+
vertical-align: text-top;
113+
114+
@media (min-width: 768px) {
115+
font-size: 1em;
116+
margin-left: 0;
117+
vertical-align: unset;
118+
position: absolute;
119+
left: -1em;
120+
padding-right: 0.5rem;
121+
color: var(--color-text);
122+
text-decoration: none;
123+
124+
&:hover {
125+
text-decoration: underline;
126+
}
127+
}
128+
}
129+
}
130+
131+
/* Breaking all links because we sometimes have very long links that break mobile */
132+
133+
a {
134+
word-break: break-word;
135+
}
136+
137+
h1,
138+
h2,
139+
h3,
140+
h4,
141+
h5,
142+
h6 {
143+
font-weight: bold;
144+
font-family: var(--font-display);
145+
line-height: 1.25;
146+
147+
/* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
148+
149+
--min-fs: 1;
150+
--max-fs: 1.5;
151+
--min-vw: 20;
152+
--max-vw: 45;
153+
154+
--min-fs-rem: var(--min-fs) * 1rem;
155+
--max-fs-rem: var(--max-fs) * 1rem;
156+
--min-vw-rem: var(--min-vw) * 1rem;
157+
158+
--slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
159+
(var(--max-vw) - var(--min-vw));
160+
161+
font-size: clamp(
162+
var(--min-fs-rem),
163+
var(--min-fs-rem) + var(--slope),
164+
var(--max-fs-rem)
165+
);
166+
}
167+
168+
h1 {
169+
/* 36 px, 48px */
170+
--min-fs: 2.25;
171+
--max-fs: 3;
172+
}
173+
174+
h2 {
175+
/* 32px, 40px */
176+
--min-fs: 2;
177+
--max-fs: 2.5;
178+
}
179+
180+
h3 {
181+
/* 28px, 36px */
182+
--min-fs: 1.75;
183+
--max-fs: 2.25;
184+
}
185+
186+
h4 {
187+
/* 24px, 32px */
188+
--min-fs: 1.5;
189+
--max-fs: 2;
190+
}
191+
192+
h5 {
193+
/* 20px, 28px */
194+
--min-fs: 1.25;
195+
--max-fs: 1.75;
196+
}
197+
198+
h6 {
199+
/* 16px, 24px */
200+
--min-fs: 1;
201+
--max-fs: 1.5;
202+
}
203+
}

0 commit comments

Comments
 (0)