/
style.css
77 lines (70 loc) · 4.71 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:separate;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
*:focus { outline: none}
::selection { background: #eee; opacity:1.0; color:#000; padding:10px; /* Safari */ }
@font-face { font-family: 'alte_haas_grotesk_regular'; src: url('media/fonts/alte_haas_grotesk_regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'alte_haas_grotesk_bold'; src: url('media/fonts/alte_haas_grotesk_bold.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'input_mono_regular'; src: url('media/fonts/input_mono_regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'input_mono_medium'; src: url('media/fonts/input_mono_medium.ttf') format('truetype'); font-weight: normal; font-style: normal; }
html { background:white; }
body { background:#fff; color:#000; font-family: "alte_haas_grotesk_regular", "Helvetica Neue", Helvetica, Arial; overflow-x: hidden; margin-top:5px; padding:45px 90px; }
body hr { border:0; clear:both; }
body header a#logo { margin-top: -15px;display: block;width: 75px; margin-bottom:15px;}
body header a#logo img { width:100%; }
body main img.capsule { width: 150px; }
body main img.medium {max-width: 300px;}
body main > * { max-width: 600px; margin-bottom: 15px }
body main > h1 {
font-family: "alte_haas_grotesk_regular", "Helvetica Neue", Helvetica, Arial;
font-size:45px;
text-transform: capitalize;
}
body main > h2 {
font-family: "alte_haas_grotesk_bold",
"Helvetica Neue", Helvetica, Arial;
font-size:30px;
text-transform: capitalize;
margin-top: 45px;
}
body main > img { max-width: 600px }
body main > ul { font-family: 'input_mono_regular'; font-size:14px; line-height: 20px }
body main > ul li {}
body main > ul li a { text-transform: capitalize; text-decoration: underline; }
body main > ul li b { font-weight: bold }
body main > ul li:hover a { text-decoration: none; }
body main > p { line-height: 28px; font-size:18px; }
body main > p a { text-decoration: underline; }
body main > p b { font-weight: bold }
body main > p i { font-style: italic; line-height: 28px; font-size:18px; }
body main > code { font-family: 'input_mono_regular'; font-size:12px; margin-bottom: 30px; display: block; background:black; color:white; padding:15px; white-space: pre}
body main > code comment { color:#777; }
body main > p.quote { padding: 30px;font-size: 20px;font-style: italic; max-width: 400px }
body main > ul.jump { columns:2; line-height: 20px}
body main > ul.jump li { list-style-type: decimal-leading-zero; list-style-position: inside; text-transform: capitalize;}
body main > ul.jump li::marker { color:#777; }
body main > ul.jump li:hover { background:black; color:white; }
body main a.button { font-family: "alte_haas_grotesk_bold", "Helvetica Neue", Helvetica, Arial; background-color: #000000;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}
body main a.button:hover {background-color: #727272 !important;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}
body main a.button.patreon { background-color: #e75942; }
body main ul.gallery { background:none; }
body main ul.gallery li { clear: both; display: block; border-bottom: 2px solid black; height: 170px; margin-top: -2px; }
body main ul.gallery li:last-child { border-bottom: 0px; }
body main ul.gallery li a { display: block; padding: 10px; }
body main ul.gallery li img { width:150px; float:left; display: block ; margin-right: 15px;}
body main ul.gallery li h3 { font-family: "alte_haas_grotesk_regular", "Helvetica Neue", Helvetica, Arial; font-size: 30px;text-transform: capitalize; line-height: 40px;max-width: 75%; margin-bottom: 10px; }
body main ul.gallery li h4 { font-family: "alte_haas_grotesk_bold", "Helvetica Neue", Helvetica, Arial; font-size:20px; text-transform: capitalize; }
body footer { border-top: 1.5px solid black;padding-top: 30px;margin-bottom: 120px; max-width: 600px }
body footer p { font-weight: bold }
body footer p a { text-decoration: underline; }
img.thumbnail { border-radius: 3px;max-width: calc(100% - 20px);margin-bottom: 10px;}
b { font-weight: bold }
a { text-decoration: underline; }
.row:after {
content: "";
display: table;
clear: both;
}
body main p sub { font-size: 14px;font-style: italic;}
@media (max-width: 900px) {
body { padding: 30px; }
body main > ul.jump { columns: 1 !important }
}