Add aside styles

site/css/dark.scss

@@ -7,6 +7,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);
@@ -31,6 +34,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);

site/css/light.scss

@@ -7,6 +7,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);
@@ -31,6 +34,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);

site/css/main.scss

@@ -1,9 +1,13 @@
 <%- include("normalize.css") %>
 <%- include("syntax-highlighting.css") %>
 
+$light-accent-color: #0638d0;
+$dark-accent-color: #f9c72f;
+
 :root {
-	--light-accent-color: #0638d0;
+	// Theme colors
-	--dark-accent-color: #f9c72f;
+	--light-accent-color: #{$light-accent-color};
+	--dark-accent-color: #{$dark-accent-color};
 	--light-content-background-color: white;
 	--dark-content-background-color: #111;
 	--light-shadow-color: #f7f7f7;
@@ -17,6 +21,11 @@
 	--light-content-text-color: #222;
 	--dark-content-text-color: #ddd;
 
+	--light-aside-background: #{lighten($light-accent-color, 50%)};
+	--dark-aside-background: #{darken($dark-accent-color, 50%)};
+	--light-aside-border: #{darken($light-accent-color, 10%)};
+	--dark-aside-border: #{darken($dark-accent-color, 10%)};
+
 	// Syntax highlighting
 	--light-atom-base: #fafafa;
 	--dark-atom-base: #282c34;
@@ -42,6 +51,11 @@
 	--dark-atom-hue-6: #d19a66;
 	--light-atom-hue-6-2: #c18401;
 	--dark-atom-hue-6-2: #e6c07b;
+
+	// Fonts
+	--ui-font: Avenir, Lucida Grande, Arial, sans-serif;
+	--content-font: Charter, Georgia, serif;
+	--monospace-font: SF Mono, monospace;
 }
 .theme-light {
 	--accent-color: var(--light-accent-color);
@@ -52,6 +66,9 @@
 	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
 	--content-text-color: var(--light-content-text-color);
 
+	--aside-background: var(--light-aside-background);
+	--aside-border: var(--light-aside-border);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);
@@ -75,6 +92,9 @@
 	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
 	--content-text-color: var(--dark-content-text-color);
 
+	--aside-background: var(--dark-aside-background);
+	--aside-border: var(--dark-aside-border);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);
@@ -90,15 +110,10 @@
 	--atom-hue-6-2: var(--dark-atom-hue-6-2);
 }
 
-// Fonts
-$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
-$serif: Charter, Georgia, serif;
-$monospace: SF Mono, monospace;
-
 // General
 html {
 	background-color: var(--content-background-color);
-	font-family: $sansSerif;
+	font-family: var(--ui-font);
 	font-size: 16px;
 	line-height: 1.6;
 	color: var(--ui-text-color);
@@ -145,7 +160,7 @@ article {
 
 		&::before {
 			content: "#";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--accent-color);
 			user-select: none;
 		}
@@ -175,15 +190,16 @@ article {
 	}
 
 	.article-content {
-		font-family: $serif;
+		position: relative;
+		font-family: var(--content-font);
 		font-size: 1.25rem;
 		word-wrap: break-word;
 
 		h1, h2, h3, h4, h5, h6 {
-			font-family: $sansSerif;
+			font-family: var(--ui-font);
 
 			.header-anchor {
-				font-family: $monospace;
+				font-family: var(--monospace-font);
 				color: var(--accent-color);
 				user-select: none;
 				text-decoration: none;
@@ -208,6 +224,22 @@ article {
 			word-break: break-all;
 		}
 
+		aside {
+			background-color: var(--aside-background);
+			border: 1px solid var(--aside-border);
+			padding: 15px;
+			font-size: 1rem;
+			width: 50%;
+			position: absolute;
+			left: 100%;
+			margin-left: 15px;
+			box-sizing: border-box;
+			transform: translateY(-50%);
+
+			p:first-child { margin-top: 0; }
+			p:last-child { margin-bottom: 0; }
+		}
+
 		// Markdown decorations
 		@media screen and (min-width: 768px) {
 			a {
@@ -216,7 +248,7 @@ article {
 				&::after { content: "](" attr(data-link) ")"; word-wrap: break-word; }
 				&::before, &::after {
 					color: var(--secondary-ui-text-color);
-					font-family: $monospace;
+					font-family: var(--monospace-font);
 					font-size: 0.75em;
 				}
 			}
@@ -233,7 +265,7 @@ article {
 		}
 		code::before, code::after {
 			content: "`";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 		pre code::before,
@@ -244,12 +276,12 @@ article {
 		}
 		strong::before, strong::after {
 			content: "**";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 		em::before, em::after {
 			content: "_";
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: var(--secondary-ui-text-color);
 		}
 	}
@@ -394,7 +426,7 @@ a {
 			position: absolute;
 			top: -0.15em;
 			transition: 0.3s ease all;
-			font-family: $monospace;
+			font-family: var(--monospace-font);
 			color: transparent;
 
 			&:first-child {
@@ -430,11 +462,13 @@ pre {
 	tab-size: 4;
 
 	word-wrap: normal;
+
+	font-family: var(--monospace-font);
 }
 
-pre, code {
+code {
-	font-family: $monospace;
+	font-family: var(--monospace-font);
-	font-size: 1rem;
+	font-size: 0.8em;
 }
 
 img {
@@ -447,7 +481,7 @@ figure {
 	margin: 0;
 
 	figcaption {
-		font-family: $sansSerif;
+		font-family: var(--ui-font);
 		font-size: 1rem;
 		font-style: italic;
 		color: var(--secondary-ui-text-color);
@@ -671,3 +705,12 @@ figure {
 		max-width: 720px;
 	}
 }
+
+@media (max-width: 1455px) {
+	article .article-content aside {
+		position: initial;
+		width: 100%;
+		margin: 0;
+		transform: unset;
+	}
+}