Merge remote-tracking branch 'upstream/master'

source/css/main.css

@@ -29,29 +29,32 @@ body {
   }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.3;
 
-  &:not(first-child) {
-    margin-top: 40px;
+.headings--one-size {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.3;
+
+    &:not(first-child) {
+      margin-top: 40px;
+    }
   }
-}
 
-h1,
-h2,
-h3 {
-  font-size: 1.4rem;
-}
+  h1,
+  h2,
+  h3 {
+    font-size: 1.4rem;
+  }
 
-h4,
-h5,
-h6 {
-  font-size: 1.2rem;
+  h4,
+  h5,
+  h6 {
+    font-size: 1.2rem;
+  }
 }
 
 a {
@@ -131,7 +134,7 @@ code {
 }
 
 pre {
-  background: transparent;
+  background: transparent !important;
   padding: 20px 10px;
   margin: 40px 0;
   font-size: .95rem;

source/css/post.css

@@ -118,3 +118,14 @@
     }
   }
 }
+
+.hanchor {
+  color: color-mod(var(--accent) alpha(90%));
+  text-decoration: none;
+  margin-left: 10px;
+  visibility: hidden;
+}
+
+h1:hover a, h2:hover a, h3:hover a, h4:hover a {
+  visibility: visible;
+}

source/css/prism.css

@@ -6,6 +6,10 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
  * @author Rose Pritchard
  */
 
+:root {
+	--code-margin: 40px;
+}
+
 code[class*="language-"],
 pre[class*="language-"] {
 	background: none;
@@ -17,13 +21,7 @@ pre[class*="language-"] {
 	word-wrap: normal;
 	line-height: 1.5;
 
-	-moz-tab-size: 2;
-	-o-tab-size: 2;
 	tab-size: 2;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
 	hyphens: none;
 
 }
@@ -31,18 +29,19 @@ pre[class*="language-"] {
 /* Code blocks */
 pre[class*="language-"] {
 	margin: 0;
+	padding: 0;
 	overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	border-radius: 8px;
+	border-radius: 0;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: .1em;
-	border-radius: .3em;
+	border-radius: 0;
 	white-space: normal;
 }
 
@@ -77,44 +76,35 @@ pre[class*="language-"].line-numbers > code {
 	left: -3.8em;
 	width: 3em; /* works for line-numbers below 1000 lines */
 	letter-spacing: -1px;
-	border-right: 1px solid #999;
-
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
+	border-right: 1px solid color-mod(var(--accent) blend(#999 90%) a(20%));
 	user-select: none;
-
 }
 
-	.line-numbers-rows > span {
-		pointer-events: none;
-		display: block;
-		counter-increment: linenumber;
-	}
+.line-numbers-rows > span {
+	pointer-events: none;
+	display: block;
+	counter-increment: linenumber;
+}
 
-		.line-numbers-rows > span:before {
-			content: counter(linenumber);
-			color: #999;
-			display: block;
-			padding-right: 0.8em;
-			text-align: right;
-		}
+.line-numbers-rows > span:before {
+	content: counter(linenumber);
+	color: color-mod(var(--accent) blend(#999 90%) a(40%));
+	display: block;
+	padding-right: 0.8em;
+	text-align: right;
+}
 
 .code-toolbar {
 	position: relative;
-	margin: 40px 0;
-	padding: 20px 0;
-	border-top: 1px solid rgba(255, 255, 255, .1);
-	border-bottom: 1px solid rgba(255, 255, 255, .1);
-
-	+ .code-toolbar {
-		border-top: 0;
-		margin-top: -40px;
-	}
+	margin: var(--code-margin) 0;
+	padding: 20px;
+	border: 1px solid rgba(255, 255, 255, .1);
 
+	+ .code-toolbar,
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {
@@ -122,14 +112,20 @@ pre[class*="language-"].line-numbers > code {
 	}
 
 	code {
+		display: block;
 		color: inherit;
 	}
 }
 
+.highlight + .highlight .code-toolbar {
+	border-top: 0;
+	margin-top: calc(-1 * var(--code-margin));
+}
+
 div.code-toolbar > .toolbar {
 	position: absolute;
-	top: .3em;
-	right: .2em;
+	top: 10px;
+	right: 10px;
 	transition: opacity 0.3s ease-in-out;
 	opacity: 0;
 }
@@ -154,9 +150,7 @@ div.code-toolbar > .toolbar button {
 	line-height: normal;
 	overflow: visible;
 	padding: 0;
-	-webkit-user-select: none; /* for button */
-	-moz-user-select: none;
-	-ms-user-select: none;
+	user-select: none;
 }
 
 div.code-toolbar > .toolbar a,
@@ -164,11 +158,11 @@ div.code-toolbar > .toolbar button,
 div.code-toolbar > .toolbar span {
 	color: #bbb;
 	font-size: .8em;
-	padding: 0 .5em;
+	padding: 10px;
 	background: #f5f2f0;
 	background: rgba(224, 224, 224, 0.2);
 	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
-	border-radius: .5em;
+	border-radius: 0;
 }
 
 div.code-toolbar > .toolbar a:hover,
@@ -177,7 +171,6 @@ div.code-toolbar > .toolbar button:hover,
 div.code-toolbar > .toolbar button:focus,
 div.code-toolbar > .toolbar span:hover,
 div.code-toolbar > .toolbar span:focus {
-	color: inherit;
 	text-decoration: none;
 }
 
@@ -189,15 +182,10 @@ div.code-toolbar > .toolbar span:focus {
 	letter-spacing: -1px;
 	margin-right: 1em;
 	pointer-events: none;
-
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
 
 .command-line-prompt > span:before {
-	color: #999;
 	content: ' ';
 	display: block;
 	padding-right: 0.8em;

source/css/syntax.css

@@ -31,7 +31,8 @@ code.language-scss,
 .token.property,
 .token.function,
 code.language-javascript,
-code.language-html {
+code.language-html,
+.command-line-prompt > span:before {
   color: color-mod(var(--accent) blend(#999 90%));
 }
 
@@ -54,18 +55,15 @@ code.language-html {
 
 pre[data-line] {
   position: relative;
-  padding: 1em 0 1em 3em;
 }
 
 .line-highlight {
   position: absolute;
   left: 0;
   right: 0;
-  padding: inherit 0;
-  margin-top: 1em;
-  /* Same as .prism’s padding-top */
-  background: hsla(24, 20%, 50%, .08);
-  background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
+  padding: 0;
+  margin: 0;
+  background: color-mod(var(--accent) blend(#999 90%) a(8%));
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -75,7 +73,7 @@ pre[data-line] {
 .line-highlight[data-end]:after {
   content: attr(data-start);
   position: absolute;
-  top: .4em;
+  /* top: .4em; */
   left: .6em;
   min-width: 1em;
   padding: 0 .5em;