static/style.css (view raw)
1html { font-family: sans-serif; }
2
3html,
4body {
5 background: #021012;
6}
7
8.container {
9 position: absolute;
10 top: 0;
11 bottom: 0;
12 left: 0;
13 right: 0;
14 color: white;
15
16 -webkit-animation: fadein 3s;
17 -moz-animation: fadein 3s;
18 -ms-animation: fadein 3s;
19 -o-animation: fadein 3s;
20 animation: fadein 3s;
21}
22
23.container-text {
24 position: absolute;
25 top: 0;
26 bottom: 0;
27 left: 0;
28 right: 0;
29 color: white;
30
31 -webkit-animation: fadein 1.5s;
32 -moz-animation: fadein 1.5s;
33 -ms-animation: fadein 1.5s;
34 -o-animation: fadein 1.5s;
35 animation: fadein 1.5s;
36}
37
38@keyframes fadein {
39 from { opacity: 0; }
40 to { opacity: 1; }
41}
42
43@-moz-keyframes fadein {
44 from { opacity: 0; }
45 to { opacity: 1; }
46}
47
48@-webkit-keyframes fadein {
49 from { opacity: 0; }
50 to { opacity: 1; }
51}
52
53.introduction {
54 position: absolute;
55 top: 50%;
56 transform: translateY(-50%);
57 width: 100%;
58}
59
60.content {
61 position: relative;
62 font-size: 17px;
63 top: 10%;
64 left: 30%;
65 right: 30%;
66 width: 40%;
67 line-height: 1.8;
68}
69
70pre {
71 padding: 10px;
72}
73
74pre, pre code {
75 background: #041b1e;
76 color: white;
77 word-wrap: break-word;
78 overflow-x: auto;
79 white-space: pre-wrap;
80 white-space: -moz-pre-wrap;
81 white-space: -pre-wrap;
82 white-space: -o-pre-wrap;
83}
84
85code {
86 color: cyan;
87 background: #041b1e;
88 padding: 1px;
89}
90
91.logo {
92 width: 220px;
93}
94
95.footer {
96 color: gray;
97 bottom: 20px;
98 position: absolute;
99 width: 100%;
100 text-align: center;
101 margin-bottom: 20px;
102}
103
104.header {
105 color: cyan;
106 top: 30px;
107 display: inline-block;
108 position: absolute;
109 width: 100%;
110 align: center;
111 text-align: center;
112}
113
114.header a {
115 margin-right: 20px;
116}
117
118.header a:last-child {
119 margin-right: 0
120}
121
122.muted {
123 color: gray
124}
125
126.muted a {
127 color: cyan
128}
129
130table {
131 width: 100%;
132}
133
134td {
135 white-space: nowrap;
136}
137
138td:first-child {
139 width: 100%;
140 max-width: 1px;
141 white-space: nowrap;
142 text-overflow: ellipsis;
143 overflow: hidden;
144}
145
146a {
147 color: gray;
148 margin: 0;
149 transition: all 200ms;
150 text-decoration: none;
151}
152
153a:hover {
154 color: #021012;
155 background: cyan;
156}
157
158.left {
159 display: inline-block;
160 margin-bottom: 30px;
161 margin-left: 0;
162 margin-right: 30px;
163}
164
165.right {
166 display: inline-block;
167}
168
169.right a {
170 display: inline-block;
171 margin-right: 30px;
172}
173
174.noselect {
175 -webkit-touch-callout:none;
176 -webkit-user-select:none;
177 -khtml-user-select:none;
178 -moz-user-select:none;
179 -ms-user-select:none;
180 user-select:none
181}
182
183img {
184 height: auto;
185 width: 100%;
186
187 max-width: 720px;
188}
189
190footer img {
191 all: initial;
192}
193
194.footimgs {
195 max-height: 2rem;
196 display: inline-block;
197 vertical-align: text-top;
198 image-orientation: from-image;
199 max-width: 100%;
200 padding-bottom: 5px;
201}
202
203footer a:hover {
204 all: initial;
205}
206
207h1, h2, h3 {
208 font-weight: normal;
209}
210
211h2 {
212 color: gray;
213}
214
215h3 {
216 color: cyan;
217}
218
219p {
220 bottom: 2em;
221}
222
223blockquote {
224 font-style: italic;
225 color: gray;
226}
227
228blockquote::before {
229 content: "\“";
230 font-size: 40px;
231 font-weight: bold;
232}
233
234blockquote::after {
235 content: "\”";
236 font-size: 40px;
237 font-weight: bold;
238
239}
240
241::selection {
242 background-color: cyan;
243 color: #021012;
244}
245
246@media only screen and (max-width: 70em) {
247 .left {
248 display: block;
249 margin-right: 0;
250 }
251 .right {
252 display: block;
253 }
254 .right a {
255 margin-right: 15px;
256 }
257 .right a:last-child {
258 margin-right: 0;
259 }
260
261/* .container-text {
262 overflow-y: auto;
263 }*/
264
265 .content {
266 left: 5%;
267 right: 5%;
268 bottom: 10%;
269 width: 90%;
270 }
271
272 .content h1, h2, h3 {
273 line-height: 1.5;
274 }
275
276 pre {
277 overflow-x: auto;
278 }
279
280 .logo {
281 width: 180px;
282 }
283}