Fix/Change code block styling

source/css/main.css

@@ -134,7 +134,7 @@ code {
 }
 
 pre {
-  background: transparent;
+  background: transparent !important;
   padding: 20px 10px;
   margin: 40px 0;
   font-size: .95rem;

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;
@@ -31,18 +35,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;
 }
 
@@ -86,35 +91,31 @@ pre[class*="language-"].line-numbers > code {
 
 }
 
-	.line-numbers-rows > span {
+.line-numbers-rows > span {
-		pointer-events: none;
+	pointer-events: none;
-		display: block;
+	display: block;
-		counter-increment: linenumber;
+	counter-increment: linenumber;
-	}
+}
 
-		.line-numbers-rows > span:before {
+.line-numbers-rows > span:before {
-			content: counter(linenumber);
+	content: counter(linenumber);
-			color: #999;
+	color: #999;
-			display: block;
+	display: block;
-			padding-right: 0.8em;
+	padding-right: 0.8em;
-			text-align: right;
+	text-align: right;
-		}
+}
 
 .code-toolbar {
 	position: relative;
-	margin: 40px 0;
+	margin: var(--code-margin) 0;
-	padding: 20px 0;
+	padding: 20px;
-	border-top: 1px solid rgba(255, 255, 255, .1);
+	border: 1px solid rgba(255, 255, 255, .1);
-	border-bottom: 1px solid rgba(255, 255, 255, .1);
-
-	+ .code-toolbar {
-		border-top: 0;
-		margin-top: -40px;
-	}
 
+	+ .code-toolbar,
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {
@@ -126,10 +127,15 @@ pre[class*="language-"].line-numbers > code {
 	}
 }
 
+.highlight + .highlight .code-toolbar {
+	border-top: 0;
+	margin-top: calc(-1 * var(--code-margin));
+}
+
 div.code-toolbar > .toolbar {
 	position: absolute;
-	top: .3em;
+	top: 10px;
-	right: .2em;
+	right: 10px;
 	transition: opacity 0.3s ease-in-out;
 	opacity: 0;
 }
@@ -164,11 +170,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 +183,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;
 }