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