@font-face { font-family: 'Open Sans'; font-display: swap; font-style: normal; font-weight: 300; src: url('assets/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light'), local('OpenSans-Light'), url('/assets/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Open Sans'; font-display: swap; font-style: italic; font-weight: 300; src: url('/assets/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url('/assets/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Inconsolata'; font-display: swap; font-style: normal; font-weight: 400; src: url('/assets/fonts/inconsolata-v16-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('/assets/fonts/inconsolata-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/inconsolata-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/fonts/inconsolata-v16-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/inconsolata-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/inconsolata-v16-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Inconsolata'; font-display: swap; font-style: normal; font-weight: 700; src: url('/assets/fonts/inconsolata-v16-latin-700.eot'); /* IE9 Compat Modes */ src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('/assets/fonts/inconsolata-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/inconsolata-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/fonts/inconsolata-v16-latin-700.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/inconsolata-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/inconsolata-v16-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Overpass'; font-display: swap; font-style: normal; font-weight: 400; src: url('/assets/fonts/overpass-v2-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Overpass Regular'), local('Overpass-Regular'), url('/assets/fonts/overpass-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/overpass-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/assets/fonts/overpass-v2-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/overpass-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/overpass-v2-latin-regular.svg#Overpass') format('svg'); /* Legacy iOS */ } /* =Base */ input[type=text] { width: 30%; box-sizing: border-box; border: 0px; border-radius: 5px; background-color: #292929; font-size: 16px; text-align: center; padding: 10px 0px 10px 0px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 75%; } body { font-family: 'Open Sans'; color: $iron; background-color: $dorian; } a { color: $iron; font-weight: bold; text-decoration: none; } .content { margin-top: -20px; word-wrap: anywhere; } .content .headerlink { display: none; float: left; padding-right: 4px; margin-left: -30px; } .content .headerlink::before { content: "\f0c1"; font-size: smaller; font-family: "ForkAwesome"; } .content h1:hover .headerlink { display: block; } .content h2:hover .headerlink { display: block; } .content h3:hover .headerlink { display: block; } .content > h1,h2 { border-bottom: 2px solid #fff; padding-bottom: 7px; } .content > h3 { font-size: 21px; } .content > h4 { font-size: 19px; } .content a { text-decoration: none; font-weight: bold; text-align: justify; } .content p a::after { content: "\f08e"; font-size: 15px; font-family: "ForkAwesome"; margin-left: 5px; } .content li a::after { content: "\f08e"; font-size: 15px; font-family: "ForkAwesome"; margin-left: 5px; } .hide { display: none; } p { font-size: 20px; line-height: 32px; } p.center { text-align: center; } ul { font-size: 17px; line-height: 27px; } ol { font-size: 17px; line-height: 27px; } img { margin: 40px auto; display: block; max-width: 100%; cursor: pointer; } .content img { position: relative; transition: transform .3s ease; } .content img:hover { /** box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);**/ transform: translate3d(1px, -5px, 0px); } .content img:active { transform: scale(1.4); } .post-image { display: none; } .flex-wrapper { display: flex; justify-content: center; background-color: #323234; } .flex-cards { width: 100%; display: flex; flex-wrap: wrap; background-color: #323234; justify-content: center; } .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3); margin: 5px; transition: 0.3s; border-radius: 5px; width: 28.3%; background: #4f4f4fff; padding: 15px; font-size: 15px; text-align: center; } div.card p { font-size: 17px; text-align: left; line-height: 27px; } .card:hover { box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5); } .crypto-card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3); margin: 5px; transition: 0.3s; border-radius: 5px; width: 35%; background: #ffffffff; padding: 15px; font-size: 15px; text-align: center; color: #323234; word-wrap: break-word; } div.crypto-card p { font-size: 17px; text-align: center; line-height: 27px; } .crypto-card:hover { box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5); } .button { border-radius: 8px; border: 0px; color: #4f4f4f; background-color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border: 2px solid #fff; } .button:hover { background-color: #4f4f4f; color: #FFFFFF; } .tor { border-radius: 8px; border: 0px; color: #fff; background-color: #7D4699; padding: 16px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border: 2px solid #7D4699; margin-left: 10px; } .tor:hover { background-color: #4f4f4f; color: #fff; border: 2px solid #fff; } .donate { border-radius: 8px; border: 0px; color: #323234; background-color: white; padding: 5px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border: 2px solid #fff; } .scroll { padding-top: 10px; } .tags { margin-bottom: 3rem; font-family: 'Open Sans'; } .list-tags a { font-size: 1rem; color: #fff; display:inline-block; border:1px solid #fff; border-radius:.313rem; padding:.25rem .625rem; margin-right:.125rem; margin-bottom:.5rem; text-decoration:none !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition-duration: 0.4s; } .tag-title { font-family: 'Overpass',sans-serif; font-weight: 400; font-style: normal; font-size: 2.25rem; margin-top: 3.75rem; width: auto; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; color: #fff; } .tag-list { list-style-type: none; font-family: 'Overpass'; padding: 0px; } .tag-list li { font-family: 'Overpass'; border-bottom: 1px solid #fff; padding: .625rem 0; } .tag-list span { font-weight: 500; font-size: 20px; color: $iron; } .meta { font-size: 15px!important; } .meta { font-size: 1rem; color: #fff; display:inline-block; border:1px solid #fff; border-radius:.313rem; padding:.15rem .6rem; margin-right:.125rem; margin-bottom:.5rem; text-decoration:none !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition-duration: 0.4s; } time { font-family: Overpass; font-size: 20px; font-weight: 500; float: right; vertical-align: middle; } .tags a:hover { color:#323234; background-color: #fff; } .donate:hover { background-color: #323234; color: #fff; } .contact-card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3); background: #4f4f4fff; margin: 5px; transition: 0.3s; border-radius: 5px; width: 20%; text-align: center; } div.contact-card h1 { font-size: 50px; text-align: center; line-height: 0px; } div.contact-card h2 { font-size: 17px; line-height: 27px; } .contact-card:hover { box-shadow: 0 12px 20px 0 rgba(0,0,0,0.5); } blockquote { letter-spacing: 1px; margin: 0px; margin-top: 40px; margin-bottom: 40px; padding: 0px; border-left: 4px solid #fff; p { margin-left: 20px; font-size: 20px; color: #bcbcbc; font-weight: 400; } ul { color: #bcbcbc; } } .publish-date { color: $iron; font-weight: bold; } strong { color: $iron; } /* =Header */ .wrapper { width: 70%; margin: 100px auto; } .header { overflow: hidden; font-family: 'Overpass'; } .navigation { float:left; } .logo { font-size: 50px; font-weight: 700; color: $iron; } .menu { color: $cloudy; font-size: 18px; margin:0px; margin-top: 6px; padding: 0px; list-style-type: none; } .menu-entry { display: inline-block; margin-right: 35px; &:last-child { margin-right: 0px; } } .menu-entry a { font-weight: 400; } .social-links { float:right; font-size: 24px; color: $cloudy; list-style-type: none; } .social-links-entry { display: inline-block; margin-left: 10px; } /* =Titles */ .page-title { margin-top:100px; margin-bottom:75px; text-align: center; font-family: 'Overpass'; } .page-title-text { font-weight: 600; font-size: 60px; } .page-title-subtitle { font-weight: 400; font-family: 'Inconsolata'; font-size: 22px; color: $cloudy; } .post-title { margin-bottom: 100px; font-family: 'Overpass'; } .post-title-text { font-size: 40px; } .post-title-subtitle { font-size: 20px; } /* =Post teasers */ .list-posts { list-style-type: none; font-family: 'Overpass'; padding: 0px; } .post-teaser { font-family: 'Overpass'; } .post-teaser p { font-weight: 200; font-family: 'Open Sans'; font-size: 15px; font-style: none; } .post-teaser-title { font-size: 25px; color: $iron; } .post-teaser-date { font-size: 17px; float: right; vertical-align: middle; color: $cloudy; font-family: 'Inconsolata'; } .empty-post-list { font-size: 22px; font-weight: 700; color: $iron; text-align: center; } /* =Explore */ .pagination { text-align: center; padding: 30px 0 45px; margin: 0 auto; max-width: 62.5rem; } .pagination > a { display: inline-block; border-radius: 50% !important; padding: 6px; width: 32px; height: 32px; text-decoration: none; } .pagination > a:hover { background-color: transparent; } .explore { text-align: center; font-family: 'Inconsolata'; color: $cloudy; margin-top: 80px; word-break: break-all; } .explore-divider { font-size: 18px; letter-spacing: 8.18px; } .explore-label { font-size: 14px; margin-top: 15px; font-family: 'Inconsolata'; } .categories { list-style-type: none; font-family: 'Inconsolata'; margin-top: 15px; padding: 0px; } .categories-item { display: inline-block; font-weight: 700; font-size: 18px; } .categories-item a { color: $iron; font-family: 'Inconsolata'; } .categories-item:after { content: "/"; margin-left: 6px; color: $cloudy; } .categories-item:last-child:after { content: ""; margin-left: 0px; } /* =Post page */ .about { color: $cloudy; margin-top: 50px; text-align: center; line-height: 24px; } .about-divider { font-size: 20px; margin-bottom: 10px; letter-spacing: 9.09px; } .about-text { font-size: 18px; } #disqus_thread { margin-top: 100px; } @media (min-width: 1920px) { .wrapper { width: 50% } } @media (min-width: 2560px) { .wrapper { width: 37% } } @media (max-width: 1000px) { .contact-card { width: 28%; } } @media screen and (max-width: 1000px) and (max-height:600px) { .wrapper { width: 75%; } .card { width: 35%; } } @media (max-width: 800px) { /* =Base */ p { font-size: 16px; line-height: 1.6; } .wrapper { width: 80%; } .navigation, .social-links { @include centered-block(); } .social-links { font-size: 30px; margin-top: 35px; } .tags { text-align: center; } time { display: none; } .page-title { margin-top: 80px; margin-bottom: 60px; } .page-title-text { font-size: 40px; } .page-title-subtitle { font-size: 18px; } .post-teaser-title { font-size: 18px; @include centered-block(); } .post-teaser-date { font-size: 16px; margin-top: 10px; float: none; @include centered-block(); } .explore { margin-top: 80px; } .post-title-text { font-size: 28px; } .post-title-subtitle { font-size: 18px; } .post-teaser p { text-align: center; } .card { width: 40%; } .contact-card { width: 30%; } .crypto-card { width: 70%; } } @media (max-width: 620px) { input[type=text] { width: 80%; } input[type=text]:focus { width: 100%; } .card { width: 80%; } .wrapper { width: 84%; } .contact-card { width: 45%; } .crypto-card { width: 70%; } } @media (max-width: 400px) { .card { width: 100%; } .contact-card { width: 100%; } .crypto-card { width: 100%; } } ;