style.scss

---
---

//
// IMPORTS
//

@import "reset";
@import "variables";
// Syntax highlighting @import is at the bottom of this file

/**************/
/* BASE RULES */
/**************/

html {
	font-size: 100%;
}

body {
	background: $main-background-color;
	font: 18px/1.4 $main-text-font;
	color: $main-text-color;
	scrollbar-width: thin;
	font-size: 16px;
}

::-webkit-scrollbar-track {
	background: none;
}

::-webkit-scrollbar-corner {
	background: none;
}

::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

::-webkit-scrollbar-thumb {
	background: $tertiary-dark;
	border-radius: 14px;
}

.container {
	margin: 0 auto;
	max-width: 740px;
	padding: 0 10px;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $main-titles-font;
	color: $subheader-text-color;
	font-weight: bold;

	line-height: 1.7;
	margin: 1em 0 15px;
	padding: 0;

	@include mobile {
		line-height: 1.4;
	}
	a {
		color: inherit;
	}
}

h1 {
	color: $header-text-color;
	font-size: 30px;
}

h2 {
	color: $header-text-color;
	font-size: 24px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

p {
	margin: 15px 0;
}

a code,
a {
	color: $link-text-color;
	text-decoration: none;
	cursor: pointer;
	&:hover,
	&:active {
		color: $hover-link-color;
	}
}

img {
	border-radius: 5px;
}

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%;
}

// Fixes images in popup boxes from Google Translate
.gmnoprint img {
	max-width: none;
}

.date {
	display: inline;
	font-style: italic;
	color: $post-date-text-color;
}

.shares {
	display: inline;
	margin-bottom: 10px;
}

.share {
	padding: 4px 9px 6px 9px;
	font-size: smaller;
	margin-left: 4px;
	font-weight: 500;
	border-radius: 9999px;
	color: $white;
	background-color: $tertiary-dark;
	text-align: center;
}

.share:hover {
	color: $white;
	background-color: $primary-transparent;
}

.twitter-button {
	padding-left: 30px;
	// cspell:disable-next-line
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
	background-color: #1d9bf0;
	background-repeat: no-repeat;
	background-position: 15% 50%;
	background-size: 18px;
}

.twitter-button:hover {
	background-color: #0c7abf;
}

// 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 $post-separator-color;

	@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: 0;
	}
}

.site-info {
	float: left;

	@include mobile {
		float: none;
		display: block;
		margin: 0 auto;
	}
}

.site-name {
	margin: 0;
	color: $site-name-text-color;
	cursor: pointer;
	font-family: $main-titles-font;
	font-weight: 300;
	font-size: 28px;
	letter-spacing: 1px;
}

.site-description {
	margin: -5px 0 0 0;
	color: $site-description-text-color;
	font-size: 16px;

	@include mobile {
		margin: 3px 0;
	}
}

nav {
	float: right;
	margin-top: 22px; // @TODO: Vertically middle align
	font-family: $main-titles-font;
	font-size: 18px;

	@include mobile {
		float: none;
		margin-top: 9px;
		display: block;
		font-size: 16px;
	}

	a {
		margin-left: 20px;
		color: $nav-links-text-color;
		text-align: right;
		font-weight: 300;
		letter-spacing: 1px;

		@include mobile {
			margin: 0 10px;
			color: $link-text-color;
		}
	}
}

//
// .main
//

.posts > .post {
	padding-bottom: 2em;
	border-bottom: 1px solid $post-separator-color;
}

.posts > .post:last-child {
	padding-bottom: 1em;
	border-bottom: none;
}

.post {
	blockquote {
		margin: 1.8em 0.8em;
		border-left: 2px solid $blockquote-text-color;
		padding: 0.1em 1em;
		color: $blockquote-text-color;
		font-size: 18px;
		font-style: italic;
	}

	.comments {
		margin-top: 10px;
	}

	.read-more {
		line-height: 200%;
		text-transform: uppercase;
		font-size: 15px;
	}
}

.wrapper-footer {
	margin-top: 50px;
	margin-bottom: 20px;
	border-top: 1px solid $footer-banner-border-color;
	border-bottom: 1px solid $footer-banner-border-color;
	background-color: $footer-banner-background-color;
}

footer {
	padding: 20px 0;
	text-align: center;
}

// 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 "svg-icons";