this repo has no description
hauleth.dev
1@import "variables";
2
3html {
4 box-sizing: border-box;
5}
6
7*,
8*:before,
9*:after {
10 box-sizing: inherit;
11}
12
13body {
14 margin: 0;
15 padding: 0;
16 font-family: ui-monospace, monospace;
17 font-size: 12pt;
18 line-height: 1.54;
19 background-color: var(--background);
20 color: var(--color);
21 text-rendering: optimizeLegibility;
22 -webkit-font-smoothing: antialiased;
23 -webkit-overflow-scrolling: touch;
24 -webkit-text-size-adjust: 100%;
25
26 @media print {
27 color: #000;
28 line-height: 1.2;
29 font-size: 10pt;
30 }
31}
32
33h1, h2, h3, h4, h5, h6 {
34 line-height: 1.3;
35
36 &:not(:first-child) {
37 margin-top: 40px;
38 }
39
40 .zola-anchor {
41 font-size: 1.5rem;
42 visibility: hidden;
43 margin-left: 0.5rem;
44 vertical-align: 1%;
45 text-decoration: none;
46 border-bottom-color: transparent;
47 cursor: pointer;
48
49 @media (hover: none){
50 visibility: visible;
51 }
52 }
53
54 &:hover {
55 .zola-anchor {
56 visibility: visible;
57 }
58 }
59}
60
61h1 {
62 font-size: 1.4rem;
63}
64
65h2 {
66 font-size: 1.3rem;
67}
68
69h3 {
70 font-size: 1.2rem;
71}
72
73h4, h5, h6 {
74 font-size: 1.15rem;
75}
76
77
78a {
79 color: inherit;
80}
81
82img {
83 display: block;
84 max-width: 100%;
85}
86
87p {
88 margin-bottom: 20px;
89}
90
91code {
92 font-family: ui-monospace, monospace;
93 background: var(--accent-alpha-20);
94 color: var(--accent);
95 padding: 1px 6px;
96 margin: 0 2px;
97 font-size: .95rem;
98}
99
100// code[data-lang]::before {
101// content: attr(data-lang);
102// text-align: right;
103// position: absolute;
104// top: 0;
105// }
106
107pre {
108 font-family: ui-monospace, monospace;
109 padding: 20px 10px;
110 font-size: .95rem;
111 overflow: auto;
112 border-top: 1px solid rgba(255, 255, 255, .1);
113 border-bottom: 1px solid rgba(255, 255, 255, .1);
114 position: relative;
115
116 + pre {
117 border-top: 0;
118 margin-top: -40px;
119 }
120
121 @media (max-width: $phone-max-width) {
122 white-space: pre-wrap;
123 word-wrap: break-word;
124 }
125
126 &[data-lang]::before {
127 content: attr(data-lang);
128 display: block;
129 position: absolute;
130 top: 0;
131 right: 0;
132 padding: .2em .5em;
133 font-weight: bold;
134 font-size: .9rem;
135 border-radius: 0 0 0 6px;
136 background-color: var(--accent-alpha-20);
137 }
138
139 code {
140 background: none !important;
141 margin: 0;
142 padding: 0;
143 font-size: inherit;
144 border: none;
145 }
146}
147
148blockquote {
149 border-top: 1px solid var(--accent);
150 border-bottom: 1px solid var(--accent);
151 margin: 40px 0;
152 padding: 25px;
153
154 @media (max-width: $phone-max-width) {
155 padding-right: 0;
156 }
157
158 &:before {
159 content: '”';
160 font-family: Georgia, serif;
161 font-size: 3.875rem;
162 position: absolute;
163 left: -40px;
164 top: -20px;
165 }
166
167 p:first-of-type {
168 margin-top: 0;
169 }
170
171 p:last-of-type {
172 margin-bottom: 0;
173 }
174
175 p {
176 position: relative;
177 }
178
179 p:before {
180 content: '>';
181 display: block;
182 position: absolute;
183 left: -25px;
184 color: var(--accent);
185 }
186}
187
188table {
189 table-layout: fixed;
190 border-collapse: collapse;
191 width: 100%;
192 margin: 40px 0;
193}
194
195table, th, td {
196 border: 1px dashed var(--accent);
197 padding: 10px;
198}
199
200th {
201 color: var(--accent);
202}
203
204ul, ol {
205 margin-left: 30px;
206 padding: 0;
207
208 li {
209 padding-left: 1em;
210 margin-top: 5px;
211 margin-bottom: 5px;
212 }
213
214 @media (max-width: $phone-max-width) {
215 margin-left: 20px;
216 }
217
218 ul, ol {
219 margin-top: 10px;
220 margin-bottom: 10px;
221 }
222}
223
224.container {
225 display: flex;
226 flex-direction: column;
227 padding: 40px;
228 max-width: 864px;
229 min-height: 100vh;
230 border-right: 1px solid rgba(255, 255, 255, 0.1);
231
232 &.full,
233 &.center {
234 border: none;
235 margin: 0 auto;
236 }
237
238 &.full {
239 max-width: 100%;
240 }
241
242 @media (max-width: $phone-max-width) {
243 padding: 20px;
244 }
245}
246
247.content {
248 display: flex;
249 flex-direction: column;
250}
251
252hr {
253 width: 100%;
254 border: none;
255 background: var(--border-color);
256 height: 1px;
257}