Fix layout and code highlighting

source/css/header.css

@@ -43,6 +43,7 @@
 
     &__inner {
       display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin: 0;
       padding: 0;
@@ -50,6 +51,8 @@
       li {
         &:not(:last-of-type) {
           margin-right: 20px;
+          margin-bottom: 10px;
+          flex: 0 0 auto;
         }
       }
 

source/css/main.css

@@ -109,19 +109,20 @@ figure {
 code {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
   font-feature-settings: normal;
-  background: var(--background-secondary);
+  background: color-mod(var(--accent) a(20%));
+  color: var(--accent);
   padding: 1px 6px;
   margin: 0 2px;
-  border-radius: 5px;
   font-size: .95rem;
 }
 
 pre {
   background: transparent;
   padding: 20px;
-  border-radius: 8px;
   font-size: .95rem;
   overflow: auto;
+  border-top: 1px solid rgba(255, 255, 255, .1);
+	border-bottom: 1px solid rgba(255, 255, 255, .1);
 
   @media (--phone) {
     white-space: pre-wrap;
@@ -133,6 +134,7 @@ pre {
     margin: 0;
     padding: 0;
     font-size: inherit;
+    border: none;
   }
 }
 

source/css/prism.css

@@ -101,7 +101,7 @@ pre[class*="language-"].line-numbers > code {
 			text-align: right;
 		}
 
-div.code-toolbar {
+.code-toolbar {
 	position: relative;
 	margin: 40px 0;
 	padding: 20px 0;
@@ -117,6 +117,14 @@ div.code-toolbar {
 	+ .highlight .code-toolbar {
 		border-top: 0;
 	}
+
+	pre, code {
+		border: none;
+	}
+
+	code {
+		color: inherit;
+	}
 }
 
 div.code-toolbar > .toolbar {