typography update

docs/assets/css/style.css

@@ -153,7 +153,6 @@ h5 {
 
 h1 {
   font-size: 4.209rem;
-  font-weight: 700;
 }
 
 h2 {
@@ -312,8 +311,11 @@ main article {
   padding: 1rem 27.1% 1rem 10.4%;
   width: 62.5%;
 }
-main article img {
+@media (max-width: 64em) {
-  max-width: 100%;
+  main article {
+    padding: 1rem;
+    width: calc(100% - 2rem);
+  }
 }
 
 a {
@@ -335,11 +337,6 @@ a {
           line-height: 1.5rem;
       }
 
-      pre,
-      code {
-          background: $code !important;
-      }
-
       blockquote,
       code,
       .doc-alert,
@@ -370,28 +367,6 @@ a {
           margin: $margin;
       }
 
-
-      blockquote {
-          background: $blockquote;
-          color: $on-blockquote;
-      }
-
-      // for url/links
-      // span,
-      a {
-          color: $accent;
-          cursor: pointer;
-          text-decoration: none;
-
-          &:hover {
-              filter: invert(.15);
-          }
-      }
-
-      img {
-          max-width: 100%;
-      }
-
       .doc-alert,
       .doc-info,
       .doc-warning,
@@ -462,5 +437,23 @@ a {
 .doc-typography blockquote p {
   margin: 0;
 }
+.doc-typography img {
+  max-width: 100%;
+}
+.doc-typography pre,
+.doc-typography code {
+  background: #101010 !important;
+}
+.doc-typography blockquote {
+  background: #181818;
+  color: #ccc;
+}
+.doc-typography code {
+  padding: 0.125rem 0.25rem;
+}
+.doc-typography blockquote,
+.doc-typography code {
+  border-radius: 0.125rem;
+}
 
 /*# sourceMappingURL=style.css.map */

docs/assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss"],"names":[],"mappings":"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","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/utils/theme.scss","../scss/style.scss","../scss/components/aki-button.scss","../scss/utils/elevation.scss","../scss/components/aki-card.scss","../scss/components/aki-divider.scss","../scss/components/aki-toolbar.scss"],"names":[],"mappings":"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","file":"style.css"}

docs/assets/scss/style.scss

@@ -46,7 +46,7 @@ h5 {
 h1 {
     // margin-top: 0;
     font-size: 4.209rem;
-    font-weight: 700;
+    // font-weight: 700;
 }
 
 h2 {
@@ -112,7 +112,7 @@ header {
             display: none;
         }
 
-        // TODO: Redo header media query
+        // TODO: Redo header media query (vertical res > 768px -> Dropdown)
         /*
         @media (max-width: #{$bp-medium}) {
             &.dropdown {
@@ -151,6 +151,7 @@ header {
     }
 }
 
+// TODO: media queries (@1024px -> article padding = 1rem; en dessous sidenav en mode toggle)
 main {
     display: flex;
     flex-direction: row;
@@ -240,8 +241,9 @@ main {
         padding: 1rem 27.1% 1rem 10.4%;
         width: 62.5%;
 
-        img {
+        @media (max-width: #{$bp-medium}) {
-            max-width: 100%;
+            padding: 1rem;
+            width: calc(100% - 2rem);
         }
     }
 }
@@ -291,6 +293,29 @@ a {
         }
     }
 
+    img {
+        max-width: 100%;
+    }
+
+    pre,
+    code {
+        background: $code !important;
+    }
+
+    blockquote {
+        background: $blockquote;
+        color: $on-blockquote;
+    }
+
+    code {
+        padding: .125rem .25rem;
+    }
+
+    blockquote,
+    code {
+        border-radius: $border-radius;
+    }
+
     /*
     p,
     pre ul,
@@ -304,11 +329,6 @@ a {
         line-height: 1.5rem;
     }
 
-    pre,
-    code {
-        background: $code !important;
-    }
-
     blockquote,
     code,
     .doc-alert,
@@ -339,28 +359,6 @@ a {
         margin: $margin;
     }
 
-
-    blockquote {
-        background: $blockquote;
-        color: $on-blockquote;
-    }
-
-    // for url/links
-    // span,
-    a {
-        color: $accent;
-        cursor: pointer;
-        text-decoration: none;
-
-        &:hover {
-            filter: invert(.15);
-        }
-    }
-
-    img {
-        max-width: 100%;
-    }
-
     .doc-alert,
     .doc-info,
     .doc-warning,