git ssb

1
/* Kick Ass Fonts */
2
@font-face{
3
  font-family: IntervalBook;
4
src: url('../interval/Interval.otf'); }
5
6
@font-face{
7
  font-family: IntervalBold;
8
src: url('../../interval/IntervalBold.otf'); }
9
10
@font-face{
11
  font-family: IntervalSlanted;
12
src: url('../interval/IntervalSlanted.otf'); }
13
14
@font-face{
15
  font-family: IntervalBoldSlanted;
16
src: url('../interval/IntervalBoldSlanted.otf'); }
17
18
@font-face {
19
    font-family: 'mononoki';
20
    src: url('/styles/fonts/mononoki/mononoki-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
21
         url('/styles/fonts/mononoki/mononoki-Regular.woff2') format('woff2'), /* Super Modern Browsers */
22
         url('/styles/fonts/mononoki/mononoki-Regular.woff') format('woff'), /* Pretty Modern Browsers */
23
         url('/styles/fonts/mononoki/mononoki-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
24
    font-weight: normal;
25
    font-style: normal;
26
}
27
28
@font-face {
29
    font-family: 'mononoki';
30
    src: url('/styles/fonts/mononoki/mononoki-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
31
         url('/styles/fonts/mononoki/mononoki-Bold.woff2') format('woff2'), /* Super Modern Browsers */
32
         url('/styles/fonts/mononoki/mononoki-Bold.woff') format('woff'), /* Pretty Modern Browsers */
33
         url('/styles/fonts/mononoki/mononoki-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
34
    font-weight: bold;
35
    font-style: normal;
36
}
37
38
@font-face {
39
    font-family: 'mononoki';
40
    src: url('/styles/fonts/mononoki/mononoki-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
41
         url('/styles/fonts/mononoki/mononoki-Italic.woff2') format('woff2'), /* Super Modern Browsers */
42
         url('/styles/fonts/mononoki/mononoki-Italic.woff') format('woff'), /* Pretty Modern Browsers */
43
         url('/styles/fonts/mononoki/mononoki-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
44
    font-weight: normal;
45
    font-style: italic;
46
47
}
48
49
@font-face {
50
    font-family: 'mononoki';
51
    src: url('/styles/fonts/mononoki/mononoki-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
52
         url('/styles/fonts/mononoki/mononoki-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
53
         url('/styles/fonts/mononoki/mononoki-BoldItalic.woff') format('woff'), /* Pretty Modern Browsers */
54
         url('/styles/fonts/mononoki/mononoki-BoldItalic.ttf')  format('truetype'); /* Safari, Android, iOS */
55
    font-weight: bold;
56
    font-style: italic;
57
}
58
59
/* Global Styles */
60
61
body{
62
  cursor: url(ani.png);
63
  position: relative;
64
  height: 100%;
65
  background-color: var(--bg-color);
66
  color: var(--main-text);
67
  margin: 0;
68
  font-family: mononoki;
69
  font-size: 16px;
70
  font-kerning: normal;
71
  padding: 10px; 
72
  box-sizing: border-box;
73
}
74
75
#guiding-quote{
76
  text-align: right;
77
  font-size: 11px;
78
}
79
80
.key-icon {
81
  width=39px;
82
}
83
84
.hidden{
85
  display: none;
86
}
87
88
.intro-message{
89
  width: 80%;
90
  margin-top: 4em;
91
  margin-right: auto;
92
  margin-left: auto;
93
  padding: 0 20px;
94
  font-size: 1.3em; 
95
}
96
97
98
#home h2>span {
99
  margin-top: 1em;
100
  background-color: var(--placard-bg);
101
  padding: 0.4em;
102
}
103
104
#contact-heading {
105
	background-color: none !important;
106
  font-size: 1.2em;
107
}
108
109
#contact-heading > span{
110
	background-color: var(--placard-bg);
111
}
112
113
button {
114
  width: auto;
115
  background: none;
116
  color: inherit;
117
  border: none;
118
  padding: 0;
119
  font: inherit;
120
  cursor: pointer;
121
  outline: inherit;
122
}
123
124
ul,li{
125
  margin: 0;
126
  padding: 0;
127
  list-style: none;
128
}
129
130
/*Mosaic of Pages: 
131
The homepage sitemap, if you will
132
----------------*/
133
#site-map{
134
  max-width: 80%;
135
  margin: auto;
136
}
137
138
139
.my-mosaic{
140
  display: grid;
141
  grid-template-columns: 1fr 1fr 1fr;
142
  grid-gap: 20px; 
143
}
144
.my-mosaic a{
145
  display: block;
146
  text-decoration: none;
147
  color: none;
148
}  
149
150
.tile {
151
  height: 100px; 
152
  display: flex;
153
  flex-direction: row;
154
  border: 3px solid;
155
}  
156
157
.tile h2 {
158
  height: 100%;
159
  margin: 0;
160
  padding-bottom: 0;
161
  padding-left: 0.5em;
162
  padding-right: 0.5em;
163
  display: flex;
164
  align-items: center;
165
  justify-content: center;
166
  border-right: 3px solid;
167
  font-style: italic;
168
} 
169
170
.tile p {
171
  background-color: lavender;
172
  height: 100%;
173
  padding: 0; 
174
  padding-left: 0.5em;
175
  padding-right: 0.5em;
176
  margin: 0;
177
  width: 100%;
178
  display: flex;
179
  align-items: center;
180
  font-size: 1.2em;
181
}
182
@media (max-width: 850px){
183
  .tile p{
184
    font-size: 2vw;
185
  }
186
}
187
@media (max-width: 667px) {
188
  .tile p{
189
    font-size: 4vw;
190
  }
191
}
192
193
/* All the sweet colors per tile
194
-------------------------------*/
195
196
#writing-mosaic div{
197
  border-color: var(--writing-border);
198
  color: var(--writing-text);
199
}
200
201
#writing-mosaic h2{
202
  color: var(--writing-text);
203
  background-color: var(--writing-bg);
204
  border-color: var(--writing-border);
205
}
206
207
#rituals-mosaic div{
208
  border-color: var(--rituals-border);
209
  color: var(--rituals-text);
210
}
211
212
#rituals-mosaic h2 {
213
  color: var(--rituals-text);
214
  background-color: var(--rituals-bg);
215
  border-color: var(--rituals-border);
216
}
217
218
#diary-mosaic div {
219
  color: var(--diary-mosaic-text);
220
  border-color: var(--diary-mosaic-border); 
221
}
222
223
#diary-mosaic h2 {
224
  background-color: var(--diary-mosaic-bg);
225
  border-color: var(--diary-mosaic-border); 
226
}
227
228
#boardgame-mosaic div{
229
  color: var(--boardgame-mosaic-text);
230
  border-color: var(--boardgame-mosaic-border); 
231
}
232
233
#boardgame-mosaic h2{
234
  background-color: var(--boardgame-mosaic-bg);
235
  border-color: var(--boardgame-mosaic-border); 
236
}
237
238
#library-mosaic div{
239
  color: var(--library-mosaic-text);
240
  border-color: var(--library-mosaic-border); 
241
}
242
243
#library-mosaic h2{
244
  background-color: var(--library-mosaic-bg);
245
  border-color: var(--library-mosaic-border); 
246
}
247
248
#movies-mosaic div{
249
  color: var(--movies-mosaic-text);
250
  border-color: var(--movies-mosaic-border); 
251
}
252
253
#movies-mosaic h2{
254
  background-color: var(--movies-mosaic-bg);
255
  border-color: var(--movies-mosaic-border); 
256
}
257
258
#friends-mosaic div{
259
  color: var(--friends-mosaic-text);
260
  border-color: var(--friends-mosaic-border); 
261
}
262
263
#friends-mosaic h2{
264
  background-color: var(--friends-mosaic-bg);
265
  border-color: var(--friends-mosaic-border); 
266
}
267
268
#links-mosaic div{
269
  color: var(--links-mosaic-text);
270
  border-color: var(--links-mosaic-border); 
271
}
272
273
#links-mosaic h2{
274
  background-color: var(--links-mosaic-bg);
275
  border-color: var(--links-mosaic-border); 
276
}
277
278
.breadcrumb{
279
  text-align: right; 
280
  font-size: 0.8em; 
281
  margin-top: 10px;
282
  margin-right: 10px; 
283
}
284
285
.breadcrumb a{
286
text-decoration: none; 
287
font-size: 1.1em;
288
color: blue;
289
}
290
291
.breadcrumb a.writing{
292
  font-size: inherit;
293
  color: var(--writing-link); 
294
}
295
296
297
.left {
298
  text-align: left;
299
}
300
301
.centered{
302
  text-align: center;
303
}
304
305
.comic {
306
  position: relative;
307
}
308
309
.comic-page {
310
  margin: auto;
311
  width: 100%;
312
}
313
314
.container {
315
  position: relative;
316
  max-width: 80%;
317
  margin: 0 auto;
318
  padding: 0 20px;
319
box-sizing: border-box; }
320
@media (max-width: 667px){
321
  .container{
322
  max-width: 100%; }
323
}
324
325
326
.centered-image {
327
  display: block;
328
  margin-left: auto;
329
  margin-right: auto;
330
}
331
332
.dancing-zach {
333
  max-width: 300px;
334
  float: left;
335
  clear: left;
336
  position: relative;
337
  bottom: 0;
338
  display: block;
339
  margin: 0 1em 1em 0;
340
}
341
342
#pgp>span, #ssb>span{
343
  background-color: var(--placard-bg);
344
  font-style: italic;
345
  padding: 0.2em;
346
}
347
348
.contact-list{
349
  font-size: 1em;
350
  list-style: circle; 
351
}
352
353
.contact-list li{
354
  margin-bottom: 1em;
355
}
356
357
.contact-list strong{
358
  text-decoration: underline;
359
}
360
361
.placard{
362
  background-color: lavender;
363
  color: var(--placard-text);
364
  height: 100px;
365
  max-width: 800px;
366
  display: flex;
367
  flex-direction: row;
368
  border: 3px solid var(--writing-border); 
369
}
370
371
.placard.writing{
372
  background-color var(--writing-bg);
373
  color var(--writing-text);
374
}
375
376
.placard h1{
377
  height: 100%;
378
  margin-top: 0;
379
  margin-bottom: 0;
380
  background-color: var(--placard-bg);
381
  color: var(--placard-text);
382
  display: flex;
383
  justify-content: center;
384
  align-items: center;
385
  padding: 0 0.5em 0 0.5em;
386
  border-right: 3px solid var(--writing-border);
387
  max-width: 25%;
388
  font-size: 2em; 
389
}
390
391
.placard h1.writing{
392
  border-color:var(--writing-border);
393
  background-color: var(--writing-bg);
394
  color: var(--writing-text); 
395
}
396
397
.placard p{
398
  height: 100%;
399
  width: 100%;
400
  margin: 0;
401
  padding: 0 0.5em 0 0.5em;
402
  display: flex;
403
  align-items: center;
404
  font-size: 1.2em;
405
} 
406
407
.placard p.writing{
408
  background-color: white;
409
  color: var(--writing-text); 
410
}
411
412
.log h2{
413
  display: flex;
414
  flex-direction: row;
415
  align-items: center; 
416
}
417
418
.log>h2 img{
419
  max-height: 2.4em;
420
  margin-top: 6px;
421
  margin-left: -3px;
422
}
423
424
.log>h2 span{
425
  margin-top: 0px !important;
426
}
427
428
.log{
429
  max-width: 82%;
430
  font-size: 1.2em;
431
  margin: 40px auto 40px auto; 
432
}
433
434
435
.log li{
436
 margin-bottom: 1.3em; 
437
 }
438
439
/* Library
440
--------*/
441
.starcloud-bg {
442
  background-image: url(../images/dark-sky.jpg);
443
  background-repeat: repeat-x repeat-y;
444
  background-size: contain;
445
  color: white;
446
font-family: IntervalBook; }
447
448
.library {
449
  margin-left: auto;
450
  margin-right: auto;
451
  max-width: 90%;
452
padding: 1em; }
453
454
.library-shelf {
455
  max-width: 82%;
456
  margin: auto;
457
  margin-bottom: 40px; 
458
  padding-bottom: 20px;
459
border: white dotted 1px; }
460
461
.book-grid{
462
  display: grid;
463
  grid-template-columns: 1fr 1fr 1fr 1fr;
464
grid-gap: 10px; }
465
466
.library-shelf_title {
467
  padding: 0.5em;
468
  width: 100%;
469
font-size: 2em; }
470
471
.library-book {
472
  display: flex;
473
  flex-direction: column; 
474
  justify-content: center; 
475
align-items: center; }
476
477
.library-book_cover{
478
  border: white dotted 1px;
479
max-width: 200px; }
480
481
figcaption {
482
  color: white; 
483
  display: block;
484
  font-size: 0.9em;
485
  padding: 10px;   	
486
text-align: center; }
487
figcaption.write{
488
color: var(--orange-dust); }
489
490
.library-notes {
491
  background-image: url(../images/dark-sky.jpg);
492
  background-repeat: repeat-x repeat-y;
493
  background-size: cover;
494
  color: white;
495
font-family: IntervalBook; }
496
497
.notes-thumbnail {
498
  float: left; 
499
  width: 200px;
500
  margin-top: 1.5em;
501
margin-right: 1em; }
502
503
.notes{
504
  min-height: 400px;
505
  width: 82%;
506
  margin: auto;
507
  text-align: justify;
508
  border: 1px dashed white;
509
  padding-left: 1.5em;
510
  padding-right: 1.5em;
511
font-size: 1.5em; }
512
513
514
515
516
/* Writing
517
---------*/
518
519
.writing{
520
  background-color: aliceBlue;
521
  font-size: 20px;
522
}
523
524
.writing-collection {
525
  font-size: 1.3em;
526
  width: 80%;
527
  margin: 2em auto auto 2em; 
528
}
529
530
.writing-collection li{
531
  line-height: 1.5em;
532
  margin-bottom: 1.2em;
533
}
534
535
.writing-collection a{
536
  text-decoration: none;
537
  font-size: 1.05em;
538
  color: var(--writing-link);
539
}
540
541
.writing-piece_titlebox{
542
  min-height: 75px;
543
  display: flex; 
544
  border-left: 2px solid var(--writing-border);
545
  color: var(--writing-link);
546
  margin-bottom: 5px;
547
  border-bottom: 2px solid var(--writing-border); 
548
}	
549
@media (max-width: 667px) {
550
  .writing-piece_titlebox {
551
    min-height: 0;
552
  }
553
}
554
555
.writing-piece_title-wedge{
556
  width: 1%;
557
  border-top: 2px solid var(--writing-border);
558
  margin-right: 10px;
559
  border-right: 2px solid var(--writing-border);
560
  background-color: var(--writing-bg); 
561
}
562
563
.writing-piece_titlebox h1{
564
  font-size: 2em;
565
  display: flex;
566
  justify-content: center;
567
  align-items: center;
568
  padding: 0;
569
  margin: 0;
570
}
571
572
.writing-piece_byline{
573
  text-align: right;
574
  font-size: 1em;
575
  margin: 0;
576
color: var(--purple-dusk); }
577
578
.writing article{
579
  word-spacing: -0.2em;
580
  margin-top: 2em;
581
  font-size: 1.3em;
582
  line-height: 1.5em;
583
}
584
585
.writing-piece_accent{
586
color: var(--orange-dust);
587
}
588
589
/*
590
Funwater Awesome Library
591
*/
592
.note{
593
  font-size: 0.7em;
594
}
595
#zine-grid{
596
  display: grid;
597
  width: 80%;
598
  margin-top: 1em;
599
  grid-template-columns: 1fr 1fr;
600
  grid-grap: 1em;
601
  margin: auto;
602
}
603
  @media (max-width: 667px){
604
    #zine-grid{
605
      grid-template-columns: 1fr;
606
    }
607
  }
608
609
#zine-grid li{
610
  margin-top: 1em;
611
  display: flex;
612
  justify-content: center;
613
  align-items: center;
614
  position: relative;
615
}
616
617
#zine-grid img{
618
  max-width: auto;
619
  max-height: 500px;
620
}
621
622
623
/* Media Queries BABYEEE!
624
 ************************/
625
626
@media (max-width: 1100px){
627
  .my-mosaic{
628
  grid-template-columns: 1fr 1fr; }
629
630
  .book-grid {
631
  grid-template-columns: 1fr 1fr; }
632
633
  .tile-description{
634
  font-size: 1.1em; }
635
}
636
637
@media (max-width: 667px){
638
  .dancing-zach{
639
  float: none; }
640
641
  .placard{
642
    position: relative;
643
    flex-direction: column;
644
    height: auto; 
645
  }
646
  .placard h1{
647
    padding: 0.5em;
648
    max-width: 100%;
649
    border-right: none; 
650
    border-bottom: 3px solid var(--writing-border);
651
  }
652
  .placard p{
653
    padding: 1em;
654
    width: auto;
655
  }
656
  .my-mosaic{
657
  grid-template-columns: 1fr; }
658
659
  .book-grid {
660
  grid-template-columns: 1fr; }
661
662
  /* Don't know what these are for anymore! */
663
664
  .invisible-helper{
665
    width: 0;
666
    height: 200px;
667
    float: left;
668
  }
669