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