X-Git-Url: https://git.ralfj.de/web.git/blobdiff_plain/931546ff862b5b310ecb900e64429ae4f76535d5..075f6ea9838afa4f9888f8d58a5b7e7ed128a045:/style.scss

diff --git a/style.scss b/style.scss
index c20dedf..945f31a 100644
--- a/style.scss
+++ b/style.scss
@@ -55,7 +55,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
     background-color: $outer-background-color;
     max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
 }
-#frame { /* Add a frame */
+#-frame { /* Add a frame */
     margin: 0 $navi-width;
     border: solid $frame-color 1px;
     background-color: $inner-background-color;
@@ -64,41 +64,44 @@ body { /* This centers us in the page, and handles the "too wide" case */
 }
 
 /* The content of the frame */
-#title {
+#-title {
     border-bottom: solid $title-color 2px;
     text-align: center;
 }
-#title h1 {
+#-title h1 {
     padding: 0 0.7em;
     margin-bottom: 0;
 }
-#content {
+#-content {
     padding: 0.7em;
     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
 }
 
 /* Navigation menu */
-#navi {
-    /* No border, no padding, so all the width computations become easy. */
-    float: left;
+#-navi {
     background-color: $outer-background-color;
-    width: $navi-width;
+    /* No border, no padding, so all the width computations become easy. */
     padding: 0;
     margin: 0;
+    width: $navi-width;
+    /* Put it into the right spot */
+    float: left;
     position: relative;
     left: -#{$navi-width};
-    margin-bottom: calc(-100% - #{$frame-max-width});
+    /* Make it not take space away from the main text */
+    height: 0;
+    overflow: visible;
 }
-#navi ul {
+#-navi ul {
     margin: 0px;
     padding: 0px;
     list-style-type: none;
 }
-#navi ul ul {
+#-navi ul ul {
     /* Indentation for nested nodes */
     margin-left: 1.2em;
 }
-#navi li {
+#-navi li {
     /* Border around the links */
     margin-bottom:0.1em;
     background-color: $inner-background-color;
@@ -107,7 +110,7 @@ body { /* This centers us in the page, and handles the "too wide" case */
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
 }
-#navi li a {
+#-navi li a {
     display: block;
     width: 100%;
     
@@ -116,128 +119,112 @@ body { /* This centers us in the page, and handles the "too wide" case */
     text-decoration: none;
     text-align: center;
 }
-#navi li.current
+#-navi li.current
 {
     border-color: $current-color;
 }
-#navi li:hover {
+#-navi li:hover {
     border-color: $title-color;
     border-radius: 0;
 }
-#navi li:hover a {
+#-navi li:hover a {
     color: $text-color;
 }
 
 /* Small screens */
 @media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
-    body, #frame, #title, #content, #navi {
+    body, #-frame, #-title, #-content, #-navi {
         margin: 0;
         width: auto;
         max-width: none;
         clear: both;
     }
-    #navi {
+    #-navi {
         /* Place navi above the title */
         float: none;
         position: static;
         background-color: $inner-background-color;
         padding: 0;
     }
-    #navi ul, #navi ul ul, #navi li, #navi li a {
+    #-navi ul, #-navi ul ul, #-navi li, #-navi li a {
         margin: 0;
         padding: 0;
         display: inline;
     }
-    #navi > ul {
+    #-navi > ul {
         padding: 0.3em;
         display: block;
         border-bottom: solid $navi-color 2px;
     }
     /* Display only parent and children, and deocare them appropriately */
-    #navi li {
+    #-navi li {
         display:inline-block;
         margin: 0 0.2em;
     }
-    #navi li.sibling {
+    #-navi li.sibling {
         display:none;
     }
-    #navi li.parent:before, #navi li.current:before {
+    #-navi li.parent:before, #-navi li.current:before {
         content: "» ";
     }
-    #navi li.child:before {
+    #-navi li.child:before {
         content: "» ";
     }
-    #navi li.child + li:before {
+    #-navi li.child + li:before {
         content: "| ";
     }
-    #navi li {
+    #-navi li {
         border: none;
     }
-    #navi li.current a {
+    #-navi li.current a {
         text-decoration: underline;
     }
 }
 
 /* Printing */
 @media print {
-    body, #frame, #title, #content {
+    body, #-frame, #-title, #-content {
         margin: 0;
         padding: 0;
         width: auto;
         max-width: none;
         border: none;
     }
-    #title h1 {
+    #-title h1 {
         border: none;
     }
-    #navi {
+    #-navi {
         display: none;
     }
 }
 
-/* RST styling */
-article.rst dt {
-    font-weight: bold;
-}
-article.rst dd {
-    margin-bottom: 1em;
-}
-article.rst a.rst-footnote {
-    vertical-align: super;
-}
-article.rst div.rst-footnote {
-    display: table;
-}
-article.rst div.rst-footnote > * {
-    display: table-cell;
-}
-article.rst div.rst-footnote a {
-    min-width: 3em;
-}
-article.rst .rst-literal, article.rst pre {
-    font-family: monospace;
-    font-size: 82%;
-}
-article.rst .rst-literal {
-    padding: 0.1em 0.2em;
-    background-color: $outer-background-color;
-}
-article.rst pre {
-    padding: 0.6em;
-    background-color: $outer-background-color;
-}
-
 /* Content styling */
-#content p {
-    margin: 0.5em 0;
-    line-height: 1.3;
-}
-#content a {
-    color:$link-color;
-}
-#content a:visited {
-    color:$link-color-visited;
-}
-#content a:hover {
-    color:$link-color-hover;
+#-content {
+    code {
+        padding: 0.1em 0.2em;
+        background-color: $outer-background-color;
+        font-family: monospace;
+        font-size: 82%;
+    }
+    pre {
+        padding: 0.6em;
+        background-color: $outer-background-color;
+    }
+    pre code {
+        padding: 0;
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.3;
+    }
+    a {
+        color:$link-color;
+    }
+    a:visited {
+        color:$link-color-visited;
+    }
+    a:hover {
+        color:$link-color-hover;
+    }
 }