1;
2@font-face {
3 font-family: 'Open Sans';
4 font-style: normal;
5 font-weight: 300;
6 src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
7 src: local('Open Sans Light'), local('OpenSans-Light'),
8 url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
9 url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
10 url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
11 url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
12 url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
13}
14@font-face {
15 font-family: 'Open Sans';
16 font-style: italic;
17 font-weight: 300;
18 src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
19 src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
20 url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
21 url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
22 url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
23 url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
24 url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
25}
26@font-face {
27 font-family: 'Inconsolata';
28 font-style: normal;
29 font-weight: 400;
30 src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */
31 src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
32 url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
33 url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
34 url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
35 url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
36 url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
37}
38@font-face {
39 font-family: 'Inconsolata';
40 font-style: normal;
41 font-weight: 700;
42 src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */
43 src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
44 url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
45 url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
46 url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */
47 url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
48 url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
49}
50@font-face {
51 font-family: 'Overpass';
52 font-style: normal;
53 font-weight: 400;
54 src: url('/assets/fonts/overpass-v2-latin-regular.eot'); /* IE9 Compat Modes */
55 src: local('Overpass Regular'), local('Overpass-Regular'),
56 url('/assets/fonts/overpass-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
57 url('/assets/fonts/overpass-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
58 url('/assets/fonts/overpass-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
59 url('/assets/fonts/overpass-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
60 url('/assets/fonts/overpass-v2-latin-regular.svg#Overpass') format('svg'); /* Legacy iOS */
61}
62
63/* =Base */
64input[type=text] {
65 width: 30%;
66 box-sizing: border-box;
67 border: 0px;
68 border-radius: 5px;
69 background-color: #292929;
70 font-size: 16px;
71 text-align: center;
72 padding: 10px 0px 10px 0px;
73 -webkit-transition: width 0.4s ease-in-out;
74 transition: width 0.4s ease-in-out;
75}
76input[type=text]:focus {
77 width: 75%;
78}
79body {
80 font-family: 'Open Sans';
81 color: $iron;
82 background-color: $dorian;
83}
84a {
85 color: $iron;
86 font-weight: bold;
87 text-decoration: none;
88}
89.content a {
90 text-decoration: none;
91 font-weight: bold;
92}
93.content a::before {
94 content: "\f0c1 ";
95 font-size: 15px;
96}
97p {
98 font-size: 20px;
99 line-height: 32px;
100}
101p.center {
102 text-align: center;
103}
104ul {
105 font-size: 17px;
106 line-height: 27px;
107}
108ol {
109 font-size: 17px;
110 line-height: 27px;
111}
112img {
113 margin: 40px auto;
114 display: block;
115 max-width: 100%;
116}
117.flex-wrapper {
118 display: flex;
119 justify-content: center;
120 background-color: #323234;
121}
122.flex-cards {
123 width: 100%;
124 display: flex;
125 flex-wrap: wrap;
126 background-color: #323234;
127 justify-content: center;
128}
129.card {
130 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
131 margin: 5px;
132 transition: 0.3s;
133 border-radius: 5px;
134 width: 28.3%;
135 background: #4f4f4fff;
136 padding: 15px;
137 font-size: 15px;
138 text-align: center;
139}
140div.card p {
141 font-size: 17px;
142 text-align: left;
143 line-height: 27px;
144}
145.card:hover {
146 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
147}
148.crypto-card {
149 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
150 margin: 5px;
151 transition: 0.3s;
152 border-radius: 5px;
153 width: 35%;
154 background: #ffffffff;
155 padding: 15px;
156 font-size: 15px;
157 text-align: center;
158 color: #323234;
159 word-wrap: break-word;
160}
161div.crypto-card p {
162 font-size: 17px;
163 text-align: center;
164 line-height: 27px;
165}
166.crypto-card:hover {
167 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
168}
169.button {
170 border-radius: 8px;
171 border: 0px;
172 color: #4f4f4f;
173 background-color: white;
174 padding: 16px 32px;
175 text-align: center;
176 text-decoration: none;
177 display: inline-block;
178 font-size: 16px;
179 margin: 4px 2px;
180 -webkit-transition-duration: 0.4s;
181 transition-duration: 0.4s;
182 cursor: pointer;
183 border: 2px solid #fff;
184}
185.button:hover {
186 background-color: #4f4f4f;
187 color: #FFFFFF;
188}
189.tor {
190 border-radius: 8px;
191 border: 0px;
192 color: #fff;
193 background-color: #7D4699;
194 padding: 16px 16px;
195 text-align: center;
196 text-decoration: none;
197 display: inline-block;
198 font-size: 16px;
199 -webkit-transition-duration: 0.4s;
200 transition-duration: 0.4s;
201 cursor: pointer;
202 border: 2px solid #7D4699;
203 margin-left: 10px;
204}
205.tor:hover {
206 background-color: #4f4f4f;
207 color: #fff;
208 border: 2px solid #fff;
209}
210.donate {
211 border-radius: 8px;
212 border: 0px;
213 color: #323234;
214 background-color: white;
215 padding: 5px 20px;
216 text-align: center;
217 text-decoration: none;
218 display: inline-block;
219 font-size: 16px;
220 margin: 4px 2px;
221 -webkit-transition-duration: 0.4s;
222 transition-duration: 0.4s;
223 cursor: pointer;
224 border: 2px solid #fff;
225}
226.donate:hover {
227 background-color: #323234;
228 color: #FFFFFF;
229}
230.contact-card {
231 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
232 background: #4f4f4fff;
233 margin: 5px;
234 transition: 0.3s;
235 border-radius: 5px;
236 width: 20%;
237 text-align: center;
238}
239div.contact-card h1 {
240 font-size: 50px;
241 text-align: center;
242 line-height: 0px;
243}
244div.contact-card h2 {
245 font-size: 17px;
246 line-height: 27px;
247}
248.contact-card:hover {
249 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
250}
251blockquote {
252 letter-spacing: 1px;
253 margin:0px;
254 margin-top: 40px;
255 margin-bottom: 20px;
256 padding: 0px;
257 text-align: center;
258 position: relative;
259
260 footer {
261 position: absolute;
262 bottom: -35px;
263 font-size: 15px;
264 color: $iron;
265 letter-spacing: 0px;
266 left:0px;
267 right: 0px;
268
269 &:before { content: "** "; }
270 &:after { content: " **"; }
271 }
272
273 p {
274 display: inline;
275 font-size: 20px;
276 color: $cloudy;
277 font-weight: 400;
278 &:before { content: "“ "; }
279 &:after { content: " ”"; }
280 }
281}
282
283strong {
284 color: $iron;
285}
286
287/* =Header */
288.wrapper {
289 max-width: 70%;
290 margin: 100px auto;
291}
292
293.header {
294 overflow: hidden;
295 font-family: 'Overpass';
296}
297
298.navigation {
299 float:left;
300}
301
302.logo {
303 font-size: 50px;
304 font-weight: 700;
305 color: $iron;
306 display: block;
307}
308
309.menu {
310 color: $cloudy;
311 font-size: 18px;
312 margin:0px;
313 margin-top: 6px;
314 padding: 0px;
315 list-style-type: none;
316}
317
318.menu__entry {
319 display: inline-block;
320 margin-right: 35px;
321
322 &:last-child {
323 margin-right: 0px;
324 }
325}
326
327.menu__entry a {
328 font-weight: 400;
329}
330
331.social-links {
332 float:right;
333 font-size: 24px;
334 color: $cloudy;
335 list-style-type: none;
336}
337
338.social-links__entry {
339 display: inline-block;
340 margin-left: 10px;
341}
342
343/* =Titles */
344.page-title {
345 margin-top:100px;
346 margin-bottom:75px;
347 text-align: center;
348 font-family: 'Overpass';
349}
350
351.page-title__text {
352 font-weight: 600;
353 font-size: 60px;
354}
355
356.page-title__subtitle {
357 font-weight: 400;
358 font-family: 'Inconsolata';
359 font-size: 22px;
360 color: $cloudy;
361}
362
363.post-title {
364 margin-bottom: 100px;
365 font-family: 'Overpass';
366}
367
368.post-title__text {
369 font-size: 40px;
370}
371
372.post-title__subtitle {
373 font-size: 20px;
374}
375
376/* =Post teasers */
377
378.list-posts {
379 list-style-type: none;
380 font-family: 'Overpass';
381 padding: 0px;
382}
383
384.post-teaser {
385 font-family: 'Overpass';
386}
387
388.post-teaser p {
389 margin-bottom: 55px;
390 font-weight: 200;
391 font-family: 'Open Sans';
392 font-size: 15px;
393 font-style: none;
394}
395
396.post-teaser__title {
397 font-size: 25px;
398 color: $iron;
399}
400
401.post-teaser__date {
402 font-size: 17px;
403 float: right;
404 vertical-align: middle;
405 color: $cloudy;
406 font-family: 'Inconsolata';
407}
408
409.empty-post-list {
410 font-size: 22px;
411 font-weight: 700;
412 color: $iron;
413 text-align: center;
414}
415
416/* =Explore */
417.explore {
418 text-align: center;
419 font-family: 'Inconsolata';
420 color: $cloudy;
421 margin-top: 80px;
422}
423
424.explore__divider {
425 font-size: 18px;
426 letter-spacing: 8.18px;
427}
428
429.explore__label {
430 font-size: 14px;
431 margin-top: 15px;
432 font-family: 'Inconsolata';
433}
434
435.categories {
436 list-style-type: none;
437 font-family: 'Inconsolata';
438 margin-top: 15px;
439 padding: 0px;
440}
441
442.categories__item {
443 display: inline-block;
444 font-weight: 700;
445 font-size: 18px;
446}
447
448.categories__item a {
449 color: $iron;
450 font-family: 'Inconsolata';
451}
452
453.categories__item:after {
454 content: "/";
455 margin-left: 6px;
456 color: $cloudy;
457}
458
459.categories__item:last-child:after {
460 content: "";
461 margin-left: 0px;
462}
463
464
465/* =Post page */
466.about {
467 color: $cloudy;
468 margin-top: 50px;
469 text-align: center;
470 line-height: 24px;
471}
472
473.about__divider {
474 font-size: 20px;
475 margin-bottom: 10px;
476 letter-spacing: 9.09px;
477}
478
479.about__text {
480 font-size: 18px;
481}
482
483#disqus_thread {
484 margin-top: 100px;
485}
486@media (max-width: 1000px) {
487 .contact-card {
488 width: 28%;
489 }
490}
491@media (max-width: 800px) {
492 /* =Base */
493 p {
494 font-size: 16px;
495 line-height: 1.6;
496 }
497
498 .wrapper {
499 width: 80%;
500 }
501
502 .navigation,
503 .social-links {
504 @include centered-block();
505 }
506
507 .social-links {
508 font-size: 30px;
509 margin-top: 35px;
510 }
511
512 .page-title {
513 margin-top: 80px;
514 margin-bottom: 60px;
515 }
516
517 .page-title__text {
518 font-size: 40px;
519 }
520
521 .page-title__subtitle {
522 font-size: 18px;
523 }
524
525 .post-teaser__title {
526 font-size: 18px;
527 @include centered-block();
528 }
529
530 .post-teaser__date {
531 font-size: 16px;
532 margin-top: 10px;
533 float: none;
534 @include centered-block();
535 }
536
537 .explore {
538 margin-top: 80px;
539 }
540
541 .post-title__text {
542 font-size: 28px;
543 }
544
545 .post-title__subtitle {
546 font-size: 18px;
547 }
548 .post-teaser p {
549 text-align: center;
550 }
551 .card {
552 width: 40%;
553 }
554 .contact-card {
555 width: 30%;
556 }
557 .crypto-card {
558 width: 70%;
559 }
560}
561@media (max-width: 620px) {
562 input[type=text] {
563 width: 80%;
564 }
565 input[type=text]:focus {
566 width: 100%;
567 }
568 .card {
569 width: 80%;
570 }
571 .contact-card {
572 width: 45%;
573 }
574 .crypto-card {
575 width: 70%;
576 }
577}
578@media (max-width: 400px) {
579 .card {
580 width: 100%;
581 }
582 .contact-card {
583 width: 100%;
584 }
585 .crypto-card {
586 width: 100%;
587 }
588}
589;