Add variable for fonts

2020-11-27 15:16:19 +01:00
parent c0fd4c5805
commit 7944704b69
21 changed files with 430 additions and 398 deletions
--- a/scss/partials/_aside.scss
+++ b/scss/partials/_aside.scss
@@ -1,7 +1,7 @@
 .aside {
-    padding-left: .5rem;
-    margin-left: .5rem;
-    border-left: 5px solid $grey;
+    padding-left: 1.0em;
+    margin-left: 0.5em;
+    border-left: 2px solid $grey;

    // For very large screens, put it on the right side
    @media (min-width: 1200px) {
@@ -10,7 +10,7 @@
    }

    > p {
-        margin: .5rem;
+        margin: 0.2em;
        font-size: 80%;
    }
 }
--- a/scss/partials/_base.scss
+++ b/scss/partials/_base.scss
@@ -7,17 +7,17 @@ html {
 }

 body {
-    background: $color-background-outside; // Outside Background
+    background: $color-background;
    color: $color-text;
-    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
-    font-weight: normal;
+    font-family: $sans-serif;
+    font-weight: $normal;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
 }

 #content {
-    background: $color-background; // Content Background
+    background: $color-background-light;
    height: 100%;
    min-height: 100%;
    margin-left: $toc-width;
@@ -42,13 +42,13 @@ a{
 }

 p {
-    font-size:16px;
-    line-height:24px;
-    margin:0 0 1.5em 0;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 0 1.5em 0;
 }

 b,strong {
-    font-weight:bold;
+    font-weight: $bold;
 }

 i {
@@ -62,8 +62,8 @@ i {
 // Inline Code
 code {
    background: $white;
-    border:solid 1px #e1e4e5;
-    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+    border: solid 1px #e1e4e5;
+    font-family: $mono;
    font-size:75%;
    max-width:100%;
    overflow-x:auto;
@@ -90,7 +90,7 @@ blockquote {

 // Subscripts and Superscripts
 sub, sup {
-    font-size:0.6em;
+    font-size: 0.6em;
    line-height:0;
    position:relative;
    vertical-align:baseline;
@@ -103,12 +103,12 @@ sub{ bottom:-0.25em; }
 mark{
    background:#ff0;
    color:#000;
-    font-style:italic;
-    font-weight:bold;
+    font-style: italic;
+    font-weight: $bold;
 }

 small{
-    font-size:85%;
+    font-size: 85%;
 }

 img{
@@ -126,7 +126,7 @@ label{
    display:block;
    margin:0 0 0.3125em 0;
    color:#333;
-    font-size:90%;
+    font-size: 90%;
 }

 legend{
@@ -139,7 +139,7 @@ legend{
    padding:0;
    white-space:normal;
    margin-bottom:24px;
-    font-size:150%;
+    font-size: 150%;
 }

 .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
@@ -203,7 +203,7 @@ hr{
 #content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{
    visibility:visible;
    content:"";
-    font-family:FontAwesome;
+    font-family: $fa;
    display:inline-block;
 }

@@ -231,7 +231,7 @@ hr{

 //     .sidebar-title{
 //         display:block;
-//         font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
+//         font-family: $sans-serif
 //         font-weight:bold;
 //         background:#e1e4e5;
 //         padding:6px 12px;
@@ -245,7 +245,7 @@ hr{
 #content .highlighted{
    background:#F1C40F;
    display:inline-block;
-    font-weight:bold;
+    font-weight: $bold;
    padding:0 6px;
 }

@@ -269,20 +269,9 @@ span[id*='MathJax-Span']{
    -webkit-font-smoothing:antialiased;
 }

-/*!
- *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{
-    font-family:'FontAwesome';
-    src:url("../fonts/fontawesome-webfont.eot?v=4.1.0");
-    src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
-    font-weight:normal;
-    font-style:normal;
-}
-
 .fa,.icon{
    display:inline-block;
-    font-family:FontAwesome;
+    font-family: $fa;
    font-style:normal;
    font-weight:normal;
    line-height:1;
--- a/scss/partials/_bibliography.scss
+++ b/scss/partials/_bibliography.scss
@@ -5,4 +5,5 @@ div.csl-bib-body {
    .csl-entry {
        margin-bottom: 1em;
    }
+
 }
--- a/scss/partials/_boxes.scss
+++ b/scss/partials/_boxes.scss
@@ -31,7 +31,7 @@ $types: (
            margin-bottom: 0px;

            &:before{
-                font-family:FontAwesome;
+                font-family: $fa;
                content: map-get($map, icon);
            }
        }
@@ -39,22 +39,18 @@ $types: (
 }

 #content .admonition-title{
-    color:#fff;
-    font-weight:bold;
-    display:block;
-    color:#fff;
-    padding:6px 12px;
-    margin-bottom:0px;
-    font-family:inherit;
-    -webkit-font-smoothing:antialiased;
+    color: $color-block-title;
+    font-weight: $bold;
+    display: block;
+    padding: 6px 12px;
+    margin-bottom: 0px;

    &:before{
-        margin-right:4px;
-        font-family:"FontAwesome";
-        display:inline-block;
-        font-style:normal;
-        font-weight:normal;
-        line-height:1;
-        text-decoration:inherit;
+        margin-right: 8px;
+        font-family: $fa;
+        display: inline-block;
+        font-weight: $normal;
+        line-height: 1;
+        text-decoration: inherit;
    }
 }
--- a/scss/partials/_codes.scss
+++ b/scss/partials/_codes.scss
@@ -1,14 +1,14 @@
@mixin src-box {
    display: inline;
    position: absolute;
-    color: #808080;
-    background-color: white;
+    color: $color-text-shadow;
+    background-color: $white;
    padding: 0px 4px;
-    border: 1px solid #d0d0d0;
-    font-size:10px;
+    border: 1px solid $color-shadow;
+    font-size: 10px;
    top: -9px;
    z-index: 10;
-    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+    font-family: $mono;
 }

 // Div that containst the code
@@ -21,11 +21,15 @@
    label {
        text-align: center;
        cursor: text;
+        font-size: 0.85em;
+        font-family: $serif;
+        font-style: italic;
+        color: $color-caption;

        // Listing num
        .listing-number {
-            font-weight: bold;
-            color: #343131;
+            font-weight: $bold;
+            color: $color-caption-num;
        }
    }

@@ -38,7 +42,7 @@

        // When button is clicked
        &.src-copied {
-            color: $white;
+            color: $color-text-invert;
            background-color: $color-primary;
        }
    }
@@ -47,13 +51,13 @@
    > pre {
        position: relative;
        overflow: visible;
-        border:1px solid #e1e4e5;
-        background:#fff;
-        display:block;
-        font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
-        font-size:12px;
-        line-height:1.5;
-        padding:12px;
+        border:1px solid $color-shadow;
+        background: $white;
+        display: block;
+        font-family: $mono;
+        font-size: 12px;
+        line-height: 1.5;
+        padding: 12px;
        margin-bottom: 24px;
        white-space: pre-wrap; // Wrap long Line

@@ -80,13 +84,14 @@
 pre {
    &.example {
        position: relative;
-        background:#f3f6f6;
-        border:1px solid #e1e4e5;
-        color:#404040;
+        background: $color-background;
+        border: 1px solid $color-shadow;
+        color: $color-text;
        font-size: 12px;
        line-height: 1.5;
-        margin-bottom:24px;
-        padding:12px;
+        margin-bottom: 24px;
+        padding: 12px;
+        font-family: $mono;

        //
        &:before {
--- a/scss/partials/_colors.scss
+++ b/scss/partials/_colors.scss
@@ -35,19 +35,29 @@ $vivid-orange: adjust-color($orange, $saturation: 20%);
 // main color palette
 $color-primary:             $blue;
 $color-primary-background:  adjust-color($blue, $lightness: -30%);
-// $color-secondary:           $bouquet;
+$color-secondary:           $green;
 // $color-accent:              $patina;
-// $color-shadow:              rgba($black, .125);
-// $color-note:                #666;
+$color-shadow:              hsl(195, 7%, 89%);
+$color-shadow-light:        hsl(195, 7%, 95%);
+// $color-note:                hsl(195, 7%, 99%);


 // Common colors
-$color-background:          #fcfcfc;
-$color-background-outside:  #edf0f2;
+$color-background:             hsl(204, 16%, 94%);
+$color-background-light:       hsl(0, 0%, 99%);
+$color-background-med:         hsl(0, 0%, 40%);
+$color-background-dark:        hsl(0, 0%, 20%);
+$color-background-obscur:      hsl(0, 0%, 12%);
 // $color-background-shade:    $iron;
 // $color-background-invert:   $hopbush;
-$color-text:                #404040;
-// $color-text-weak:           $regent-grey;
+//
+$color-text:                  hsl(0, 0%, 25%);
+$color-text-invert:           hsl(0, 0%, 99%);
+$color-text-shadow:           hsl(0, 0%, 65%);
+$color-caption:               $color-text;
+$color-caption-num:           $dark-blue;
+$color-block-title:           $color-text-invert;
+
 // $color-text-strong:         $midnight-blue;
 // $color-text-heading:        $regent-grey;
 // $color-text-invert:         rgba($color-background, .75);
--- a/scss/partials/_copyright.scss
+++ b/scss/partials/_copyright.scss
@@ -6,7 +6,7 @@
    color:#fcfcfc;
    background:#1f1d1d;
    border-top:solid 10px #343131;
-    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+    font-family: $serif;
    font-size: 90%;
    z-index:400;
    padding:12px;
--- a/scss/partials/_details.scss
+++ b/scss/partials/_details.scss
@@ -1,6 +1,6 @@
 details {
-    background: #fbfbfb;
-    border: 1px solid  #c9c9c9;
+    background: $color-background;
+    border: 1px solid $color-background-med;
    border-radius: 3px;
    margin-bottom: 1.0em;
    padding: 12px 12px 0 12px;
@@ -12,15 +12,16 @@ details {

    summary {
        outline: 0;
-        color: #c9c9c9;
+        color: $color-background-med;
        padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
        cursor: pointer;

+        // Click to unfold button
        &::after {
            font-size: 0.85em;
-            color: #c9c9c9;
+            color: $color-background-med;
            float: right;
            padding-right: 0.5em;
            content: "Click to fold/unfold";
--- a/scss/partials/_figures.scss
+++ b/scss/partials/_figures.scss
@@ -3,9 +3,10 @@
    margin-bottom:24px;

    p {
-        color:#000;
-        font:italic 85%/1 arial,sans-serif;
-        padding:1em 0;
+        color: $color-caption;
+        font-size: 0.85em;
+        font-family: $serif;
+        font-style: italic;
        text-align: center;
        margin: 0;
    }
@@ -14,11 +15,12 @@
        max-width:100%;
        display: block;
        margin: auto;
+        padding-bottom: 0.5em;
    }

    .figure-number {
-        font-weight: bold;
-        color: #343131;
+        font-weight: $bold;
+        color: $color-caption-num;
    }
 }

--- a/scss/partials/_fonts.scss
+++ b/scss/partials/_fonts.scss
@@ -1,2 +1,20 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
+// Sans Serif Font
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Serif Font
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// MonoSpace Font
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Font Awesome
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
+
+$sans-serif: Roboto, sans-serif;
+$serif: Merriweather, Georgia, "Times New Roman", serif;
+$mono: "Source Code Pro", monospace;
+$fa: FontAwesome;
+
+$light: 300;
+$normal: 400;
+$bold: 700;
--- a/scss/partials/_footnotes.scss
+++ b/scss/partials/_footnotes.scss
@@ -3,7 +3,7 @@ sup{
    a.footref, a.footnum{
        color: #2980b9;
        font-size: 12px;
-        font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+        font-family: $sans-serif;

        &:before{ content:"["; }
        &:after{  content:"]"; }
@@ -36,7 +36,7 @@ sup{
            p {
                color: #999;
                font-size: 90%;
-                font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+                font-family: $sans-serif;
                padding: 8px;
                line-height: 1.25em;
                margin: 0;
--- a/scss/partials/_headlines.scss
+++ b/scss/partials/_headlines.scss
@@ -1,7 +1,7 @@
 .title {
-    font-size:175%;
+    font-size: 175%;
    margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
    text-align: center;

    .subtitle{
@@ -11,20 +11,20 @@


 h1,h2,h3,h4,h5,h6 {
-    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
+    font-family: $sans-serif;
 }

 h1{
    font-size:175%;
    margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
    text-align: center;
 }

 h2{
    font-size:150%;
    margin-bottom: 1em;
-    font-weight:700;
+    font-weight: $bold;
 }

 h3{
@@ -36,12 +36,12 @@ h4{
    font-size:115%;
    margin-bottom: 0.5em;
    color:#2980B9;
-    font-weight:300;
+    font-weight: $light;
 }

 h5{
    font-size:110%;
    margin-bottom: 0.5em;
    color:#2980B9;
-    font-weight:300;
+    font-weight:light;
 }
--- a/scss/partials/_htmlize.scss
+++ b/scss/partials/_htmlize.scss
@@ -1,11 +1,12 @@
 .org-bold {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-bold-italic {
-    font-weight: bold; font-style: italic;
+    font-weight: $bold;
+    font-style: italic;
 }
 .org-buffer-menu-buffer {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-builtin {
    color: #7a378b;
@@ -41,7 +42,7 @@
    color: #008b8b;
 }
 .org-comint-highlight-input {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-comint-highlight-prompt {
    color: #00008b;
@@ -53,7 +54,7 @@
    color: #000000; background-color: #ffffff;
 }
 .org-completions-first-difference {
-    font-weight: bold;
+    font-weight: $bold;
 }
 .org-diary {
    color: #ff0000;
@@ -62,7 +63,7 @@
    color: #7f7f7f;
 }
 .org-diff-file-header {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight: $bold;
 }
 .org-diff-function {
    background-color: #cccccc;
@@ -74,10 +75,10 @@
    background-color: #cccccc;
 }
 .org-diff-index {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight:s$bold;
 }
 .org-diff-nonexistent {
-    background-color: #b3b3b3; font-weight: bold;
+    background-color: #b3b3b3; font-weight:s$bold;
 }
 .org-diff-refine-change {
    background-color: #d9d9d9;
@@ -86,7 +87,7 @@
    color: #0000ff;
 }
 .org-dired-flagged {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-dired-header {
    color: #228b22;
@@ -98,7 +99,7 @@
    color: #008b8b;
 }
 .org-dired-marked {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-dired-perm-write {
    color: #b22222;
@@ -107,7 +108,7 @@
    color: #a020f0;
 }
 .org-dired-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-doc {
    color: #8b2252;
@@ -119,10 +120,10 @@
    color: #7f7f7f;
 }
 .org-flyspell-duplicate {
-    color: #cdad00; font-weight: bold; text-decoration: underline;
+    color: #cdad00; font-weight:s$bold; text-decoration: underline;
 }
 .org-flyspell-incorrect {
-    color: #ff4500; font-weight: bold; text-decoration: underline;
+    color: #ff4500; font-weight:s$bold; text-decoration: underline;
 }
 .org-fringe {
    background-color: #f2f2f2;
@@ -194,13 +195,13 @@
    color: #b22222;
 }
 .org-org-checkbox {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-org-checkbox-statistics-done {
-    color: #228b22; font-weight: bold;
+    color: #228b22; font-weight:s$bold;
 }
 .org-org-checkbox-statistics-todo {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-org-clock-overlay {
    background-color: #ffff00;
@@ -212,7 +213,7 @@
    background-color: #e5e5e5;
 }
 .org-org-column-title {
-    background-color: #e5e5e5; font-weight: bold; text-decoration: underline;
+    background-color: #e5e5e5; font-weight:s$bold; text-decoration: underline;
 }
 .org-org-date {
    color: #a020f0; text-decoration: underline;
@@ -224,10 +225,10 @@
    color: #7f7f7f;
 }
 .org-org-document-title {
-    color: #191970; font-size: 144%; font-weight: bold;
+    color: #191970; font-size: 144%; font-weight:s$bold;
 }
 .org-org-done {
-    color: #228b22; font-weight: bold;
+    color: #228b22; font-weight:s$bold;
 }
 .org-org-drawer {
    color: #0000ff;
@@ -308,7 +309,7 @@
    color: #0000ff;
 }
 .org-org-tag {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-org-target {
    text-decoration: underline;
@@ -317,7 +318,7 @@
    color: #b8860b;
 }
 .org-org-todo {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-org-upcoming-deadline {
    color: #b22222;
@@ -329,7 +330,7 @@
    color: #7f7f7f;
 }
 .org-org-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-outline-1 {
    color: #0000ff;
@@ -362,10 +363,10 @@
    color: #b0e2ff; background-color: #cd00cd;
 }
 .org-regexp-grouping-backslash {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-regexp-grouping-construct {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-region {
    background-color: #eedc82;
@@ -395,10 +396,10 @@
    text-decoration: underline;
 }
 .org-warning {
-    color: #ff0000; font-weight: bold;
+    color: #ff0000; font-weight:s$bold;
 }
 .org-widget-button {
-    font-weight: bold;
+    font-weight:s$bold;
 }
 .org-widget-button-pressed {
    color: #ff0000;
--- a/scss/partials/_lists.scss
+++ b/scss/partials/_lists.scss
@@ -25,8 +25,8 @@ dl {
    margin-bottom: 1em;

    dt {
-        font-weight:bold;
-        vertical-align:top;
+        font-weight: $bold;
+        vertical-align: top;
    }

    dd {
--- a/scss/partials/_org.scss
+++ b/scss/partials/_org.scss
@@ -19,7 +19,7 @@
 // Priority
 .priority {
    color: $vivid-orange;
-    font-family: Lucida Console,monospace;
+    font-family: $mono;
 }

 // tag in a headline
@@ -31,7 +31,7 @@
    display: block;
    float: right;
    font-size: 70%;
-    font-weight: normal;
+    font-weight: $normal;
    margin: 0 3px;
    padding: 5px;
    border-radius: 3px;
@@ -45,7 +45,7 @@
    // Timestamp date
    .timestamp {
        color: $dark-blue;
-        font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
+        font-family: $mono;
    }

    // keyword associated with a timestamp, like ‘SCHEDULED’
--- a/scss/partials/_postamble.scss
+++ b/scss/partials/_postamble.scss
@@ -4,11 +4,11 @@
    left:0;
    width: $toc-width;
    padding: 12px;
-    color:#fcfcfc;
-    background:#1f1d1d;
-    border-top:solid 10px #343131;
-    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
-    font-size: 90%;
+    color: $color-text-invert;
+    background: $color-background-obscur;
+    border-top: solid 10px #343131;
+    font-family: $serif;
+    font-size: 0.8em;
    z-index:400;

    .author {
@@ -19,7 +19,7 @@
    .date {
        font-size: 90%;
        margin-bottom: 0px;
-        color: #27AE60;
+        color: $color-secondary;
    }

    .creator, .validation {
--- a/scss/partials/_tables.scss
+++ b/scss/partials/_tables.scss
@@ -5,7 +5,7 @@ table {
    border-spacing:0;
    empty-cells:show;
    margin-bottom:24px;
-    border-bottom:3px solid #e1e4e5;
+    border-bottom:3px solid $color-shadow;

    // Cell Style
    td,th{
@@ -13,31 +13,33 @@ table {
        margin:0;
        overflow:visible;
        padding:8px 16px;
-        background-color:white;
-        border:1px solid #e1e4e5;
+        background-color: $white;
+        border:1px solid $color-shadow;
    }

    // First Line of the Table
    thead th{
-        font-weight:bold;
-        border-top:3px solid #e1e4e5;
-        border-bottom:1px solid #e1e4e5;
+        font-weight: $bold;
+        border-top:3px solid $color-shadow;
+        border-bottom:1px solid $color-shadow;
    }

    // Caption
    caption{
-        color:#000;
-        font:italic 85%/1 arial,sans-serif;
+        color: $color-caption;
+        font-size: 0.85em;
+        font-family: $serif;
+        font-style: italic;
        padding:1em 0;

        // "Table x" part
        .table-number {
-            font-weight: bold;
-            color: #343131;
+            font-weight: $bold;
+            color: $color-caption-num;
        }
    }

    // Alternating colors for the rows
-    tr:nth-child(2n-1) td{background-color:#f3f6f6;}
-    tr:nth-child(2n)   td{background-color:white;}
+    tr:nth-child(2n-1) td{background-color: $color-shadow-light;}
+    tr:nth-child(2n)   td{background-color: $white;}
 }
--- a/scss/partials/_toc.scss
+++ b/scss/partials/_toc.scss
@@ -1,131 +1,67 @@
 #table-of-contents {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: $toc-width;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100%;
+    background: $color-background-dark;
+    z-index: 200;

-    position:fixed;
-    top:0;
-    left:0;
-    width:300px;
-    overflow-x:hidden;
-    overflow-y:scroll;
-    height:100%;
-    background: #343131;
-    z-index:200;
-    scrollbar-base-color: #1F1D1D;
-    scrollbar-arrow-color: #b3b3b3;
-    scrollbar-shadow-color: #1F1D1D;
-    scrollbar-track-color : #343131;
-
-    li {
-        list-style:none;
-        margin-left: 0px;
-
-        &.divide-top {
-            border-top:solid 1px #404040;
-        }
-
-        &.divide-bottom {
-            border-bottom:solid 1px #404040;
-        }
-
-        &.current {
-            background:#e3e3e3;
-
-            a {
-                color:gray;
-                border-right:solid 1px #c9c9c9;
-                padding:0.4045em 2.427em;
-                &:hover{
-                    background:#d6d6d6;
-                }
-            }
-        }
-
-        a {
-            padding:0.4045em 1.618em;
-            position:relative;
-            border:none;
-            padding-left:1.618em -4px;
-        }
-
-        &.on a:hover {
-            background:#fcfcfc;
-        }
-        &.current>a:hover{
-            background:#fcfcfc;
-        }
-
-    }
-
-    .close-sidebar {
-        display: none;
-    }
-
-    header {
-        height:32px;
-        display:inline-block;
-        line-height:32px;
-        padding:0 1.618em;
-        display:block;
-        font-weight:bold;
-        text-transform:uppercase;
-        font-size:80%;
-        color: $color-primary;
-        white-space:nowrap;
-    }
-
-    ul {
-        margin-bottom:0;
-    }
-
-    li ul li a{
-        padding:0.4045em 2.427em;
-    }
-
-    li ul li ul li a{
-        padding:0.4045em 3.236em;
-    }
-
-    li.current ul{
-        display:block;
-    }
-
-    .local-toc li ul{
-        display:block;
-    }
-
-    li ul li a{
-        margin-bottom:0;
-        color:#b3b3b3;
-        font-weight:normal;
+    // Table of Contents Header
+    h2 {
+        color: $color-text-invert;
+        background-color: $color-primary-background;
+        text-align: center;
+        padding: 0.8em;
+        display: block;
+        font-size: 100%;
+        z-index: 200;
    }

+    // Links to Headers
    a {
-        display:inline-block;
-        line-height:18px;
-        padding:0.4045em 1.618em;
-        display:block;
-        position:relative;
-        font-size:90%;
-        color:#b3b3b3;
-        direction: ltr;
+        display: block;
+        position: relative;
+        line-height: 1.5em;
+        font-size: 90%;
+        color: $color-text-shadow;

        &:hover{
-            background-color:#4e4a4a;
+            background-color: $color-background-med;
            cursor:pointer;
        }
    }

-
-    h2 {
-        z-index:200;
-        background-color: $dark-green;
-        text-align:center;
-        padding:0.809em;
-        display:block;
-        color:#fcfcfc;
-        font-size: 100%;
-        margin-bottom:0.809em;
+    // ToC Items
+    li {
+        list-style: none;
+        margin-left: 0px;
    }

+    // Reduce margins
+    ul {
+        margin-bottom: 0;
+    }
+
+    // Identation of headings
+    li {
+        // First level Headings
+        a{ padding: 0.4em 1.6em; }
+        ul li {
+            // Second level Headings
+            a{ padding: 0.4em 2.4em; }
+            ul li {
+                // Third
+                a { padding:0.4em 3.0em; }
+                ul li {
+                    // Fourth
+                    a { padding:0.4em 3.6em; }
+                }
+            }
+        }
+    }
    // Do not display tags in the ToC
    .tag {
        display: none;
@@ -134,76 +70,134 @@



+// ul.nav li ul li {
+//     display: none;
+// }
+
+// ul.nav li ul li ul li {
+//     display: none;
+// }
+
+// ul.nav li.active ul li {
+//     display: inline;
+// }
+
+// ul.nav li.active ul li ul li {
+//     display: inline;
+// }
+
+// ul.nav li.active ul li a {
+//     background-color: #E3E3E3;
+//     color: #8099B0;
+//     border-right:solid 1px #c9c9c9 !important;
+// }
+
+// ul.nav li.active ul li.active a {
+//     background-color: #C9C9C9;
+//     color: black !important;
+//     font-weight: bold !important;
+// }
+
+// ul.nav li.active ul li.active ul li.active a {
+//     color: black !important;
+//     font-weight: bold !important;
+//     display: block !important;
+// }
+
+// ul.nav li.active ul li.active ul li a {
+//     color: #808080 !important;
+//     font-weight: normal !important;
+//     display: block !important;
+// }
+
+// ul.nav li.active ul li ul li a {
+//     display: none !important;
+// }
+
+// ul.nav li ul li ul li ul li {
+//     display: none !important;
+// }
+
+// ul.nav li.active > a {
+//     border-bottom:solid 1px #c9c9c9 !important;
+//     border-right:solid 1px #c9c9c9 !important;
+// }
+
+// ul.nav li.active a {
+//     color: gray !important;
+//     font-weight:bold;
+//     background-color: white;
+//     border-right:solid 0px white !important;
+// }
+
+// ul.nav > li.active > a {
+//     color: black !important;
+// }
+
+// #toggle-sidebar {
+//     display: none;
+// }






-ul.nav li ul li {
-    display: none;
-}
+// li {
+//     &.divide-top {
+//         border-top:solid 1px #404040;
+//     }

-ul.nav li ul li ul li {
-    display: none;
-}
+//     &.divide-bottom {
+//         border-bottom:solid 1px #404040;
+//     }

-ul.nav li.active ul li {
-    display: inline;
-}
+//     &.current {
+//         background:#e3e3e3;

-ul.nav li.active ul li ul li {
-    display: inline;
-}
+//         a {
+//             color: gray;
+//             border-right: solid 1px #c9c9c9;
+//             padding: 0.4045em 2.427em;
+//             &:hover{
+//                 background: #d6d6d6;
+//             }
+//         }
+//     }

-ul.nav li.active ul li a {
-    background-color: #E3E3E3;
-    color: #8099B0;
-    border-right:solid 1px #c9c9c9 !important;
-}
+//     a {
+//         // padding:0.4045em 1.618em;
+//         position:relative;
+//         border:none;
+//         padding-left:1.618em -4px;
+//     }

-ul.nav li.active ul li.active a {
-    background-color: #C9C9C9;
-    color: black !important;
-    font-weight: bold !important;
-}
+//     &.on a:hover {
+//         background: #fcfcfc;
+//     }
+//     &.current>a:hover{
+//         background: #fcfcfc;
+//     }
+// }

-ul.nav li.active ul li.active ul li.active a {
-    color: black !important;
-    font-weight: bold !important;
-    display: block !important;
-}

-ul.nav li.active ul li.active ul li a {
-    color: #808080 !important;
-    font-weight: normal !important;
-    display: block !important;
-}
+// .close-sidebar {
+//     display: none;
+// }

-ul.nav li.active ul li ul li a {
-    display: none !important;
-}

-ul.nav li ul li ul li ul li {
-    display: none !important;
-}
+// li.current ul{
+//     display:block;
+// }

-ul.nav li.active > a {
-    border-bottom:solid 1px #c9c9c9 !important;
-    border-right:solid 1px #c9c9c9 !important;
-}

-ul.nav li.active a {
-    color: gray !important;
-    font-weight:bold;
-    background-color: white;
-    border-right:solid 0px white !important;
-}
+// .local-toc li ul{
+//     display:block;
+// }

-ul.nav > li.active > a {
-    color: black !important;
-}

-#toggle-sidebar {
-    display: none;
-}
+// li ul li a{
+//     margin-bottom:0;
+//     color:#b3b3b3;
+//     font-weight:normal;
+// }