X-Git-Url: https://git.ralfj.de/web.git/blobdiff_plain/cf8145d8e8cb87e75171718c88355137d1a900ef..1bb7244af87b4b86590e358352a3d424f9cf0164:/style.scss

diff --git a/style.scss b/style.scss
index c01d011..53116bd 100644
--- a/style.scss
+++ b/style.scss
@@ -3,16 +3,48 @@ hide: true
 ---
 @charset "utf-8";
 
+/* Variables */
+$navi-width:      11em;
+$navi-indent:     1.2em;
+$frame-max-width: 50em;
+$intrusion-width: 1.0em;
+$outer-margin:    0.8em;
+
+$small-width:      $frame-max-width + 2*$outer-margin;
+$medium-width:     $small-width + $intrusion-width + $navi-width;
+
+$background-color:       white;
+$text-color:             #313131;
+$light-text-color:       #808080;
+$code-background-color:  #F7F7F7;
+$link-color:             #268BD2;
+
 /* 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.4em;
+    margin-bottom: 0.5em;
 }
 h2 {
     margin-top: 0.5em;
@@ -31,42 +63,26 @@ h4 {
 }
 
 /* Layout and Color stuff */
-$navi-width:      11em;
-$navi-indent:     1.2em;
-$frame-max-width: 50em;
-$intrusion-width: 1.0em;
-$outer-margin:    0.8em;
-$full-content-width: $frame-max-width + $navi-width + 2*$outer-margin + $intrusion-width;
-
-$background-color:       white;
-$text-color:             #313131;
-$light-text-color:       #808080;
-$code-background-color:  #F7F7F7;
-$link-color:             #268BD2;
 
 /* General page structure */
 body { /* This centers us in the page, and handles the "too wide" case */
     padding: 0;
     margin: 0 auto;
-    color: $text-color;
     background-color: $background-color;
-    max-width: calc(#{$full-content-width + $navi-width} + 1px); /* add the right-hand "navi" for centering - and the border... ;-) */
+    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: 1em;
+    padding-top: $outer-margin;
     border-left: solid $text-color 1px;
-    min-height: calc(100vh);
+    min-height: calc(100vh - #{$outer-margin});
 }
 
 /* The content of the frame */
-#-title h1 {
-    margin: 0;
-}
 #-content {
     margin-left: $intrusion-width;
     padding: $outer-margin;
-    padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
+    padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
 }
 
 /* Navigation menu */
@@ -78,7 +94,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
     /* Put it into the right spot */
     float: left;
     position: relative;
-    left: -#{$navi-width};
+    left: calc(-#{$navi-width} - 1px);
     /* Make it not take space away from the main text */
     height: 0;
     overflow: visible;
@@ -92,42 +108,40 @@ body { /* This centers us in the page, and handles the "too wide" case */
     }
     a {
         display: block;
-        width: calc(100% - 2*0.1em - 2*1px + #{$intrusion-width});
-        padding: 0 0.1em;
-        /* Always have a border, for the width to stay constant */
-        border: solid transparent 1px;
+        width: calc(100% - 2*0.1em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
+        padding: 0.08em 0.1em 0.02em; /* top left-right bottom */
+        /* Always have *one* border, for the width to stay constant */
+        border-left: solid transparent 1px;
     
-        color: $link-color;
         font-size:110%;
-        text-decoration: none;
         text-align: left;
     }
     a.current {
-        padding-top: 0.1em;
-        margin:  0.05em 0;
+        padding-top: 0.12em;
         border: solid $text-color 1px;
-        border-right: solid $background-color 1px;
+        border-right: none; /* solid $background-color 1px; */
         background-color: $background-color;
     }
     a.root {
-        margin-top: 0.5em;
+        margin-top: 0.7em;
         border-bottom: solid $text-color 1px;
         margin-bottom: 0.3em;
     }
-    a:hover, a:focus {
-        text-decoration: underline;
-    }
 }
 
 /* Medium-size screens */
-@media screen and (max-width:#{ $full-content-width } ) {
+@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:#{ $frame-max-width + 2*$outer-margin } ) {
+@media screen and (max-width:#{ $small-width } ) {
     body, #-frame, #-title, #-content, #-navi {
         margin: 0;
         padding: 0;
@@ -204,6 +218,8 @@ body { /* This centers us in the page, and handles the "too wide" case */
     }
 
     #-pretitle, .subtitle {
+        margin-bottom: 1em;
+
         h1 {
             display: inline-block;
             font-size: 165%;
@@ -214,7 +230,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
         }
     }
     .subtitle {
-        margin-top: 1.5em;
+        margin-top: 2em;
     }
 
     #-title {
@@ -241,11 +257,4 @@ body { /* This centers us in the page, and handles the "too wide" case */
         margin: 0.5em 0;
         line-height: 1.3;
     }
-    a {
-        text-decoration: none;
-        color: $link-color;
-    }
-    a:hover, a:focus {
-        text-decoration: underline;
-    }
 }