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