cleanup formatting and docs (#247)

src/sass/_base.scss

@@ -358,14 +358,6 @@ img {
     border-radius: $border-radius;
   }
 
-  &__footer {
-    margin-top: $padding-32;
-
-    a:hover {
-      text-decoration: none;
-    }
-  }
-
   &__nav {
     &:hover {
       background-image: linear-gradient(var(--link-color), var(--link-color));
@@ -408,6 +400,38 @@ img {
       color: transparent;
     }
   }
+
+  &__figure {
+    padding: $padding-4;
+    margin: $padding-16 0;
+    background-color: var(--accent-color);
+    display: table;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+      background-color: var(--accent-color);
+      padding: 0 $padding-4 $padding-4;
+      text-align: center;
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  &__footer {
+    margin-top: $padding-32;
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 .gdoc-post {
@@ -545,7 +569,7 @@ img {
     line-height: 2em;
 
     &--row {
-      margin-right: 1em;
+      margin-right: $padding-16;
     }
   }
 

src/sass/_color_mode.scss

@@ -7,6 +7,8 @@
   --body-background: #{$body-background};
   --body-font-color: #{$body-font-color};
 
+  --mark-color: #{$mark-color};
+
   --button-background: #{lighten($main-color, 2)};
   --button-border-color: #{$main-color};
 
@@ -54,6 +56,8 @@
   --body-background: #{$body-background-dark};
   --body-font-color: #{lighten($body-background-dark, 60)};
 
+  --mark-color: #{$mark-color};
+
   --button-background: #{lighten($main-color, 2)};
   --button-border-color: #{$main-color};
 

src/sass/_defaults.scss

@@ -54,6 +54,7 @@ $container-max-width: 80rem !default;
 
 $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
+$mark-color: rgba(255, 171, 0, 1) !default;
 
 $body-background-dark: mix(
   invert($body-background, 75%),

src/sass/_markdown.scss

@@ -76,30 +76,6 @@
     border-radius: $border-radius;
   }
 
-  &__figure {
-    padding: $padding-4;
-    margin: $padding-16 0;
-    background-color: var(--accent-color);
-    display: table;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-
-    figcaption {
-      display: table-caption;
-      caption-side: bottom;
-      background-color: var(--accent-color);
-      padding: 0 $padding-4 $padding-4;
-      text-align: center;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-  }
-
   blockquote {
     margin: $padding-16 0;
     padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
@@ -115,10 +91,6 @@
     }
   }
 
-  .table-wrap {
-    overflow: auto;
-  }
-
   table:not(.lntable) {
     display: table;
     border-spacing: 0;
@@ -187,6 +159,10 @@
     width: 100%;
   }
 
+  mark {
+    background-color: var(--mark-color);
+  }
+
   &__align {
     &--left {
       h1,

src/sass/_mobile.scss

@@ -64,12 +64,6 @@
     flex-direction: column;
   }
 
-  .gdoc-footer {
-    &__item--row {
-      width: 100%;
-    }
-  }
-
   #menu-control:checked ~ main {
     .gdoc-nav nav,
     .gdoc-page {

src/sass/_utils.scss

@@ -57,6 +57,10 @@
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .no-wrap {
   white-space: nowrap;
 }
@@ -72,6 +76,10 @@
   overflow: hidden;
 }
 
+.table-wrap {
+  overflow: auto;
+}
+
 .badge-placeholder {
   display: inline-block;
   min-width: 4rem;