site
scripts to generate personal blog and git repositories
git clone https://9o.is/git/site.git
article.css
(3141B)
1 article {
2 display: flow-root;
3 max-width: 65ch;
4 margin: calc(4 * var(--spacing)) 0;
5 }
6
7 article :not(header.main, header.main *, nav, nav *, small) {
8 font-family: var(--font-sans);
9 line-height: var(--lineheight-lg);
10 }
11
12 article {
13 h2,
14 h3 {
15 text-wrap: balance;
16 margin: 25px 0;
17 }
18
19 p {
20 text-wrap: balance;
21 margin-top: calc(5 * var(--spacing));
22 margin-bottom: calc(5 * var(--spacing));
23 }
24
25 ol {
26 list-style-type: decimal;
27 margin-top: 1.25em;
28 margin-bottom: 1.25em;
29 padding-inline-start: 1.625em;
30
31 & > li {
32 padding-inline-start: 0.375em;
33 }
34 }
35
36 ul {
37 list-style-type: disc;
38 margin-top: 1.25em;
39 margin-bottom: 1.25em;
40 padding-inline-start: 1.625em;
41
42 & > li {
43 padding-inline-start: 0.375em;
44 }
45 }
46
47 li {
48 margin-top: 0.5em;
49 margin-bottom: 0.5em;
50 }
51
52 hr {
53 margin-top: 3em;
54 margin-bottom: 3em;
55 }
56
57 blockquote {
58 font-weight: 500;
59 font-style: italic;
60 border-inline-start-width: 0.25rem;
61 quotes: '\201C' '\201D' '\2018' '\2019';
62 margin-top: 1.6em;
63 margin-bottom: 1.6em;
64 padding-inline-start: 1em;
65 }
66
67 blockquote p:first-of-type::before {
68 content: open-quote;
69 }
70
71 blockquote p:last-of-type::after {
72 content: close-quote;
73 }
74
75 img,
76 picture,
77 figure,
78 video {
79 margin-top: 2em;
80 margin-bottom: 2em;
81 }
82
83 figure > * {
84 margin-top: 0;
85 margin-bottom: 0;
86 }
87
88 figcaption {
89 font-size: 0.875em;
90 line-height: 1.4285714;
91 margin-top: 0.8571429em;
92 text-align: center;
93 }
94
95 picture > img {
96 margin-top: 0;
97 margin-bottom: 0;
98 }
99
100 kbd {
101 font-weight: 500;
102 font-size: 0.875em;
103 border: var(--color-border) 1px solid;
104 border-radius: 0.3125rem;
105 padding-top: 0.1875em;
106 padding-inline-end: 0.375em;
107 padding-bottom: 0.1875em;
108 padding-inline-start: 0.375em;
109 }
110
111 code {
112 font-weight: 600;
113 font-size: 0.875em;
114 }
115
116 code::before,
117 code::after {
118 content: '`';
119 }
120
121 pre {
122 font-weight: normal;
123 overflow-x: auto;
124 font-size: 0.875em;
125 line-height: 1.7142857;
126 margin-top: 1.7142857em;
127 margin-bottom: 1.7142857em;
128 padding-top: 0.8571429em;
129 padding-inline-end: 1.1428571em;
130 padding-bottom: 0.8571429em;
131 padding-inline-start: 1.1428571em;
132 }
133
134 pre code {
135 font-weight: inherit;
136 }
137
138 pre code::before,
139 pre code::after {
140 content: none;
141 }
142
143 dl {
144 margin-top: 1.25em;
145 margin-bottom: 1.25em;
146 }
147
148 dt {
149 font-weight: 600;
150 margin-top: 1.25em;
151 }
152
153 dd {
154 margin-top: 0.5em;
155 padding-inline-start: 1.625em;
156 }
157
158 hr + *,
159 h2 + *,
160 h3 + *,
161 h4 + * {
162 margin-top: 0;
163 }
164
165 figure.light-bg {
166 background-color: var(--gray-300);
167 color: var(--gray-50);
168 border-radius: 5px;
169 padding: 5px;
170 }
171 }
172
173 article nav {
174 font-family: var(--font-mono);
175 font-size: var(--text-sm);
176 line-height: var(--lineheight-lg);
177 float: right;
178 margin: 0 0 calc(4 * var(--spacing)) calc(5 * var(--spacing));
179 min-width: calc(var(--container) / 8);
180 max-width: calc(var(--container) / 4);
181
182 ol {
183 list-style-type: none;
184 padding-inline-start: 0;
185 }
186
187 ol > li > ol {
188 padding-inline-start: 0.625em;
189 }
190
191 li {
192 margin: 0;
193 font-size: var(--text-xs);
194 }
195 }
196
197 @media (max-width: 640px) {
198 article nav {
199 float: none;
200 max-width: inherit;
201 margin: calc(4 * var(--spacing)) 0;
202 }
203 }