projects / web.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
add my research page; make its links absolute; tune spacing
[web.git] / style.scss
diff --git a/style.scss b/style.scss
index 0b509232297bdde2054749be2c28805cacdf20cc..2539cd007380f7b621db833c10a30cefad237076 100644 (file)
--- a/style.scss
+++ b/style.scss
@@ -3,16 +3,46 @@ hide: true
 ---
 @charset "utf-8";
 
 ---
 @charset "utf-8";
 
+/* Variables */
+$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 Fonts */
 html, body, div, p {
     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
     font-size: 12pt;
 /* 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 */
 }
 /* Header Size & Spacing */
+h1, h2, h3, h4 {
+    color: $text-color;
+
+    a {
+        color: $text-color;
+    }
+}
 h1 {
     margin-top: 0.1em;
     font-size: 200%;
 h1 {
     margin-top: 0.1em;
     font-size: 200%;
-    margin-bottom: 0.4em;
+    margin-bottom: 0.5em;
 }
 h2 {
     margin-top: 0.5em;
 }
 h2 {
     margin-top: 0.5em;
@@ -31,60 +61,34 @@ h4 {
 }
 
 /* Layout and Color stuff */
 }
 
 /* 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;
-$light-text-color:       #888;
-$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 */
 
 /* General page structure */
 body { /* This centers us in the page, and handles the "too wide" case */
-    padding: $outer-margin;
+    padding: 0;
     margin: 0 auto;
     margin: 0 auto;
-    color: $text-color;
-    background-color: $outer-background-color;
-    max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
+    background-color: $background-color;
+    max-width: calc(#{$full-content-width + $navi-width} + 1px); /* add the right-hand "navi" for centering - and the border... ;-) */
 }
 }
-#-frame { /* Add a frame */
+#-frame { /* Add a frame, full height */
     margin: 0 $navi-width;
     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);
+    padding-top: $outer-margin;
+    border-left: solid $text-color 1px;
+    min-height: calc(100vh - #{$outer-margin});
 }
 
 /* The content of the frame */
 }
 
 /* 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 {
 #-content {
-    padding: 0.7em;
-    padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
+    margin-left: $intrusion-width;
+    padding: $outer-margin;
+    padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
 }
 
 /* Navigation menu */
 #-navi {
 }
 
 /* Navigation menu */
 #-navi {
-    background-color: $outer-background-color;
-    /* No border, no padding, so all the width computations become easy. */
     padding: 0;
     margin: 0;
     padding: 0;
     margin: 0;
-    width: $navi-width;
+    margin-left: -#{$navi-indent};
+    width: #{$navi-width + $navi-indent};
     /* Put it into the right spot */
     float: left;
     position: relative;
     /* Put it into the right spot */
     float: left;
     position: relative;
@@ -92,94 +96,94 @@ body { /* This centers us in the page, and handles the "too wide" case */
     /* 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;
-}
-#-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%;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        /* Indentation for nested nodes */
+        margin-left: $navi-indent;
+    }
+    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;
     
     
-    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;
+        font-size:110%;
+        text-align: left;
+    }
+    a.current {
+        padding: 0.05em 0.1em;
+        border: solid $text-color 1px;
+        border-right: solid $background-color 1px;
+        background-color: $background-color;
+    }
+    a.root {
+        margin-top: 0.7em;
+        border-bottom: solid $text-color 1px;
+        margin-bottom: 0.3em;
+    }
 }
 }
-#-navi li:hover a {
-    color: $text-color;
+
+/* Medium-size screens */
+@media screen and (max-width:#{ $full-content-width } ) {
+    #-frame {
+        margin-right: 0;
+    }
 }
 
 /* Small screens */
 }
 
 /* Small screens */
-@media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
+@media screen and (max-width:#{ $frame-max-width + 2*$outer-margin } ) {
     body, #-frame, #-title, #-content, #-navi {
         margin: 0;
     body, #-frame, #-title, #-content, #-navi {
         margin: 0;
+        padding: 0;
+        height: auto;
         width: auto;
         max-width: none;
         clear: both;
         width: auto;
         max-width: none;
         clear: both;
-    }
-    #-navi {
-        /* Place navi above the title */
         float: none;
         position: static;
         float: none;
         position: static;
-        background-color: $inner-background-color;
-        padding: 0;
-        height: auto;
-    }
-    #-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;
+    #-content {
+        padding: $outer-margin;
     }
     }
-    #-navi li.current a {
-        text-decoration: underline;
+    #-navi {
+        padding: $outer-margin;
+        border-bottom: solid $text-color 1px;
+
+        ul {
+            display: inline;
+            padding: 0;
+            margin: 0;
+        }
+        li {
+            display: inline-block;
+        }
+        /* Display only parent and children, and decorate them appropriately */
+        a {
+            display:inline-block;
+            margin: 0 0.3em !important;
+            padding: 0 !important;
+            border: none !important;
+            width: auto !important;
+        }
+        a.sibling {
+            display:none;
+        }
+        a.current {
+            text-decoration: underline;
+        }
+        li.parent::before, li.current:before {
+            content: "»";
+        }
+        li.child::before {
+            content: "»";
+        }
+        li.child + li.child::before {
+            content: "|";
+        }
     }
 }
 
     }
 }
 
@@ -202,36 +206,49 @@ body { /* This centers us in the page, and handles the "too wide" case */
 
 /* Content styling */
 #-content {
 
 /* Content styling */
 #-content {
-    .subtitle .side {
+    .side {
         float: right;
         color: $light-text-color;
     }
 
         float: right;
         color: $light-text-color;
     }
 
-    code {
-        padding: 0.1em 0.2em;
-        background-color: $outer-background-color;
+    #-pretitle, .subtitle {
+        margin-bottom: 1em;
+
+        h1 {
+            display: inline-block;
+            font-size: 165%;
+        }
+        .side {
+            margin-left: 0.5em;
+            margin-top: 0.9em;
+        }
+    }
+    .subtitle {
+        margin-top: 2em;
+    }
+
+    #-title {
+        clear: both;
+    }
+
+    pre, code {
+        background-color: $code-background-color;
         font-family: monospace;
         font-size: 82%;
     }
         font-family: monospace;
         font-size: 82%;
     }
+    code {
+        padding: 0.1em 0.2em;
+    }
     pre {
         padding: 0.6em;
     pre {
         padding: 0.6em;
-        background-color: $outer-background-color;
     }
     pre code {
         padding: 0;
     }
     pre code {
         padding: 0;
+        font-size: 100%;
     }
 
     p {
         margin: 0.5em 0;
         line-height: 1.3;
     }
     }
 
     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;
-    }
 }
 }
sources for my website