From ea951ff325c0237c1c5e2c670aa6830e9dc04c60 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Sat, 24 Nov 2018 17:21:25 +1100
Subject: align markdown code styling

---
 scss/_browser.scss |  7 -------
 scss/_content.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 scss/main.scss     | 32 +-------------------------------
 3 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 scss/_content.scss

(limited to 'scss')

diff --git a/scss/_browser.scss b/scss/_browser.scss
index 9845ff3..8a04752 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -79,10 +79,3 @@
     }
   }
 }
-
-.content {
-  img, video {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
diff --git a/scss/_content.scss b/scss/_content.scss
new file mode 100644
index 0000000..b3468bd
--- /dev/null
+++ b/scss/_content.scss
@@ -0,0 +1,51 @@
+.content {
+  img, video, pre > code {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+
+    padding: 0 2em;
+    box-sizing: border-box;
+  }
+
+  pre > code {
+    @include left-border;
+    border-color: $gray-dark;
+
+    display: block;
+    border-radius: 6px;
+    margin: 0 2em;
+    padding: 1em;
+    white-space: pre-wrap;
+    overflow-x: auto;
+
+    background: #1d1f21;
+    color: #c5c8c6;
+  }
+
+  pre.dual-code {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2rem;
+
+    > code {
+      @include right-border(0.3rem);
+
+      flex: 1;
+      margin: 0;
+    }
+
+    > code + code {
+      @include left-border(0.3rem);
+    }
+  }
+
+  .example, .well {
+    @include left-border;
+
+    margin: 1rem 2rem;
+    padding: 1rem;
+    background: $gray-bright;
+    border-color: $gray-neutral;
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
index fe67631..c1e9d38 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -4,35 +4,5 @@
 @import 'header';
 @import 'footer';
 @import 'browser';
+@import 'content';
 @import 'canvasapp';
-
-pre > code.hljs {
-  @include left-border;
-  border-color: $gray-dark;
-}
-
-pre.dual-code {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 2rem;
-
-  > code.hljs {
-    @include right-border(0.3rem);
-
-    flex: 1;
-    margin: 0;
-  }
-
-  > code.hljs + code.hljs {
-    @include left-border(0.3rem);
-  }
-}
-
-.example, .well {
-  @include left-border;
-
-  margin: 1rem 2rem;
-  padding: 1rem;
-  background: $gray-bright;
-  border-color: $gray-neutral;
-}
-- 
cgit v1.2.3