_sass/main.scss in adam-jekyll-0.1.0 vs _sass/main.scss in adam-jekyll-0.1.1

@@ -1,7 +1,24 @@
-/*@import url('https://fonts.googleapis.com/css?family=Inter&Crimson+Prodisplay=swap');*/
+/* Settings */
 
+$min_width: 320px;
+$max_width: 1200px;
+$min_font: 16px;
+$max_font: 24px;
+
+$text-color: #353535;
+$link-color: #3c6e71;
+$bg-color: #d9d9d9;
+$accent-color-1: #f3f4f4;
+$accent-color-2: #777777;
+
+$header-font: Inter, sans-serif;
+$body-font: 'Crimson Pro', serif;
+$code-font: 'JetBrains Mono', monospace, sans-serif;
+
+/* Responsive Text */
+
 @function strip-unit($value) {
   @return $value / ($value * 0 + 1);
 }
 
 @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
@@ -21,50 +38,131 @@
       }
     }
   }
 }
 
-$min_width: 320px;
-$max_width: 1200px;
-$min_font: 16px;
-$max_font: 24px;
-
-$text-color: #444;
-$bg-color: #EEE;
-
-$header-font: Inter, sans-serif;
-$body-font: 'Crimson Pro', serif;
-
 html {
     @include fluid-type($min_width, $max_width, $min_font, $max_font);
 }
 
 body{
     color: $text-color;
     background-color: $bg-color;
-    margin: 40px auto;
-    max-width: 650px;
-    line-height: 1.6em;
-    padding: 0;
     font-family: $body-font;
 }
 
 h1, h2, h3, h4, h5, h6 {
     font-family: $header-font;
 }
 
+p, h1, h2, h3, h4, h5, h6, nav, pre, ul, ol, table, blockquote, hr {
+    margin: 40px auto;
+    max-width: 650px;
+    padding: 0;
+}
+
+p {
+    line-height: 1.6em;
+}
+
+/* Navigation */
+
 nav {
     font-family: $header-font;
     font-weight: 800;
 }
 
+.current {
+    color: $text-color;
+}
+
+/* Links */
+
 a {
     text-decoration: none;
+    color: $link-color;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
-.current {
-    color: $text-color;
+/* CSS for Markdown */
+
+code {
+  font-family: $code-font;
+  font-size: .75em;
+  border: 1px solid $accent-color-2;
+  border-radius: .25rem;
+  padding: 0 .125rem;
+  background: $accent-color-1;
+}
+
+pre code {
+  display: block;
+  white-space: pre;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: scroll;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+blockquote {
+    border-left: 4px solid $accent-color-1;
+    padding: 0 15px;
+    color: $accent-color-2;
+}
+
+blockquote blockquote {
+    padding-right: 0;
+}
+
+hr {
+  border-color: $accent-color-2;
+}
+
+/* Tables */
+
+table {
+  border: 1px solid $accent-color-2;
+  /*margin: 1rem 0;*/
+}
+
+table tr:nth-child(2n) {
+  background: $accent-color-1;
+}
+
+thead {
+  background: $text-color;
+  color: $bg-color;
+  font-family: $header-font;
+}
+
+td, th {
+  padding: .35rem .7rem;
+  border: 1px solid $accent-color-1;
+}
+
+/* Scroll Indicator */
+
+/* Style the header: fixed position (always stay at the top) */
+.header {
+  position: fixed;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  background-color: $accent-color-1;
+}
+
+/* The progress container (grey background) */
+.progress-container {
+  width: 100%;
+  height: 8px;
+  background: #ccc;
+}
+
+/* The progress bar (scroll indicator) */
+.progress-bar {
+  height: 8px;
+  background: $accent-color-2;
+  width: 0%;
 }
\ No newline at end of file