this repo has no description
hauleth.dev
1@import "variables";
2
3:root {
4 font-size: calc(1rem + 0.05vw);
5 line-height: 1.54;
6 color: var(--color);
7
8 @media print {
9 color: #000;
10 line-height: 1.2;
11 font-size: 10pt;
12 }
13}
14
15html {
16 box-sizing: border-box;
17}
18
19*,
20*:before,
21*:after {
22 box-sizing: inherit;
23}
24
25body {
26 margin: 0;
27 padding: 0;
28 font-family: ui-monospace, monospace;
29 background-color: var(--background);
30 // text-shadow: 0 0 3px currentcolor;
31 text-rendering: optimizeLegibility;
32 -webkit-font-smoothing: antialiased;
33 -webkit-overflow-scrolling: touch;
34 -webkit-text-size-adjust: 100%;
35}
36
37h1, h2, h3, h4, h5, h6 {
38 line-height: 1.3;
39
40 &:not(:first-child) {
41 margin-top: 40px;
42 }
43
44 .zola-anchor {
45 font-size: .75em;
46 visibility: hidden;
47 margin-left: 0.5rem;
48 vertical-align: 1%;
49 text-decoration: none;
50 border-bottom-color: transparent;
51 cursor: pointer;
52 color: var(--accent);
53
54 @media (hover: none){
55 visibility: visible;
56 }
57 }
58
59 &:hover {
60 .zola-anchor {
61 visibility: visible;
62 }
63 }
64}
65
66h1 {
67 font-size: 1.4rem;
68}
69
70h2 {
71 font-size: 1.3rem;
72}
73
74h3 {
75 font-size: 1.2rem;
76}
77
78h4, h5, h6 {
79 font-size: 1.15rem;
80}
81
82
83a {
84 color: inherit;
85
86 &:hover {
87 color: var(--accent);
88 text-shadow: 0 0 .25em currentcolor;
89 };
90}
91
92img {
93 display: block;
94 max-width: 100%;
95}
96
97p {
98 margin-bottom: 20px;
99}
100
101code {
102 font-family: ui-monospace, monospace;
103 background: var(--accent-alpha-20);
104 color: var(--accent);
105 padding: 1px 6px;
106 margin: 0 2px;
107 font-size: .95rem;
108 hyphens: none;
109}
110
111pre {
112 font-family: ui-monospace, monospace;
113 padding: 20px 10px;
114 font-size: .95rem;
115 overflow: auto;
116 border-top: 1px solid rgba(255, 255, 255, .1);
117 border-bottom: 1px solid rgba(255, 255, 255, .1);
118 position: relative;
119
120 + pre {
121 border-top: 0;
122 margin-top: -40px;
123 }
124
125 @media (max-width: $phone-max-width) {
126 white-space: pre-wrap;
127 word-wrap: break-word;
128 }
129
130 &[data-lang]::before {
131 content: attr(data-lang);
132 display: block;
133 position: absolute;
134 top: 0;
135 right: 0;
136 padding: .2em .5em;
137 font-weight: bold;
138 font-size: .95rem;
139 border-radius: 0 0 0 6px;
140 background-color: var(--accent-alpha-20);
141 }
142
143 code {
144 background: none !important;
145 margin: 0;
146 padding: 0;
147 font-size: inherit;
148 border: none;
149 }
150}
151
152blockquote {
153 border-top: 1px solid var(--accent);
154 border-bottom: 1px solid var(--accent);
155 margin: 40px 0;
156 padding: 25px;
157
158 @media (max-width: $phone-max-width) {
159 padding-right: 0;
160 }
161
162 > :first-child {
163 margin-top: 0;
164 position: relative;
165
166 &:before {
167 content: '>';
168 display: block;
169 position: absolute;
170 left: -25px;
171 top: .1em;
172 color: var(--accent);
173 }
174 }
175
176 > :last-child {
177 margin-bottom: 0;
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}
251
252ol {
253 counter-reset: li;
254 list-style: none;
255
256 li {
257 counter-increment: li;
258
259 // Todo change it to ::marker when Safari will support it
260 &::before {
261 margin-left: -2rem;
262 content: counters(li, ".") ". ";
263 }
264 }
265}