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