-
Notifications
You must be signed in to change notification settings - Fork 19
/
style.css
155 lines (134 loc) · 6.41 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* world's smalles reset? */
*, *::before, *::after {box-sizing: border-box;}
img { max-width: 100%; }
/* theming */
:root {
--root-font-family: "Roboto";
--root-font-size: 16px;
--body-font-size: min(max( .875rem, calc(.75rem + .6vw)), 1.175rem);
--p-font-size: var(--body-font-size);
--button-font-size: min(max( .875rem, calc(.725rem + 0.62vw)), 1.175rem);
--h6-font-size: min(max( .9rem, calc(.725rem + 1vw)), 1.45rem);
--h5-font-size: min(max( 1rem, calc(.825rem + 1.25vw)), 1.75rem);
--h4-font-size: min(max(1.1rem, calc(0.95rem + 1.5vw)), 2.05rem);
--h3-font-size: min(max(1.25rem, calc(1.1rem + 1.75vw)), 2.37rem);
--h2-font-size: min(max(1.5rem, calc(1.3rem + 2.05vw)), 2.8rem);
--h1-font-size: min(max(1.75rem, calc(1.58rem + 2.5vw)), 3.4rem);
--main-max-width: min(max( 30rem, calc(20rem + 50vw)), 50rem);
--body-font-weight: normal;
--p-font-weight: normal;
--button-font-weight: normal;
--h6-font-weight: 500;
--h5-font-weight: 500;
--h4-font-weight: normal;
--h3-font-weight: normal;
--h2-font-weight: normal;
--h1-font-weight: normal;
--body-color: #444;
--p-color: #444;
--button-color: #000;
--h6-color: #444;
--h5-color: #444;
--h4-color: #111;
--h3-color: #111;
--h2-color: #000;
--h1-color: #000;
--body-margin-v: min(max(.5rem, calc(.25rem + 3vw)), 2.5rem);
--body-margin-h: var(--body-margin-v);
--body-margin: var(--body-margin-v) var(--body-margin-h);
--p-margin-v: min(max(.25rem, calc(.1rem + 1vw)), .75rem);
--p-margin-h: 0;
--p-margin: var(--p-margin-v) var(--p-margin-h);
--h6-margin-v: min(max(.125rem, calc(.1rem + .1vw)), .25rem);
--h6-margin-h: 0;
--h6-margin: var(--h6-margin-v) var(--h6-margin-h);
--h5-margin-v: min(max(.25rem, calc(.1rem + .25vw)), .5rem);
--h5-margin-h: 0;
--h5-margin: var(--h5-margin-v) var(--h5-margin-h);
--h4-margin-v: min(max(.5rem, calc(.1rem + .5vw)), .75rem);
--h4-margin-h: 0;
--h4-margin: var(--h4-margin-v) var(--h4-margin-h);
--h3-margin-v: min(max(.75rem, calc(.1rem + .75vw)), 1rem);
--h3-margin-h: 0;
--h3-margin: var(--h3-margin-v) var(--h3-margin-h);
--h2-margin-v: min(max(1rem, calc(.1rem + 1vw)), 1.25rem);
--h2-margin-h: 0;
--h2-margin: var(--h2-margin-v) var(--h2-margin-h);
--h1-margin-v: min(max(1.25rem, calc(.1rem + 1.25vw)), 1.5rem);
--h1-margin-h: 0;
--h1-margin: var(--h1-margin-v) var(--h1-margin-h);
--button-margin-v: min(max(.25rem, calc(.1rem + .25vw)), .5rem);
--button-margin-h: 0;
--button-margin-l: var(--button-margin-h);
--button-margin-r: min(max(.25rem, calc(.1rem + .25vw)), .5rem);
--button-margin: var(--button-margin-v) var(--button-margin-r) var(--button-margin-h) var(--button-margin-l);
--img-margin-v: min(max(.25rem, calc(.1rem + 2.5vw)), 1rem);
--img-margin-h: 0;
--img-margin: var(--img-margin-v) var(--img-margin-h);
--body-padding: 0;
--p-padding: 0;
--h6-padding: 0;
--h5-padding: 0;
--h4-padding: 0;
--h3-padding: 0;
--h2-padding: 0;
--h1-padding: 0;
--button-padding-v: 0.5rem;
--button-padding-h: 1rem;
--button-padding: var(--button-padding-v) var(--button-padding-h);
--body-line-height: 1.5;
--p-line-height: 1.5;
--h6-line-height: 1.5;
--h5-line-height: 1.45;
--h4-line-height: 1.4;
--h3-line-height: 1.35;
--h2-line-height: 1.3;
--h1-line-height: 1.25;
--button-line-height: 24px;
}
html {
font-family: var(--root-font-family);
font-size: var(--root-font-size);
}
body,
.body {font-size: var(--body-font-size); font-weight: var(--body-font-weight); margin: var(--body-margin); padding: var(--body-padding); color: var(--body-color); line-height: var(--body-line-height)}
main,
.main {max-width: var(--main-max-width); margin: 0 auto;}
p, .p {font-size: var(--p-font-size); font-weight: var(--p-font-weight); margin: var(--p-margin); padding: var(--p-padding); color: var(--p-color); line-height: var(--p-line-height)}
h6, .h6 {font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); margin: var(--h6-margin); padding: var(--h6-padding); color: var(--h6-color); line-height: var(--h6-line-height)}
h5, .h5 {font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); margin: var(--h5-margin); padding: var(--h5-padding); color: var(--h5-color); line-height: var(--h5-line-height)}
h4, .h4 {font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); margin: var(--h4-margin); padding: var(--h4-padding); color: var(--h4-color); line-height: var(--h4-line-height)}
h3, .h3 {font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); margin: var(--h3-margin); padding: var(--h3-padding); color: var(--h3-color); line-height: var(--h3-line-height)}
h2, .h2 {font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); margin: var(--h2-margin); padding: var(--h2-padding); color: var(--h2-color); line-height: var(--h2-line-height)}
h1, .h1 {font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); margin: var(--h1-margin); padding: var(--h1-padding); color: var(--h1-color); line-height: var(--h1-line-height)}
button,
.button {font-size: var(--button-font-size); font-weight: var(--button-font-weight); margin: var(--button-margin); padding: var(--button-padding); color: var(--button-color); line-height: var(--button-line-height);
text-transform: uppercase;
}
img,
.img {margin: var(--img-margin)}
button > i:first-of-type,
button > b:first-of-type {
vertical-align: middle;
}
button > i:first-of-type {
font-size: 24px;
font-weight: bold;
font-style: normal;
margin-right: 8px;
}
button > b:first-of-type {
font-style: normal;
}
summary:hover,
summary:focus,
summary:active {
outline: none;
}
h1 > img,
.h1 > img,
h1 > .img,
.h1 > .img {
max-height: calc(1.2 * var(--h1-font-size));
margin: 0px var(--button-margin-r) calc(0px - 0.33 * var(--h1-font-size)) 0px;
}