make sure vertical scrollbar is always shown

[web.git] / style.scss

diff --git a/style.scss b/style.scss
index 914f5f9f13660b5d65e3e0532eb9929d90ac9204..ab657879ae033ccb7de8af50242e0c7aade2db7e 100644 (file)
--- a/style.scss
+++ b/style.scss
@@ -9,7 +9,9 @@ $navi-indent:     1.2em;
 $frame-max-width: 50em;
 $intrusion-width: 1.0em;
 $outer-margin:    0.8em;
 $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;
+
+$small-width:      $frame-max-width + 2*$outer-margin;
+$medium-width:     $small-width + $intrusion-width + $navi-width;

 
 $background-color:       white;
 $text-color:             #313131;
 
 $background-color:       white;
 $text-color:             #313131;


@@ -42,7 +44,7 @@ h1, h2, h3, h4 {
 h1 {
     margin-top: 0.1em;
     font-size: 200%;
 h1 {
     margin-top: 0.1em;
     font-size: 200%;

-    margin-bottom: 0.4em;
+    margin-bottom: 0.2em;

 }
 h2 {
     margin-top: 0.5em;
 }
 h2 {
     margin-top: 0.5em;


@@ -63,11 +65,14 @@ h4 {
 /* Layout and Color stuff */
 
 /* General page structure */
 /* 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;
 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(#{$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;
 }
 #-frame { /* Add a frame, full height */
     margin: 0 $navi-width;


@@ -77,9 +82,6 @@ body { /* This centers us in the page, and handles the "too wide" case */
 }
 
 /* The content of the frame */
 }
 
 /* The content of the frame */

-#-title h1 {
-    margin: 0;
-}

 #-content {
     margin-left: $intrusion-width;
     padding: $outer-margin;
 #-content {
     margin-left: $intrusion-width;
     padding: $outer-margin;


@@ -95,7 +97,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
     /* Put it into the right spot */
     float: left;
     position: relative;
     /* 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;
     /* Make it not take space away from the main text */
     height: 0;
     overflow: visible;


@@ -109,37 +111,44 @@ body { /* This centers us in the page, and handles the "too wide" case */
     }
     a {
         display: block;
     }
     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.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 {
     
         font-size:110%;
         text-align: left;
     }
     a.current {

-        padding: 0.05em 0.1em;
+        padding-top: 0.12em;

         border: solid $text-color 1px;
         border: solid $text-color 1px;

-        border-right: solid $background-color 1px;
+        border-right: none; /* solid $background-color 1px; */

         background-color: $background-color;
     }
     a.root {
         background-color: $background-color;
     }
     a.root {

-        margin-top: 0.5em;
+        margin-top: 0.7em;

         border-bottom: solid $text-color 1px;
         margin-bottom: 0.3em;
     }
 }
 
 /* Medium-size screens */
         border-bottom: solid $text-color 1px;
         margin-bottom: 0.3em;
     }
 }
 
 /* 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 */
     #-frame {
         margin-right: 0;
     }
 }
 
 /* Small screens */

-@media screen and (max-width:#{ $frame-max-width + 2*$outer-margin } ) {
-    body, #-frame, #-title, #-content, #-navi {
+@media screen and (max-width:#{ $small-width } ) {
+    html {
+        overflow-y: auto;
+    }
+    body, #-frame, #-content, #-navi {

         margin: 0;
         padding: 0;
         height: auto;
         margin: 0;
         padding: 0;
         height: auto;


@@ -192,7 +201,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
 
 /* Printing */
 @media print {
 
 /* Printing */
 @media print {

-    body, #-frame, #-title, #-content {
+    body, #-frame, #-content {

         margin: 0;
         padding: 0;
         width: auto;
         margin: 0;
         padding: 0;
         width: auto;


@@ -214,22 +223,25 @@ body { /* This centers us in the page, and handles the "too wide" case */
         color: $light-text-color;
     }
 
         color: $light-text-color;
     }
 

-    #-pretitle, .subtitle {
+    .pretitle, .subtitle {

         h1 {
             display: inline-block;
             font-size: 165%;
         }
         .side {
             margin-left: 0.5em;
         h1 {
             display: inline-block;
             font-size: 165%;
         }
         .side {
             margin-left: 0.5em;

-            margin-top: 0.9em;
+            margin-top: 0.8em;

         }
     }
         }
     }

+    .pretitle {
+        margin-bottom: 1em;
+    }

     .subtitle {
     .subtitle {

-        margin-top: 1.5em;
+        margin-top: 2em;

     }
     }

-
-    #-title {
+    .title {

         clear: both;
         clear: both;

+        margin-bottom: 1em;

     }
 
     pre, code {
     }
 
     pre, code {