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