snachodog.github.io/style.scss

1042 lines
18 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
---
//
// IMPORTS
//
@import "reset";
@import "variables";
// Syntax highlighting @import is at the bottom of this file
/**************/
/* BASE RULES */
/**************/
@import url('https://fonts.googleapis.com/css?family=Roboto');
html {
font-size: 100%;
}
body {
background: #fff;
font-family: 'FuturaPTLight';
color: #555;
line-height: 1.7;
font-weight: bold;
font-size: 15pt;
}
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 10px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'FuturaPTLight';
color: $darkerGray;
font-weight: bold;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0;
text-align: center;
@include mobile {
line-height: 1.4;
}
}
h1 {
font-size: 30px;
a {
color: inherit;
}
}
h2 {
font-size: 24px;
}
@media (min-width: 769px){
.post h2::before, .post h2::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 46px;
height: 1px;
background: rgb(192, 211, 218);
margin: 0px 30px;
}
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
color: $gray;
}
p {
margin: 15px 0;
}
/*.detailed .entry p:first-of-type:first-letter {
float: left;
margin: 0.13em 0.05em 0 -0.05em;
font-size: 3.333em;
line-height: 0.75em;
}*/
.share-box {
font-weight: bold;
color: #222;
}
a {
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover, &:active {
color: $blue;
}
}
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ul, ul ol, ul ul, ol ol {
margin: 0;
}
ul ul, ol ul {
list-style-type: circle;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
img {
max-width: 100%;
}
p > img {
text-align: center;
display: block;
margin: 0 auto;
}
// Fixes images in popup boxes from Google Translate
.gmnoprint img {
max-width: none;
}
.date {
font-style: italic;
color: $gray;
}
// Specify the color of the selection
::-moz-selection {
color: $black;
background: $lightGray;
}
::selection {
color: $black;
background: $lightGray;
}
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/*********************/
/* LAYOUT / SECTIONS */
/*********************/
//
// .masthead
//
.wrapper-masthead {
margin-bottom: 50px;
}
.masthead {
padding: 20px 0;
border-bottom: 1px solid $lightGray;
@include mobile {
text-align: center;
}
}
.site-avatar {
float: left;
width: 70px;
height: 70px;
margin-right: 15px;
@include mobile {
float: none;
display: block;
margin: 0 auto;
}
img {
border-radius: 5px;
}
}
.site-info {
float: left;
@include mobile {
float: none;
display: block;
margin: 0 auto;
}
}
.site-name {
margin: 0;
color: $darkGray;
cursor: pointer;
font-family: $helveticaNeue;
font-weight: 300;
font-size: 28px;
letter-spacing: 1px;
}
.site-description {
margin: -5px 0 0 0;
color: $gray;
font-size: 16px;
@include mobile {
margin: 3px 0;
}
}
nav {
float: right;
margin-top: 23px; // @TODO: Vertically middle align
font-family: $helveticaNeue;
font-size: 18px;
@include mobile {
float: none;
margin-top: 9px;
display: block;
font-size: 16px;
}
a {
margin-left: 20px;
color: $darkGray;
text-align: right;
font-weight: 300;
letter-spacing: 1px;
@include mobile {
margin: 0 10px;
color: $blue;
}
}
}
//
// .main
//
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lightGray;
}
.posts > .post:last-child {
padding-bottom: 1em;
border-bottom: none;
}
.post {
blockquote {
margin: 1.8em .8em;
/*border-left: 2px solid $gray;*/
padding: 0.1em 1em;
color: $gray;
font-size: 22px;
font-style: italic;
background-color: #ede1ff;
}
.you-may-like{
margin: 1.8em .8em;
/*border-left: 2px solid $gray;*/
padding: 0.1em 1em;
color: $gray;
font-size: 22px;
font-style: italic;
background-color: #ddffb5;;
}
.comments {
margin-top: 10px;
}
.read-more {
text-transform: uppercase;
font-size: 15px;
}
}
.wrapper-footer {
margin-top: 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: $lightGray;
}
footer {
padding: 20px 0;
text-align: center;
}
body:after {
background: linear-gradient(to right, #ffffff 0, #2196F3 33%, #E91E63 66%, #000 100%);
width: 100%;
height: 5px;
top: 0;
position: absolute;
left: 0;
content: '';
}
@font-face {
font-family: EBGaramond;
src: url(fonts/EBGaramond-Regular.ttf);
}
@font-face {
font-family: FuturaPTLight;
src: url(fonts/FuturaPTLight.otf);
}
#bar {
background: url(images/galaxy.jpg);
height: 7px;
background-size: cover;
background-position: left 60%;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
z-index: 1000;
}
.post h1{
font-family: 'FuturaPTLight';
text-align: center;
font-weight: bold;
font-kerning: auto;
font-feature-settings: "kern","liga","dlig","hlig","cswh";
line-height: 1.2;
}
.page h1{
font-family: 'FuturaPTLight';
text-align: center;
font-weight: bold;
font-kerning: auto;
font-feature-settings: "kern","liga","dlig","hlig","cswh";
line-height: 1.2;
}
.author_title{
text-align: center;
color: #939aa1;
letter-spacing: 2px;
}
.post_date{
text-align: center;
color: #939aa1;
}
.cd-container a {
color: #30434e;
text-decoration: none;
font-family: "Open Sans", sans-serif;
}
.cd-container img {
max-width: 100%;
}
.cd-container h1, .cd-container h2 {
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
border-radius: 10px;
}
.cd-timeline-img.cd-picture {
background: #75ce66;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
.chip {
display: inline-block;
height: 32px;
font-size: 14px;
font-weight: 500;
color: rgba(0,0,0,.6);
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: #e4e4e4;
margin-bottom: 5px;
margin-right: 5px;
}
.yellow.lighten-2 {
background-color: #efd3f9 !important;
}
#gh-latest{
font-size: 16px;
text-align: center;
}
.text-link {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}
//carbon ads
#carbonads {
--width: 180px;
--font-size: 14px;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
overflow: hidden;
max-width: 270px;
border-radius: 4px;
text-align: center;
border: dashed 1px #e6e6e6;
background-color: hsl(0, 0%, 98%);
font-size: var(--font-size);
line-height: 1.5;
width: 100%;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
.carbon-img {
display: block;
margin-bottom: 8px;
max-width: var(--width);
line-height: 1;
}
.carbon-img img {
display: block;
margin: 0 auto;
max-width: 130px !important;
width: var(--width);
height: auto;
float: left;
margin: 0;
}
.carbon-text {
display: block;
padding: 0 1em 8px;
max-width: 138px;
float: left;
text-align: left;
}
.carbon-poweredby {
display: block;
padding: 10px var(--font-size);
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600;
font-size: 9px;
line-height: 0;
}
.post-tags {
text-align: center;
line-height: 35px;
}
.post-tags a {
font-size: 14.5px;
padding: 2px 13px;
border: none;
background-color: #4CAF50;
border-radius: 50px;
color: #fff;
}
@media only screen and (min-width: 320px) and (max-width: 759px) {
#carbonads {
float: none;
margin: 0 auto;
max-width: 330px;
}
#carbonads span {
position: relative;
}
#carbonads > span {
max-width: none;
}
.carbon-img {
float: left;
margin: 0;
}
.carbon-img img {
max-width: 130px !important;
}
.carbon-text {
float: left;
margin-bottom: 0;
padding: 8px 20px;
text-align: left;
max-width: calc(100% - 130px - 3em);
}
.carbon-poweredby {
left: 130px;
bottom: 0;
display: block;
width: 100%;
}
}
.tlemail {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.subscribeBtn {
width: 30%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 11pt;
}
.tinyletterForm {
border: 1px solid #ccc;
padding: 3px;
text-align: center;
background: #ececec;
margin: 8px;
border-radius: 5px;
}
.btn-subscribe {
line-height: 20px;
text-decoration: none;
background: #00000015;
border: none;
font-size: 12px;
padding: 0px 7px;
display: inline-block;
border-radius: 4px;
position: relative;
top: -1px;
margin-left: 5px;
color: black;
}
.btn-subscribe:hover {
color: black;
}
.btn-subscribe > svg {
width: 21px;
height: 21px;
vertical-align: bottom;
margin: 0 -2px 0 -5px;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: #e9f0f5;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}
60% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}
60% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
//@import "highlights";
@import "darcula";
@import "svg-icons";