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