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 &:hover {
83 color: var(--accent);
84 };
85}
86
87img {
88 display: block;
89 max-width: 100%;
90}
91
92p {
93 margin-bottom: 20px;
94}
95
96code {
97 font-family: ui-monospace, monospace;
98 background: var(--accent-alpha-20);
99 color: var(--accent);
100 padding: 1px 6px;
101 margin: 0 2px;
102 font-size: .95rem;
103}
104
105pre {
106 font-family: ui-monospace, monospace;
107 padding: 20px 10px;
108 font-size: .95rem;
109 overflow: auto;
110 border-top: 1px solid rgba(255, 255, 255, .1);
111 border-bottom: 1px solid rgba(255, 255, 255, .1);
112 position: relative;
113
114 + pre {
115 border-top: 0;
116 margin-top: -40px;
117 }
118
119 @media (max-width: $phone-max-width) {
120 white-space: pre-wrap;
121 word-wrap: break-word;
122 }
123
124 &[data-lang]::before {
125 content: attr(data-lang);
126 display: block;
127 position: absolute;
128 top: 0;
129 right: 0;
130 padding: .2em .5em;
131 font-weight: bold;
132 font-size: .95rem;
133 border-radius: 0 0 0 6px;
134 background-color: var(--accent-alpha-20);
135 }
136
137 code {
138 background: none !important;
139 margin: 0;
140 padding: 0;
141 font-size: inherit;
142 border: none;
143 }
144}
145
146blockquote {
147 border-top: 1px solid var(--accent);
148 border-bottom: 1px solid var(--accent);
149 margin: 40px 0;
150 padding: 25px;
151
152 @media (max-width: $phone-max-width) {
153 padding-right: 0;
154 }
155
156 > :first-child {
157 margin-top: 0;
158 position: relative;
159
160 &:before {
161 content: '>';
162 display: block;
163 position: absolute;
164 left: -25px;
165 color: var(--accent);
166 }
167 }
168
169 > :last-child {
170 margin-bottom: 0;
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}
244
245ol {
246 counter-reset: li;
247 list-style: none;
248
249 li {
250 counter-increment: li;
251
252 // Todo change it to ::marker when Safari will support it
253 &::before {
254 content: counters(li, ".") ". ";
255 }
256 }
257}