yoyle.city
1:root {
2 /* Overall */
3 --margins: 10px;
4 --bg: white;
5 --primary: black;
6 --border: 1px;
7 --radius: 0px;
8 --font: "sans"; /* pick from sans, serif, or mono */
9
10 /* Sections */
11 --bg-trans: rgba(0,0,0,0.0);
12 --shadow-x: 0px;
13 --shadow-y: 0px;
14 --shadow-blur: 0px;
15 --shadow-color: rgba(0,0,0,0.2);
16
17 /* Section headers */
18 --header-bg: black;
19 --header-text: white;
20
21 /* Info */
22 --button-bg: black;
23 --button-text: white;
24 --button-hover-bg: white;
25 --button-hover-text: black;
26}
27
28@font-face {
29 font-family: "sans";
30 src: url("fonts/sans.ttf");
31}
32
33@font-face {
34 font-family: "serif";
35 src: url("fonts/serif.ttf");
36}
37
38@font-face {
39 font-family: "mono";
40 src: url("fonts/mono.ttf");
41}
42
43@font-face {
44 font-family: "mono";
45 font-weight: bold;
46 src: url("fonts/mono_b.ttf");
47}
48
49@media (orientation: portrait) {
50 div.main {
51 width: 100%;
52 justify-content: space-between;
53 box-sizing: border-box;
54 }
55
56 body {
57 background-color: var(--bg);
58 color: var(--primary);
59 box-sizing: border-box;
60 margin: 0;
61 padding: var(--margins);
62 height: 100%;
63 font-family: var(--font);
64 background-position: center;
65 background-repeat: no-repeat;
66 background-attachment: fixed;
67 border-radius: var(--radius);
68 }
69 section {
70 background-color: var(--bg-trans);
71 overflow: hidden;
72 margin-bottom: calc(var(--margins) * 2);
73 border: var(--border) solid var(--primary);
74 border-radius: var(--radius);
75 box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
76 }
77 .sans {
78 display: flex;
79 flex-direction: column;
80 }
81
82 button {
83 font-size: 16px;
84 }
85 .preview {
86 height: 25rem;
87 }
88}
89
90@media (orientation: landscape) {
91 div.main {
92 display: grid;
93 grid-template-columns: repeat(2, 5fr) 3.7fr;
94 grid-template-rows: 1fr;
95 grid-column-gap: var(--margins);
96 grid-row-gap: var(--margins);
97 width: 100%;
98 justify-content: space-between;
99 box-sizing: border-box;
100 }
101
102 body {
103 background-color: var(--bg);
104 color: var(--primary);
105 box-sizing: border-box;
106 margin: 0;
107 padding: var(--margins);
108 font-family: "mono";
109 background-image: url("images/logo.svg");
110 background-position: center;
111 background-repeat: no-repeat;
112 }
113
114 section {
115 background-color: var(--bg-trans);
116 display: flex;
117 flex-direction: column;
118 overflow: hidden;
119 border: var(--border) solid var(--primary);
120 border-radius: var(--radius);
121 height: calc(100vh - (var(--margins) * 3));
122 box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
123 }
124
125 section .data {
126 overflow: scroll;
127 }
128
129}
130
131.angles {
132 grid-area: 1 / 1 / 2 / 2;
133}
134
135.outfits {
136 grid-area: 1 / 2 / 2 / 3;
137}
138
139.sans {
140 grid-area: 1 / 3 / 2 / 4;
141}
142
143h1 {
144 background-color: var(--header-bg);
145 color: var(--header-text);
146 margin: 0;
147 padding: 10px;
148 font-size: 16px;
149 border-bottom: var(--border) solid;
150 font-family: var(--font);
151 text-align: center;
152}
153
154h2 {
155 text-align: center;
156 margin: 10px 0px;
157
158}
159
160h3 {
161 margin: 0;
162 text-align: center;
163 font-family: var(--font);
164 padding: 5px;
165 font-size: 20px;
166 letter-spacing: 2px;;
167 border-bottom: 1px solid;
168 text-transform: uppercase;
169}
170
171h5 {
172 font-family: var(--font);
173 margin: 0;
174}
175
176.tableSeparator {
177 margin: 0;
178 text-align: center;
179 font-family: "mono";
180 padding: 5px;
181 font-size: 12px;
182 border-bottom: 1px solid;
183 text-transform: uppercase;
184 letter-spacing: 3px;
185}
186
187#title {
188 display: flex;
189 justify-content: center;
190
191}
192
193ul {
194 margin: 0;
195 padding-left: 15px;
196}
197
198#title h2 {
199 width: 100%;
200 font-family: var(--font);
201}
202
203#title img {
204 padding: 10px;;
205}
206.selector {
207 display: flex;
208 width: 100%;
209 font-size: 18px;
210 padding: 20px;
211 color: inherit;
212 text-decoration: none;
213 justify-content: space-between;
214 box-sizing: border-box;
215}
216
217.preview {
218 flex: 1;
219 overflow: auto;
220 background-size: contain;
221 background-repeat: no-repeat;
222 background-position: center;
223}
224
225img.bg::before {
226 content: "";
227 position: absolute;
228 top: 0;
229 left: 0;
230 z-index: 10;
231 width: 100%;
232 height: 100%;
233 background-color: var(--primary);
234}
235
236.selector b {
237 font-family: var(--font);
238}
239
240.selector button {
241 display: block;
242}
243
244.selector button:hover {
245 transform: scale(1.1);
246}
247
248.selector button:active {
249 transform: scale(0.9);
250}
251
252table {
253 font-size: 14px;
254 width: 100%;
255}
256
257td {
258 border-bottom: 1px dotted;
259 font-family: var(--font);
260}
261
262th {
263 font-family: var(--font);
264 border-right: 1px solid;
265 border-bottom: 1px dotted;
266 text-align: right;
267 padding-right: 3px;
268}
269
270.rowfit {
271 width: 1%;
272 white-space: nowrap;
273}
274
275.hasTooltip {
276 border-bottom: 1px dashed white;
277}
278
279section.sans {
280 display: flex;
281 justify-content: initial !important;
282}
283
284.hex {
285 font-family: "mono";
286 letter-spacing: 1px;
287}
288
289.mono {
290 font-family: "mono";
291 font-size: 10px;
292}
293
294
295table tr td {
296 border-right: 1px dotted;
297
298}
299
300td button {
301 background-color: var(--button-bg);
302 color: var(--button-text);
303 border: 0;
304 font-family: "mono";
305 border-radius: var(--radius);
306}
307
308button:hover {
309 background-color: var(--button-hover-bg);
310 color: var(--button-hover-text);
311}
312
313button:active {
314 background-color: black;
315 color: white;
316}
317
318.selector button {
319 background-color: var(--primary);
320 color: var(--bg);
321 border: 0;
322 border-radius: var(--radius);
323}
324
325h6 {
326 margin: 2px;
327}
328h6 a {
329 padding-left: 5px;
330 font-family: var(--font);
331 font-weight: normal;
332 font-style: italic;
333 color: var(--primary);
334}
335
336h6 a:hover {
337 color: blue;
338}
339
340.toggle {
341 display: inline;
342 position: absolute;
343 top: 60px;
344 left: 20px;
345}
346
347.toggle form {
348 font-family: var(--font);
349 font-size: 10px;
350}
351
352.toggle form input {
353 width: 10px;
354 height: 10px;
355}