this repo has no description
hauleth.dev
1@import "variables";
2
3:root {
4 font-size: calc(1rem + 0.1vw);
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}
109
110pre {
111 font-family: ui-monospace, monospace;
112 padding: 20px 10px;
113 font-size: .95rem;
114 overflow: auto;
115 border-top: 1px solid rgba(255, 255, 255, .1);
116 border-bottom: 1px solid rgba(255, 255, 255, .1);
117 position: relative;
118
119 + pre {
120 border-top: 0;
121 margin-top: -40px;
122 }
123
124 @media (max-width: $phone-max-width) {
125 white-space: pre-wrap;
126 word-wrap: break-word;
127 }
128
129 &[data-lang]::before {
130 content: attr(data-lang);
131 display: block;
132 position: absolute;
133 top: 0;
134 right: 0;
135 padding: .2em .5em;
136 font-weight: bold;
137 font-size: .95rem;
138 border-radius: 0 0 0 6px;
139 background-color: var(--accent-alpha-20);
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 (max-width: $phone-max-width) {
158 padding-right: 0;
159 }
160
161 > :first-child {
162 margin-top: 0;
163 position: relative;
164
165 &:before {
166 content: '>';
167 display: block;
168 position: absolute;
169 left: -25px;
170 color: var(--accent);
171 }
172 }
173
174 > :last-child {
175 margin-bottom: 0;
176 }
177}
178
179table {
180 table-layout: fixed;
181 border-collapse: collapse;
182 width: 100%;
183 margin: 40px 0;
184}
185
186table, th, td {
187 border: 1px dashed var(--accent);
188 padding: 10px;
189}
190
191th {
192 color: var(--accent);
193}
194
195ul, ol {
196 margin-left: 30px;
197 padding: 0;
198
199 li {
200 padding-left: 1em;
201 margin-top: 5px;
202 margin-bottom: 5px;
203 }
204
205 @media (max-width: $phone-max-width) {
206 margin-left: 20px;
207 }
208
209 ul, ol {
210 margin-top: 10px;
211 margin-bottom: 10px;
212 }
213}
214
215.container {
216 display: flex;
217 flex-direction: column;
218 padding: 40px;
219 max-width: 864px;
220 min-height: 100vh;
221 border-right: 1px solid rgba(255, 255, 255, 0.1);
222
223 &.full,
224 &.center {
225 border: none;
226 margin: 0 auto;
227 }
228
229 &.full {
230 max-width: 100%;
231 }
232
233 @media (max-width: $phone-max-width) {
234 padding: 20px;
235 }
236}
237
238.content {
239 display: flex;
240 flex-direction: column;
241}
242
243hr {
244 width: 100%;
245 border: none;
246 background: var(--border-color);
247 height: 1px;
248}
249
250ol {
251 counter-reset: li;
252 list-style: none;
253
254 li {
255 counter-increment: li;
256
257 // Todo change it to ::marker when Safari will support it
258 &::before {
259 content: counters(li, ".") ". ";
260 }
261 }
262}