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