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
27h1, h2, h3, h4, h5, h6 {
28 line-height: 1.3;
29
30 &:not(first-child) {
31 margin-top: 40px;
32 }
33
34 .zola-anchor {
35 font-size: 1.5rem;
36 visibility: hidden;
37 margin-left: 0.5rem;
38 vertical-align: 1%;
39 text-decoration: none;
40 border-bottom-color: transparent;
41 cursor: pointer;
42
43 @media (hover: none){
44 visibility: visible;
45 }
46 }
47
48 &:hover {
49 .zola-anchor {
50 visibility: visible;
51 }
52 }
53}
54
55h1 {
56 font-size: 1.4rem;
57}
58
59h2 {
60 font-size: 1.3rem;
61}
62
63h3 {
64 font-size: 1.2rem;
65}
66
67h4, h5, h6 {
68 font-size: 1.15rem;
69}
70
71
72a {
73 color: inherit;
74}
75
76img {
77 display: block;
78 max-width: 100%;
79}
80
81p {
82 margin-bottom: 20px;
83}
84
85code {
86 font-family: ui-monospace, monospace;
87 background: var(--accent-alpha-20);
88 color: var(--accent);
89 padding: 1px 6px;
90 margin: 0 2px;
91 font-size: .95rem;
92}
93
94pre {
95 font-family: ui-monospace, monospace;
96 padding: 20px 10px;
97 font-size: .95rem;
98 overflow: auto;
99 border-top: 1px solid rgba(255, 255, 255, .1);
100 border-bottom: 1px solid rgba(255, 255, 255, .1);
101
102 + pre {
103 border-top: 0;
104 margin-top: -40px;
105 }
106
107 @media (max-width: $phone-max-width) {
108 white-space: pre-wrap;
109 word-wrap: break-word;
110 }
111
112 code {
113 background: none !important;
114 margin: 0;
115 padding: 0;
116 font-size: inherit;
117 border: none;
118 }
119}
120
121blockquote {
122 border-top: 1px solid var(--accent);
123 border-bottom: 1px solid var(--accent);
124 margin: 40px 0;
125 padding: 25px;
126
127 @media (max-width: $phone-max-width) {
128 padding-right: 0;
129 }
130
131 &:before {
132 content: '”';
133 font-family: Georgia, serif;
134 font-size: 3.875rem;
135 position: absolute;
136 left: -40px;
137 top: -20px;
138 }
139
140 p:first-of-type {
141 margin-top: 0;
142 }
143
144 p:last-of-type {
145 margin-bottom: 0;
146 }
147
148 p {
149 position: relative;
150 }
151
152 p:before {
153 content: '>';
154 display: block;
155 position: absolute;
156 left: -25px;
157 color: var(--accent);
158 }
159}
160
161table {
162 table-layout: fixed;
163 border-collapse: collapse;
164 width: 100%;
165 margin: 40px 0;
166}
167
168table, th, td {
169 border: 1px dashed var(--accent);
170 padding: 10px;
171}
172
173th {
174 color: var(--accent);
175}
176
177ul, ol {
178 margin-left: 30px;
179 padding: 0;
180
181 li {
182 position: relative;
183 margin-top: 5px;
184 margin-bottom: 5px;
185 }
186
187 @media (max-width: $phone-max-width) {
188 margin-left: 20px;
189 }
190
191 ul, ol {
192 margin-top: 10px;
193 margin-bottom: 10px;
194 }
195}
196
197.container {
198 display: flex;
199 flex-direction: column;
200 padding: 40px;
201 max-width: 864px;
202 min-height: 100vh;
203 border-right: 1px solid rgba(255, 255, 255, 0.1);
204
205 &.full,
206 &.center {
207 border: none;
208 margin: 0 auto;
209 }
210
211 &.full {
212 max-width: 100%;
213 }
214
215 @media (max-width: $phone-max-width) {
216 padding: 20px;
217 }
218}
219
220.content {
221 display: flex;
222}
223
224hr {
225 width: 100%;
226 border: none;
227 background: var(--border-color);
228 height: 1px;
229}