arthr.me
A charming Jekyll theme.
jekyll-theme
arthr.tngl.sh
1/* Quotes */
2q {
3 quotes: "“" "”" "‘" "’";
4}
5
6blockquote {
7 padding-inline-start: 1lh;
8 border-left: 1px solid var(--color-border);
9 margin-right: 0;
10
11 blockquote {
12 margin-left: 1lh;
13 }
14}
15
16blockquote > *:not(:last-child) {
17 margin-bottom: var(--spacing);
18}
19
20cite {
21 font-style: italic;
22}
23
24/* Lists */
25
26li {
27 margin-block: calc(var(--spacing) / 2)
28}
29
30ol ol {
31 list-style: lower-alpha;
32}
33
34.task-list {
35 list-style: none;
36 padding-inline-start: 0;
37}
38
39.task-list .task-list-item-checkbox {
40 margin-right: 0.5lh;
41}
42
43dl {
44 margin
45}
46
47dt {
48 font-weight: 700;
49}
50
51dd + dt {
52 margin-top: calc(var(--spacing) / 2);
53}
54
55/* Links */
56
57a {
58 color: var(--color-link);
59 text-decoration-color: transparent;
60 transition-property: color, text-decoration-color, text-decoration-style;
61 transition-duration: var(--transition-duration);
62 transition-timing-function: ease;
63}
64
65a:hover,
66a:focus {
67 color: var(--color-link-hover);
68 text-decoration: underline;
69 text-underline-offset: 0.2rem;
70 text-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
71}
72
73a:active {
74 text-decoration-thickness: 1px;
75 text-decoration-style: wavy;
76}
77
78
79/* Headings */
80
81h1, h2, h3, h4, h5, h6 {
82 font-family: var(--font-headings);
83 font-weight: 400;
84}
85
86h1 {
87 font-size: 2em;
88}
89
90h2 {
91 font-size: 1.75em;
92}
93
94h3 {
95 font-size: 1.5em;
96}
97
98h4 {
99 font-size: 1.25em;
100}
101
102h5 {
103 font-size: 1em;
104}
105
106h6 {
107 font-size: .75em;
108}
109
110/* Inputs */
111
112input[type="checkbox"],
113inpit[type="radio"] {
114 accent-color: var(--color-support);
115}
116
117/* Buttons */
118button,
119input[type="button"],
120input[type="reset"],
121input[type="submit"],
122.as-button {
123 display: inline-block;
124 padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
125 background-color: var(--color-support);
126 border: 2px solid var(--color-border);
127 box-shadow: var(--shadow);
128 color: var(--color-background) !important;
129 font-weight: 700;
130 text-decoration: none !important;
131 transition-property: background-color, box-shadow;
132 transition-duration: var(--transition-duration);
133 transition-timing-function: ease;
134
135 &:hover {
136 box-shadow: var(--shadow-hover);
137 }
138
139 &:active {
140 box-shadow: var(--shadow-active);
141 }
142
143 ~ & {
144 border-collapse: collapse;
145 border-left: 0;
146 }
147
148 &:first-of-type {
149 border-top-left-radius: var(--spacing);
150 border-bottom-left-radius: var(--spacing);
151 }
152
153 &:last-of-type {
154 border-top-right-radius: var(--spacing);
155 border-bottom-right-radius: var(--spacing);
156 }
157}
158
159/* Misc elements */
160
161abbr {
162 cursor: help;
163 text-decoration: underline;
164 text-decoration-style: dotted;
165 text-underline-offset: 0.2rem;
166}
167
168mark {
169 background-color: var(--color-support);
170 color: var(--color-background);
171}
172
173del, ins {
174 text-decoration-style: wavy;
175 text-decoration-color: var(--color-support);
176}
177
178/* Details */
179
180details {
181 outline: 1px solid var(--color-border);
182 outline-offset: -1px;
183 border-radius: .3rem;
184 padding: calc(var(--spacing) / 2);
185 box-shadow: var(--shadow);
186 transform: scale(1);
187 transform-origin: center center;
188 transition: transform var(--transition-duration) ease;
189
190 &:hover,
191 &:focus {
192 transform: scale(1.025)
193 }
194
195 &:active {
196 transform: scale(0.98);
197 }
198
199 summary + * {
200 border-top: 1px solid var(--color-border);
201 margin-top: calc(var(--spacing) / 2);
202 padding-top: calc(var(--spacing) / 2);
203 }
204}
205
206summary {
207 cursor: pointer;
208 font-weight: 700;
209}
210
211/* Media */
212
213img, video, audio, iframe {
214 border-radius: .3rem;
215 box-shadow: var(--shadow);
216 outline: 1px solid var(--color-border);
217 outline-offset: -1px;
218}
219
220video, audio, iframe {
221 display: block;
222}
223
224iframe[src*="youtube"],
225iframe[src*="vimeo"],
226iframe[src*="twitch"] {
227 height: auto;
228 aspect-ratio: 16 / 9;
229}
230
231img + em,
232figcaption {
233 display: block;
234 padding-inline-start: 0.5lh;
235 color: var(--color-shadows-hover);
236 font-size: 1.2rem;
237}
238
239/* Tables */
240
241table {
242 outline: 1px solid var(--color-border);
243 outline-offset: -1px;
244 border-radius: .3rem;
245 border-collapse: collapse;
246 border-spacing: 0;
247 box-shadow: var(--shadow);
248
249 td, th {
250 padding-block: calc(var(--spacing) / 2);
251 padding-inline: calc(var(--spacing) / 2);
252 border-bottom: 1px solid var(--color-border);
253 }
254
255 th {
256 background-color: var(--color-border);
257 }
258}
259
260/* Horizontal rule */
261hr {
262 border: none;
263 height: var(--spacing);
264 width: 100%;
265}
266
267/* Footnotes */
268
269.footnotes {
270 padding-top: var(--spacing);
271 margin-top: calc(var(--spacing) * 2);
272 border-top: 1px solid var(--color-border);
273 font-size: 1.2rem;
274}
275
276/* Pre-formatted text and code */
277
278:not(pre) > code {
279 background-color: var(--color-shadows);
280 padding: .3rem;
281 border-radius: .3rem;
282 outline: 1px solid var(--color-border);
283 outline-offset: -1px;
284 font-size: 1.2rem;
285}
286
287pre {
288 font-size: 1.2rem;
289 padding: calc(var(--spacing) / 2);
290 border-radius: .3rem;
291 box-shadow: var(--shadow);
292}