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: .75em;
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 color: var(--accent);
49
50 @media (hover: none){
51 visibility: visible;
52 }
53 }
54
55 &:hover {
56 .zola-anchor {
57 visibility: visible;
58 }
59 }
60}
61
62h1 {
63 font-size: 1.4rem;
64}
65
66h2 {
67 font-size: 1.3rem;
68}
69
70h3 {
71 font-size: 1.2rem;
72}
73
74h4, h5, h6 {
75 font-size: 1.15rem;
76}
77
78
79a {
80 color: inherit;
81}
82
83img {
84 display: block;
85 max-width: 100%;
86}
87
88p {
89 margin-bottom: 20px;
90}
91
92code {
93 font-family: ui-monospace, monospace;
94 background: var(--accent-alpha-20);
95 color: var(--accent);
96 padding: 1px 6px;
97 margin: 0 2px;
98 font-size: .95rem;
99}
100
101pre {
102 font-family: ui-monospace, monospace;
103 padding: 20px 10px;
104 font-size: .95rem;
105 overflow: auto;
106 border-top: 1px solid rgba(255, 255, 255, .1);
107 border-bottom: 1px solid rgba(255, 255, 255, .1);
108 position: relative;
109
110 + pre {
111 border-top: 0;
112 margin-top: -40px;
113 }
114
115 @media (max-width: $phone-max-width) {
116 white-space: pre-wrap;
117 word-wrap: break-word;
118 }
119
120 &[data-lang]::before {
121 content: attr(data-lang);
122 display: block;
123 position: absolute;
124 top: 0;
125 right: 0;
126 padding: .2em .5em;
127 font-weight: bold;
128 font-size: .95rem;
129 border-radius: 0 0 0 6px;
130 background-color: var(--accent-alpha-20);
131 }
132
133 code {
134 background: none !important;
135 margin: 0;
136 padding: 0;
137 font-size: inherit;
138 border: none;
139 }
140}
141
142blockquote {
143 border-top: 1px solid var(--accent);
144 border-bottom: 1px solid var(--accent);
145 margin: 40px 0;
146 padding: 25px;
147
148 @media (max-width: $phone-max-width) {
149 padding-right: 0;
150 }
151
152 &:before {
153 content: '”';
154 font-family: Georgia, serif;
155 font-size: 3.875rem;
156 position: absolute;
157 left: -40px;
158 top: -20px;
159 }
160
161 p:first-of-type {
162 margin-top: 0;
163 }
164
165 p:last-of-type {
166 margin-bottom: 0;
167 }
168
169 p {
170 position: relative;
171 }
172
173 p:before {
174 content: '>';
175 display: block;
176 position: absolute;
177 left: -25px;
178 color: var(--accent);
179 }
180}
181
182table {
183 table-layout: fixed;
184 border-collapse: collapse;
185 width: 100%;
186 margin: 40px 0;
187}
188
189table, th, td {
190 border: 1px dashed var(--accent);
191 padding: 10px;
192}
193
194th {
195 color: var(--accent);
196}
197
198ul, ol {
199 margin-left: 30px;
200 padding: 0;
201
202 li {
203 padding-left: 1em;
204 margin-top: 5px;
205 margin-bottom: 5px;
206 }
207
208 @media (max-width: $phone-max-width) {
209 margin-left: 20px;
210 }
211
212 ul, ol {
213 margin-top: 10px;
214 margin-bottom: 10px;
215 }
216}
217
218.container {
219 display: flex;
220 flex-direction: column;
221 padding: 40px;
222 max-width: 864px;
223 min-height: 100vh;
224 border-right: 1px solid rgba(255, 255, 255, 0.1);
225
226 &.full,
227 &.center {
228 border: none;
229 margin: 0 auto;
230 }
231
232 &.full {
233 max-width: 100%;
234 }
235
236 @media (max-width: $phone-max-width) {
237 padding: 20px;
238 }
239}
240
241.content {
242 display: flex;
243 flex-direction: column;
244}
245
246hr {
247 width: 100%;
248 border: none;
249 background: var(--border-color);
250 height: 1px;
251}
252
253ol {
254 counter-reset: li;
255 list-style: none;
256
257 li {
258 counter-increment: li;
259
260 // Todo change it to ::marker when Safari will support it
261 &::before {
262 content: counters(li, ".") ". ";
263 }
264 }
265}
266
267.halmos {
268 text-align: right;
269 font-size: 1.5em;
270}