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

[web.git] / style.scss

diff --git a/style.scss b/style.scss
new file mode 100644 (file)
index 0000000..c20dedf
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,243 @@
+---
+# YAML front matter
+---
+@charset "utf-8";
+
+/* General Fonts */
+html, body, div, p {
+    font-family: DejaVu Sans, Verdana, Arial, sans-serif;
+    font-size: 12pt;
+}
+/* Header Size & Spacing */
+h1 {
+    margin-top: 0.1em;
+    font-size: 200%;
+    margin-bottom: 0.4em;
+}
+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 */
+$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 { /* This centers us in the page, and handles the "too wide" case */
+    padding: $outer-margin;
+    margin: 0 auto;
+    color: $text-color;
+    background-color: $outer-background-color;
+    max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
+}
+#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: solid $title-color 2px;
+    text-align: center;
+}
+#title h1 {
+    padding: 0 0.7em;
+    margin-bottom: 0;
+}
+#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;
+    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;
+    padding: 0px;
+    list-style-type: none;
+}
+#navi ul ul {
+    /* Indentation for nested nodes */
+    margin-left: 1.2em;
+}
+#navi li {
+    /* Border around the links */
+    margin-bottom:0.1em;
+    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;
+}
+#navi li a {
+    display: block;
+    width: 100%;
+    
+    color: $link-color;
+    font-size:110%;
+    text-decoration: none;
+    text-align: center;
+}
+#navi li.current
+{
+    border-color: $current-color;
+}
+#navi li:hover {
+    border-color: $title-color;
+    border-radius: 0;
+}
+#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 {
+        margin: 0;
+        width: auto;
+        max-width: none;
+        clear: both;
+    }
+    #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 {
+        margin: 0;
+        padding: 0;
+        display: inline;
+    }
+    #navi > ul {
+        padding: 0.3em;
+        display: block;
+        border-bottom: solid $navi-color 2px;
+    }
+    /* Display only parent and children, and deocare them appropriately */
+    #navi li {
+        display:inline-block;
+        margin: 0 0.2em;
+    }
+    #navi li.sibling {
+        display:none;
+    }
+    #navi li.parent:before, #navi li.current:before {
+        content: "» ";
+    }
+    #navi li.child:before {
+        content: "» ";
+    }
+    #navi li.child + li:before {
+        content: "| ";
+    }
+    #navi li {
+        border: none;
+    }
+    #navi li.current a {
+        text-decoration: underline;
+    }
+}
+
+/* Printing */
+@media print {
+    body, #frame, #title, #content {
+        margin: 0;
+        padding: 0;
+        width: auto;
+        max-width: none;
+        border: none;
+    }
+    #title h1 {
+        border: none;
+    }
+    #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;
+}