X-Git-Url: https://git.ralfj.de/web.git/blobdiff_plain/28785e4dd610cf6b2a4613679386b3d2932ede8c..ad332bcffb616f49b59b770ac102b40495e2835b:/ralf/style.scss

diff --git a/ralf/style.scss b/ralf/style.scss
index 2953065..54197a2 100644
--- a/ralf/style.scss
+++ b/ralf/style.scss
@@ -8,273 +8,22 @@ $navi-width:      11em;
 $navi-indent:     1.2em;
 $frame-max-width: 50em;
 $intrusion-width: 1.0em;
-$outer-margin:    0.8em;
+$outer-margin:    1.1em;
 
 $small-width:      $frame-max-width + 2*$outer-margin;
 $medium-width:     $small-width + $intrusion-width + $navi-width;
 
-$background-color:       white;
-$text-color:             #313131;
+$background-color:       #fafafa;
+$text-color:             #303030;
 $light-text-color:       #808080;
-$code-background-color:  #F7F7F7;
+$code-background-color:  #F0F0F0;
 $link-color:             #237fbf;
 $light-link-color:       #69a7d2;
 
-/* General Fonts */
-html, body, div, p {
-    font-family: DejaVu Sans, Verdana, Arial, sans-serif;
-    font-size: 12pt;
-    color: $text-color;
-}
-/* Links */
-a {
-    text-decoration: none;
-    color: $link-color;
-}
-a:hover, a:focus {
-    text-decoration: underline;
-}
-/* Header Size & Spacing */
-h1, h2, h3, h4 {
-    color: $text-color;
-
-    a {
-        color: $text-color;
-    }
-}
-h1 {
-    margin-top: 0.1em;
-    font-size: 200%;
-    margin-bottom: 0.2em;
-}
-h2 {
-    margin-top: 0.5em;
-    font-size: 150%;
-    margin-bottom: 0.2em;
-}
-h3 {
-    margin-top: 0.5em;
-    font-size: 135%;
-    margin-bottom: 0.1em;
-}
-h4 {
-    margin-top: 0.5em;
-    font-size: 120%;
-    margin-bottom: 0.0em;
-}
-
-/* Layout and Color stuff */
-
-/* General page structure */
-html {
-    overflow-y: scroll;
-}
-body { /* This centers us in the page, and handles the "too wide" case */
-    padding: 0;
-    margin: 0 auto;
-    background-color: $background-color;
-    max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
-}
-#-frame { /* Add a frame, full height */
-    margin: 0 $navi-width;
-    padding-top: $outer-margin;
-    border-left: solid $text-color 1px;
-    min-height: calc(100vh - #{$outer-margin});
-}
-
-/* The content of the frame */
-#-content {
-    margin-left: $intrusion-width;
-    padding: $outer-margin;
-    padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
-}
-
-/* Navigation menu */
-#-navi {
-    padding: 0;
-    margin: 0;
-    margin-left: -#{$navi-indent};
-    width: #{$navi-width + $navi-indent};
-    /* Put it into the right spot */
-    float: left;
-    position: relative;
-    left: calc(-#{$navi-width} - 1px);
-    /* Make it not take space away from the main text */
-    height: 0;
-    overflow: visible;
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        /* Indentation for nested nodes */
-        margin-left: $navi-indent;
-    }
-    a {
-        display: block;
-        width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
-        padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
-        /* Always have *one* border, for the width to stay constant */
-        border-left: solid transparent 1px;
-    
-        font-size:110%;
-        text-align: left;
-    }
-    a.current {
-        padding-top: 0.12em;
-        border: solid $text-color 1px;
-        border-right: none; /* solid $background-color 1px; */
-        background-color: $background-color;
-    }
-    a.root {
-        margin-top: 0.7em;
-        border-bottom: solid $text-color 1px;
-        margin-bottom: 0.3em;
-    }
-}
-
-/* Medium-size screens */
-@media screen and (max-width:#{ $medium-width + $navi-width } ) {
-    body {
-        margin-left: 0;
-        max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
-    }
-    #-frame {
-        margin-right: 0;
-    }
-}
-
-/* Small screens */
-@media screen and (max-width:#{ $small-width } ) {
-    html {
-        overflow-y: auto;
-    }
-    body, #-frame, #-content, #-navi {
-        margin: 0;
-        padding: 0;
-        height: auto;
-        width: auto;
-        max-width: none;
-        clear: both;
-        float: none;
-        position: static;
-    }
-    #-content {
-        padding: $outer-margin;
-    }
-    #-navi {
-        padding: $outer-margin;
-        border-bottom: solid $text-color 1px;
-
-        ul {
-            display: inline;
-            padding: 0;
-            margin: 0;
-        }
-        li {
-            display: inline-block;
-        }
-        /* Display only parent and children, and decorate them appropriately */
-        a {
-            display:inline-block;
-            margin: 0 0.3em !important;
-            padding: 0 !important;
-            border: none !important;
-            width: auto !important;
-        }
-        a.sibling {
-            display:none;
-        }
-        a.current {
-            text-decoration: underline;
-        }
-        li.parent::before, li.current:before {
-            content: "»";
-        }
-        li.child::before {
-            content: "»";
-        }
-        li.child + li.child::before {
-            content: "|";
-        }
-    }
-}
-
-/* Printing */
-@media print {
-    body, #-frame, #-content {
-        margin: 0;
-        padding: 0;
-        width: auto;
-        max-width: none;
-        border: none;
-    }
-    #-title h1 {
-        border: none;
-    }
-    #-navi {
-        display: none;
-    }
-}
-
-/* Content styling */
-#-content {
-    .side {
-        float: right;
-    }
-
-    .side, .comment {
-        color: $light-text-color;
-
-        a {
-            color: $light-link-color;
-        }
-    }
-
-
-    .pretitle, .subtitle {
-        h1 {
-            display: inline-block;
-            font-size: 165%;
-        }
-        .side {
-            margin-left: 0.5em;
-            margin-top: 0.8em;
-        }
-    }
-    .pretitle {
-        margin-bottom: 1em;
-    }
-    .subtitle {
-        margin-top: 2em;
-    }
-    .title {
-        clear: both;
-        margin-bottom: 1em;
-    }
-
-    pre, code {
-        background-color: $code-background-color;
-        font-family: monospace;
-        font-size: 82%;
-    }
-    code {
-        padding: 0.1em 0.2em;
-    }
-    pre {
-        padding: 0.6em;
-    }
-    pre code {
-        padding: 0;
-        font-size: 100%;
-    }
-
-    p {
-        margin: 0.5em 0;
-        line-height: 1.3;
-    }
-
-    .comment {
-        margin-top: 1.5em;
-    }
-}
+/* Include the actual styles */
+@import
+        "normalize",
+        "base",
+        "layout",
+        "syntax-highlighting"
+;