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