update single page styles

anparfenov · Jun 11, 2020 · 021c457 · 021c457
1 parent 90ba336
commit 021c457
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
@@ -12,37 +12,46 @@
     text-align: center;
   }
   h1{
-    font-size: 2.6rem;
+    font-size: 2.2rem;
     font-weight: bold;
-    margin: 1rem 0;
+    padding-top: 2.5rem;
+    margin-bottom: 1.5rem;
   }
   h2 {
-    font-size: 2.2rem;
+    font-size: 1.8rem;
     font-weight: bold;
-    margin: 0.825rem 0;
+    padding-top: 2.5rem;
+    margin-bottom: 1.2rem;
   }
   h3 {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
     font-weight: semibold;
-    margin: 0.825rem 0;
+    margin-top: 1.6rem;
+    margin-bottom: 1rem;
   }
   h4 {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     font-weight: semibold;
-    margin: 0.825rem 0;
+    margin-top: 1.6rem;
+    margin-bottom: 0.875rem;
   }
   h5 {
     font-size: 1rem;
-    margin: 0.825rem 0;
+    margin-top: 1rem;
+    margin-bottom: 0.625rem;
   }
   h6 {
-    font-size: 0.75rem;
-    margin: 0.825rem 0;
+    font-size: 0.825rem;
+    margin-top: 1rem;
+    margin-bottom: 0.625rem
   }
   h1,h2,h3,h4,h5,h6,p,code,blockquote,a,ul,ol,li {
     line-height: 1.4;
+    @media (min-width: $screen-sm) {
+      line-height: 1.5rem;
+    }
     @media (min-width: $screen-lg) {
-      line-height: 1.5;
+      line-height: 1.7;
     }
   }
   p, code, blockquote, a, table, pre,ul,ol,li {
@@ -52,7 +61,6 @@
     }
     @media (min-width: $screen-lg) {
       font-size: 1.125rem;
-      line-height: 1.5;
     }
   }
   p {
@@ -71,6 +79,9 @@
     background-color: var(--color-code-bg);
     color: var(--color-text-light);
   }
+  pre {
+    margin: 1rem 0;
+  }
   pre code {
     color: inherit;
     background-color: inherit;
@@ -80,10 +91,12 @@
   .highlight {
     box-shadow: 5px 5px var(--color-boxshadow);
     border: 1px solid var(--color-border);
+    margin: 1rem 0;
   }
   .highlight pre {
     padding: 1rem;
     overflow: auto;
+    margin: 0;
   }
   .highlight code {
     color: inherit;