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