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: #4f4f4fff;
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: #4f4f4fff;
199 color: #FFFFFF;
200}
201.tor {
202 border-radius: 8px;
203 border: 0px;
204 color: #4f4f4fff;
205 background-color: #7D4699;
206 padding: 16px 32px;
207 text-align: center;
208 text-decoration: none;
209 display: inline-block;
210 font-size: 16px;
211 margin: 4px 2px;
212 -webkit-transition-duration: 0.4s;
213 transition-duration: 0.4s;
214 cursor: pointer;
215 border: 2px solid #7D4699;
216}
217.tor:hover {
218 background-color: #4f4f4fff;
219 color: #7D4699;
220}
221.contact-card {
222 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
223 background: #4f4f4fff;
224 margin: 5px;
225 transition: 0.3s;
226 border-radius: 5px;
227 width: 20%;
228 text-align: center;
229}
230div.contact-card h1 {
231 font-size: 50px;
232 text-align: center;
233 line-height: 0px;
234}
235div.contact-card h2 {
236 font-size: 17px;
237 line-height: 27px;
238}
239.contact-card:hover {
240 box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5);
241}
242blockquote {
243 letter-spacing: 1px;
244 margin:0px;
245 margin-top: 40px;
246 margin-bottom: 20px;
247 padding: 0px;
248 text-align: center;
249 position: relative;
250
251 footer {
252 position: absolute;
253 bottom: -35px;
254 font-size: 15px;
255 color: $iron;
256 letter-spacing: 0px;
257 left:0px;
258 right: 0px;
259
260 &:before { content: "** "; }
261 &:after { content: " **"; }
262 }
263
264 p {
265 display: inline;
266 font-size: 20px;
267 color: $cloudy;
268 font-weight: 400;
269 &:before { content: "“ "; }
270 &:after { content: " ”"; }
271 }
272}
273
274strong {
275 color: $iron;
276}
277
278/* =Header */
279.wrapper {
280 max-width: 70%;
281 margin: 100px auto;
282}
283
284.header {
285 overflow: hidden;
286 font-family: 'Overpass';
287}
288
289.navigation {
290 float:left;
291}
292
293.logo {
294 font-size: 50px;
295 font-weight: 700;
296 color: $iron;
297 display: block;
298}
299
300.menu {
301 color: $cloudy;
302 font-size: 18px;
303 margin:0px;
304 margin-top: 6px;
305 padding: 0px;
306 list-style-type: none;
307}
308
309.menu__entry {
310 display: inline-block;
311 margin-right: 35px;
312
313 &:last-child {
314 margin-right: 0px;
315 }
316}
317
318.menu__entry a {
319 font-weight: 400;
320}
321
322.social-links {
323 float:right;
324 font-size: 24px;
325 color: $cloudy;
326 list-style-type: none;
327}
328
329.social-links__entry {
330 display: inline-block;
331 margin-left: 10px;
332}
333
334/* =Titles */
335.page-title {
336 margin-top:100px;
337 margin-bottom:75px;
338 text-align: center;
339 font-family: 'Overpass';
340}
341
342.page-title__text {
343 font-weight: 600;
344 font-size: 60px;
345}
346
347.page-title__subtitle {
348 font-weight: 400;
349 font-family: 'Inconsolata';
350 font-size: 22px;
351 color: $cloudy;
352}
353
354.post-title {
355 margin-bottom: 110px;
356 font-family: 'Overpass';
357}
358
359.post-title__text {
360 font-size: 40px;
361}
362
363.post-title__subtitle {
364 font-size: 20px;
365}
366
367/* =Post teasers */
368
369.list-posts {
370 list-style-type: none;
371 font-family: 'Overpass';
372 padding: 0px;
373}
374
375.post-teaser {
376 font-family: 'Overpass';
377}
378
379.post-teaser p {
380 margin-bottom: 55px;
381 font-weight: 200;
382 font-family: 'Open Sans';
383 font-size: 15px;
384 font-style: none;
385}
386
387.post-teaser__title {
388 font-size: 25px;
389 color: $iron;
390}
391
392.post-teaser__date {
393 font-size: 17px;
394 float: right;
395 vertical-align: middle;
396 color: $cloudy;
397 font-family: 'Inconsolata';
398}
399
400.empty-post-list {
401 font-size: 22px;
402 font-weight: 700;
403 color: $iron;
404 text-align: center;
405}
406
407/* =Explore */
408.explore {
409 text-align: center;
410 font-family: 'Inconsolata';
411 color: $cloudy;
412 margin-top: 140px;
413}
414
415.explore__divider {
416 font-size: 18px;
417 letter-spacing: 8.18px;
418}
419
420.explore__label {
421 font-size: 14px;
422 margin-top: 15px;
423 font-family: 'Inconsolata';
424}
425
426.categories {
427 list-style-type: none;
428 font-family: 'Inconsolata';
429 margin-top: 15px;
430 padding: 0px;
431}
432
433.categories__item {
434 display: inline-block;
435 font-weight: 700;
436 font-size: 18px;
437}
438
439.categories__item a {
440 color: $iron;
441 font-family: 'Inconsolata';
442}
443
444.categories__item:after {
445 content: "/";
446 margin-left: 6px;
447 color: $cloudy;
448}
449
450.categories__item:last-child:after {
451 content: "";
452 margin-left: 0px;
453}
454
455
456/* =Post page */
457.about {
458 color: $cloudy;
459 margin-top: 70px;
460 text-align: center;
461 line-height: 24px;
462}
463
464.about__divider {
465 font-size: 20px;
466 margin-bottom: 50px;
467 letter-spacing: 9.09px;
468}
469
470.about__text {
471 font-size: 18px;
472}
473
474#disqus_thread {
475 margin-top: 100px;
476}
477@media (max-width: 1000px) {
478 .contact-card {
479 width: 28%;
480 }
481}
482@media (max-width: 800px) {
483 /* =Base */
484 p {
485 font-size: 16px;
486 line-height: 1.6;
487 }
488
489 .wrapper {
490 width: 80%;
491 }
492
493 .navigation,
494 .social-links {
495 @include centered-block();
496 }
497
498 .social-links {
499 font-size: 30px;
500 margin-top: 35px;
501 }
502
503 .page-title {
504 margin-top: 80px;
505 margin-bottom: 60px;
506 }
507
508 .page-title__text {
509 font-size: 40px;
510 }
511
512 .page-title__subtitle {
513 font-size: 18px;
514 }
515
516 .post-teaser__title {
517 font-size: 18px;
518 @include centered-block();
519 }
520
521 .post-teaser__date {
522 font-size: 16px;
523 margin-top: 10px;
524 float: none;
525 @include centered-block();
526 }
527
528 .explore {
529 margin-top: 80px;
530 }
531
532 .post-title__text {
533 font-size: 28px;
534 }
535
536 .post-title__subtitle {
537 font-size: 18px;
538 }
539 .post-teaser p {
540 text-align: center;
541 }
542 .card {
543 width: 40%;
544 }
545 .contact-card {
546 width: 30%;
547 }
548 .crypto-card {
549 width: 70%;
550 }
551}
552@media (max-width: 620px) {
553 input[type=text] {
554 width: 80%;
555 }
556 input[type=text]:focus {
557 width: 100%;
558 }
559 .card {
560 width: 80%;
561 }
562 .contact-card {
563 width: 45%;
564 }
565 .crypto-card {
566 width: 70%;
567 }
568}
569@media (max-width: 400px) {
570 .card {
571 width: 100%;
572 }
573 .contact-card {
574 width: 100%;
575 }
576 .crypto-card {
577 width: 100%;
578 }
579}
580;