Personal Site
Expand markdown styling further im to lazy to be specific
+77
-3
+77
-3
src/components/markdown.css
+77
-3
src/components/markdown.css
···
1
-
/* all styles should be scoped to be child of article to avoid conflicting other styles */
1
+
/* all styles should be scoped
2
+
to be child of article to avoid
3
+
conflicting other styles */
2
4
article {
3
5
/* comfy reading width centered */
4
6
max-width: 60ch;
5
7
margin: auto;
8
+
--content-gap: 20px;
6
9
7
-
/* all headings should have leading and trailing margins but not between other headings */
10
+
/* all headings should have
11
+
leading and trailing margins
12
+
but not between other headings */
8
13
h1,
9
14
h2,
10
15
h3,
11
16
h4,
12
17
h5,
13
18
h6 {
14
-
margin-block: 10px;
19
+
margin-block: var(--content-gap);
15
20
16
21
& + & {
17
22
margin-block-start: 0px;
···
19
24
20
25
&:has(+ &) {
21
26
margin-block-end: 0px;
27
+
}
28
+
}
29
+
30
+
> p,
31
+
> ul,
32
+
> ol,
33
+
pre,
34
+
blockquote,
35
+
table,
36
+
hr {
37
+
margin-block: var(--content-gap);
38
+
}
39
+
40
+
:not(pre) > code {
41
+
background-color: #00000020;
42
+
padding: 2.5px;
43
+
border-radius: 5px;
44
+
box-decoration-break: clone;
45
+
}
46
+
47
+
pre {
48
+
padding: 10px;
49
+
border-radius: 10px;
50
+
}
51
+
52
+
blockquote {
53
+
margin-left: 10px;
54
+
padding-left: 10px;
55
+
border-image: url(../assets/vr.png) 0 5 fill / 0 0 0 5px round;
56
+
}
57
+
58
+
hr {
59
+
height: 5px;
60
+
border: none;
61
+
border-image: url(../assets/hr.png) 0 5 fill / 0 5px round;
62
+
}
63
+
64
+
ul,
65
+
ol {
66
+
padding-inline-start: 2em;
67
+
68
+
& ol {
69
+
list-style: lower-alpha;
70
+
71
+
& ol {
72
+
list-style: lower-roman;
73
+
74
+
& ol {
75
+
list-style: lower-greek;
76
+
77
+
& ol {
78
+
list-style: decimal;
79
+
80
+
& ol ol {
81
+
/* easter egg incase i ever go 7 deep lmao */
82
+
list-style: hebrew;
83
+
}
84
+
}
85
+
}
86
+
}
87
+
}
88
+
89
+
&.contains-task-list {
90
+
/* checkbox is marker */
91
+
list-style-type: none;
92
+
93
+
input {
94
+
margin-inline-end: .5em;
95
+
}
22
96
}
23
97
}
24
98
}