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