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