re-do the layout: use SCSS, put the boxes differently to have the entire frame as...

[web.git] / style.scss

diff --git a/style.css b/style.scss
similarity index 64%
rename from style.css
rename to style.scss
index d13bd3a1212716cc1b4a5232badeea7d9978df88..c20dedfbe7bea9f295aa8efadff8e8e174633917 100644 (file)
--- a/style.css
+++ b/style.scss
@@ -1,3 +1,6 @@
+---
+# YAML front matter
+---
 @charset "utf-8";
 
 /* General Fonts */
@@ -28,39 +31,48 @@ h4 {
 }
 
 /* Layout and Color stuff */
+$navi-width:      11em;
+$outer-margin:    1em;
+$frame-max-width: 52em;
+
+$frame-color: #121212;
+$title-color: #08f;
+$navi-color: #36ff00;
+$current-color: #ffa700;
+$outer-background-color:  #505050;
+$inner-background-color: #252525;
+$text-color:             #DDD;
+$link-color: #9ed2ff;
+$link-color-visited: #bfe1ff;
+$link-color-hover: #5089ba;
+
+
 /* General page structure */
-body {
-    padding: 0.8em;
-    margin: 0;
-    color:#DDD;
-    background-color:#505050;
-}
-#frame {
+body { /* This centers us in the page, and handles the "too wide" case */
+    padding: $outer-margin;
     margin: 0 auto;
-    max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
+    color: $text-color;
+    background-color: $outer-background-color;
+    max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
 }
-
-/* The inner box */
-#title, #content {
-    border: solid #121212 1px;
-    background-color: #252525;
-    margin: 0 11.0em; /* navi width */
-    padding: 0;
+#frame { /* Add a frame */
+    margin: 0 $navi-width;
+    border: solid $frame-color 1px;
+    background-color: $inner-background-color;
+    border-radius: 10px;
+    min-height: calc(100vh - #{2* $outer-margin} - 2px);
 }
+
+/* The content of the frame */
 #title {
-    border-bottom: none;
-    border-radius: 10px 10px 0px 0px;
+    border-bottom: solid $title-color 2px;
+    text-align: center;
 }
 #title h1 {
-    border-bottom: solid #08f 2px;
-    text-align: center;
     padding: 0 0.7em;
     margin-bottom: 0;
 }
 #content {
-    border-top: none;
-    border-radius: 0px 0px 10px 10px;
-    display: block;
     padding: 0.7em;
     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
 }
@@ -69,10 +81,13 @@ body {
 #navi {
     /* No border, no padding, so all the width computations become easy. */
     float: left;
-    background-color:#505050;
-    width: 11.0em; /* navi width */
+    background-color: $outer-background-color;
+    width: $navi-width;
     padding: 0;
     margin: 0;
+    position: relative;
+    left: -#{$navi-width};
+    margin-bottom: calc(-100% - #{$frame-max-width});
 }
 #navi ul {
     margin: 0px;
@@ -86,9 +101,9 @@ body {
 #navi li {
     /* Border around the links */
     margin-bottom:0.1em;
-    background-color: #252525;
-    border-left: solid #36ff00 2px;
-    border-right: solid #36ff00 2px;
+    background-color: $inner-background-color;
+    border-left: solid $navi-color 2px;
+    border-right: solid $navi-color 2px;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
 }
@@ -96,26 +111,26 @@ body {
     display: block;
     width: 100%;
     
-    color: #9ed2ff;
+    color: $link-color;
     font-size:110%;
     text-decoration: none;
     text-align: center;
 }
 #navi li.current
 {
-    border-color: #ffa700;
+    border-color: $current-color;
 }
 #navi li:hover {
-    border-color: #08f;
+    border-color: $title-color;
     border-radius: 0;
 }
 #navi li:hover a {
-    color: #DDD;
+    color: $text-color;
 }
 
 /* Small screens */
-@media screen and (max-width:60em) {
-    #frame, #title, #content, #navi {
+@media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
+    body, #frame, #title, #content, #navi {
         margin: 0;
         width: auto;
         max-width: none;
@@ -124,9 +139,8 @@ body {
     #navi {
         /* Place navi above the title */
         float: none;
-        border: solid #121212 1px;
-        border-bottom: none;
-        background-color: #252525;
+        position: static;
+        background-color: $inner-background-color;
         padding: 0;
     }
     #navi ul, #navi ul ul, #navi li, #navi li a {
@@ -137,7 +151,7 @@ body {
     #navi > ul {
         padding: 0.3em;
         display: block;
-        border-bottom: solid #36ff00 2px;
+        border-bottom: solid $navi-color 2px;
     }
     /* Display only parent and children, and deocare them appropriately */
     #navi li {
@@ -166,7 +180,7 @@ body {
 
 /* Printing */
 @media print {
-    #frame, #title, #content {
+    body, #frame, #title, #content {
         margin: 0;
         padding: 0;
         width: auto;
@@ -206,11 +220,11 @@ article.rst .rst-literal, article.rst pre {
 }
 article.rst .rst-literal {
     padding: 0.1em 0.2em;
-    background-color: #505050;
+    background-color: $outer-background-color;
 }
 article.rst pre {
     padding: 0.6em;
-    background-color: #505050;
+    background-color: $outer-background-color;
 }
 
 /* Content styling */
@@ -219,11 +233,11 @@ article.rst pre {
     line-height: 1.3;
 }
 #content a {
-    color:#9ed2ff;
+    color:$link-color;
 }
 #content a:visited {
-    color:#bfe1ff;
+    color:$link-color-visited;
 }
 #content a:hover {
-    color:#5089ba;
+    color:$link-color-hover;
 }