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