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
100pre {
101 font-family: ui-monospace, monospace;
102 padding: 20px 10px;
103 font-size: .95rem;
104 overflow: auto;
105 border-top: 1px solid rgba(255, 255, 255, .1);
106 border-bottom: 1px solid rgba(255, 255, 255, .1);
107 position: relative;
108
109 + pre {
110 border-top: 0;
111 margin-top: -40px;
112 }
113
114 @media (max-width: $phone-max-width) {
115 white-space: pre-wrap;
116 word-wrap: break-word;
117 }
118
119 &[data-lang]::before {
120 content: attr(data-lang);
121 display: block;
122 position: absolute;
123 top: 0;
124 right: 0;
125 padding: .2em .5em;
126 font-weight: bold;
127 font-size: .95rem;
128 border-radius: 0 0 0 6px;
129 background-color: var(--accent-alpha-20);
130 }
131
132 code {
133 background: none !important;
134 margin: 0;
135 padding: 0;
136 font-size: inherit;
137 border: none;
138 }
139}
140
141blockquote {
142 border-top: 1px solid var(--accent);
143 border-bottom: 1px solid var(--accent);
144 margin: 40px 0;
145 padding: 25px;
146
147 @media (max-width: $phone-max-width) {
148 padding-right: 0;
149 }
150
151 &:before {
152 content: '”';
153 font-family: Georgia, serif;
154 font-size: 3.875rem;
155 position: absolute;
156 left: -40px;
157 top: -20px;
158 }
159
160 p:first-of-type {
161 margin-top: 0;
162 }
163
164 p:last-of-type {
165 margin-bottom: 0;
166 }
167
168 p {
169 position: relative;
170 }
171
172 p:before {
173 content: '>';
174 display: block;
175 position: absolute;
176 left: -25px;
177 color: var(--accent);
178 }
179}
180
181table {
182 table-layout: fixed;
183 border-collapse: collapse;
184 width: 100%;
185 margin: 40px 0;
186}
187
188table, th, td {
189 border: 1px dashed var(--accent);
190 padding: 10px;
191}
192
193th {
194 color: var(--accent);
195}
196
197ul, ol {
198 margin-left: 30px;
199 padding: 0;
200
201 li {
202 padding-left: 1em;
203 margin-top: 5px;
204 margin-bottom: 5px;
205 }
206
207 @media (max-width: $phone-max-width) {
208 margin-left: 20px;
209 }
210
211 ul, ol {
212 margin-top: 10px;
213 margin-bottom: 10px;
214 }
215}
216
217.container {
218 display: flex;
219 flex-direction: column;
220 padding: 40px;
221 max-width: 864px;
222 min-height: 100vh;
223 border-right: 1px solid rgba(255, 255, 255, 0.1);
224
225 &.full,
226 &.center {
227 border: none;
228 margin: 0 auto;
229 }
230
231 &.full {
232 max-width: 100%;
233 }
234
235 @media (max-width: $phone-max-width) {
236 padding: 20px;
237 }
238}
239
240.content {
241 display: flex;
242 flex-direction: column;
243}
244
245hr {
246 width: 100%;
247 border: none;
248 background: var(--border-color);
249 height: 1px;
250}