11: root {
2- --black : # 222222 ;
3- --white : # ffffff ;
4- --gray-01 : # 262831 ;
5- --gray-02 : # 2f333e ;
6- --gray-03 : # 393e4b ;
7- --gray-04 : # 434958 ;
8- --gray-05 : # 4d5465 ;
9- --gray-06 : # 575f72 ;
10- --gray-07 : # 616a7f ;
11- --gray-08 : # 6b758c ;
12- --gray-09 : # 758099 ;
13- --gray-10 : # 7f8ba6 ;
14- --gray-11 : # 8997b4 ;
15- --gray-12 : # 95a2bb ;
16- --gray-13 : # a2adc3 ;
17- --gray-14 : # aeb8cb ;
18- --gray-15 : # bbc3d3 ;
19- --gray-16 : # c7ceda ;
20- --gray-17 : # d4d9e2 ;
21- --gray-18 : # e0e4ea ;
22- --gray-19 : # edeff2 ;
23- --gray-20 : # fafafa ;
24- --root-font-size : 14px ;
25- --radius : 2px ;
2+ --black : 0 , 0 , 0 ;
3+ --white : 255 , 255 , 255 ;
4+ --gray-01 : 38 , 40 , 49 ;
5+ --gray-02 : 47 , 51 , 62 ;
6+ --gray-03 : 57 , 62 , 75 ;
7+ --gray-04 : 67 , 73 , 88 ;
8+ --gray-05 : 77 , 84 , 101 ;
9+ --gray-06 : 87 , 95 , 114 ;
10+ --gray-07 : 97 , 106 , 127 ;
11+ --gray-08 : 107 , 117 , 140 ;
12+ --gray-09 : 117 , 128 , 153 ;
13+ --gray-10 : 127 , 139 , 166 ;
14+ --gray-11 : 137 , 151 , 180 ;
15+ --gray-12 : 149 , 162 , 187 ;
16+ --gray-13 : 162 , 173 , 195 ;
17+ --gray-14 : 174 , 184 , 203 ;
18+ --gray-15 : 187 , 195 , 211 ;
19+ --gray-16 : 199 , 206 , 218 ;
20+ --gray-17 : 212 , 217 , 226 ;
21+ --gray-18 : 224 , 228 , 234 ;
22+ --gray-19 : 237 , 239 , 242 ;
23+ --gray-20 : 250 , 250 , 250 ;
2624 --accent : 0 , 255 , 0 ;
27- --line-width : 3px ;
28- --background : var (--gray-01 );
25+ --root-font-size : 14px ;
26+ --radius : 0.2em ;
27+ --line-width : 0.2em ;
28+ --background : rgb (var (--gray-01 ));
2929 --gutter : 0.5em ;
3030 --animation-speed-fast : 0.2s ;
31- --animation-speed-medium : 0.3 s ;
32- --animation-speed-slow : 0.4 s ;
31+ --animation-speed-medium : 0.4 s ;
32+ --animation-speed-slow : 0.6 s ;
3333 --font-regular : "Open Sans Regular" , sans-serif;
3434 --font-bold : "Open Sans Bold" , sans-serif;
3535 --font-light : "Open Sans Light" , sans-serif;
3636 --font-fjalla : "Fjalla One Regular" , sans-serif;
37+ --z-index-background : 1000 ;
38+ --z-index-link : 2000 ;
39+ --z-index-header : 3000 ;
40+ --z-index-tip : 4000 ;
41+ --z-index-shade : 5000 ;
42+ --z-index-modal : 6000 ;
43+ --z-index-menu : 7000 ;
44+ --background-image : none;
45+ --background-opacity : 1 ;
46+ --background-accent-opacity : 0 ;
47+ --background-blur : 0 ;
3748 /* breakpoint reference */
3849 /* can not be used in @media as of yet */
3950 --breakpoint-sm : 550px ;
4051 --breakpoint-md : 700px ;
4152 --breakpoint-lg : 900px ;
4253 --breakpoint-xl : 1100px ;
4354 --breakpoint-xxl : 1600px ;
44- --z-index-link : 1000 ;
45- --z-index-header : 2000 ;
46- --z-index-tip : 3000 ;
47- --z-index-shade : 4000 ;
48- --z-index-modal : 5000 ;
49- --z-index-menu : 6000 ;
5055}
5156
5257: root .is-link-block {
7378
7479::selection {
7580 background-color : rgb (var (--accent ));
76- color : var (--white );
81+ color : rgb ( var (--white ) );
7782}
7883
7984html {
@@ -82,8 +87,28 @@ html {
8287
8388body {
8489 background-color : var (--background );
85- color : var (--white );
90+ color : rgb ( var (--white ) );
8691 font-size : 1rem ;
8792 line-height : 1.6 ;
8893 font-family : var (--font-regular );
94+ display : flex;
95+ flex-direction : column;
96+ height : 100vh ;
97+ }
98+
99+ .is-alignment-vertical-top body {
100+ justify-content : flex-start;
101+ }
102+
103+ .is-alignment-vertical-center body {
104+ justify-content : center;
105+ }
106+
107+ .is-alignment-vertical-bottom body {
108+ justify-content : flex-end;
109+ }
110+
111+ .is-link body {
112+ display : inherit;
113+ height : inherit;
89114}
0 commit comments