Fix styling issues on phones/small screens

1 files changed, 19 insertions, 23 deletions

diff --git a/assets/scss/web/_blog.scss b/assets/scss/web/_blog.scss
index 0eac85f..7cfb522 100644
--- a/assets/scss/web/_blog.scss
+++ b/assets/scss/web/_blog.scss
@@ -28,37 +28,33 @@
     border-left-width: 4px;
     border-left-style: solid;
   }
-  pre {
-    font-size: 1rem;
-  }
-
-  div.highlight {
-    line-height: 1.5;
-  }
 
+  // Code (not only code blocks)
   code {
     opacity: 0.5;
-
-    &.language-ascii {
-      line-height: 1
-    }
-
-    > span {
-      margin-left: 16px;
-      margin-right: 16px;
-      &:first-child {
-        padding-top: 8px;
-      }
-      &:last-child {
-        padding-bottom: 8px;
-      }
-    }
   }
 
+  // Code-block highlighting
   pre {
+    font-size: 14px;
+    overflow: auto;
     opacity: 1;
-    code {
+
+    > code {
       opacity: 1;
+
+      > span {
+        height: 1.1rem; // for some reason, the default is messed up (3rd line is always higher value)
+
+        margin-left: 16px;
+        margin-right: 16px;
+        &:first-child {
+          padding-top: 8px;
+        }
+        &:last-child {
+          padding-bottom: 8px;
+        }
+      }
     }
   }
 }