style.scss

   1 ---
   2 # YAML front matter
   3 ---
   4 @charset "utf-8";
   5
   6 /* General Fonts */
   7 html, body, div, p {
   8     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
   9     font-size: 12pt;
  10 }
  11 /* Header Size & Spacing */
  12 h1 {
  13     margin-top: 0.1em;
  14     font-size: 200%;
  15     margin-bottom: 0.4em;
  16 }
  17 h2 {
  18     margin-top: 0.5em;
  19     font-size: 150%;
  20     margin-bottom: 0.2em;
  21 }
  22 h3 {
  23     margin-top: 0.5em;
  24     font-size: 135%;
  25     margin-bottom: 0.1em;
  26 }
  27 h4 {
  28     margin-top: 0.5em;
  29     font-size: 120%;
  30     margin-bottom: 0.0em;
  31 }
  32
  33 /* Layout and Color stuff */
  34 $navi-width:      11em;
  35 $outer-margin:    1em;
  36 $frame-max-width: 52em;
  37
  38 $frame-color: #121212;
  39 $title-color: #08f;
  40 $navi-color: #36ff00;
  41 $current-color: #ffa700;
  42 $outer-background-color:  #505050;
  43 $inner-background-color: #252525;
  44 $text-color:             #DDD;
  45 $link-color: #9ed2ff;
  46 $link-color-visited: #bfe1ff;
  47 $link-color-hover: #5089ba;
  48
  49
  50 /* General page structure */
  51 body { /* This centers us in the page, and handles the "too wide" case */
  52     padding: $outer-margin;
  53     margin: 0 auto;
  54     color: $text-color;
  55     background-color: $outer-background-color;
  56     max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
  57 }
  58 #frame { /* Add a frame */
  59     margin: 0 $navi-width;
  60     border: solid $frame-color 1px;
  61     background-color: $inner-background-color;
  62     border-radius: 10px;
  63     min-height: calc(100vh - #{2* $outer-margin} - 2px);
  64 }
  65
  66 /* The content of the frame */
  67 #title {
  68     border-bottom: solid $title-color 2px;
  69     text-align: center;
  70 }
  71 #title h1 {
  72     padding: 0 0.7em;
  73     margin-bottom: 0;
  74 }
  75 #content {
  76     padding: 0.7em;
  77     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
  78 }
  79
  80 /* Navigation menu */
  81 #navi {
  82     /* No border, no padding, so all the width computations become easy. */
  83     float: left;
  84     background-color: $outer-background-color;
  85     width: $navi-width;
  86     padding: 0;
  87     margin: 0;
  88     position: relative;
  89     left: -#{$navi-width};
  90     margin-bottom: calc(-100% - #{$frame-max-width});
  91 }
  92 #navi ul {
  93     margin: 0px;
  94     padding: 0px;
  95     list-style-type: none;
  96 }
  97 #navi ul ul {
  98     /* Indentation for nested nodes */
  99     margin-left: 1.2em;
 100 }
 101 #navi li {
 102     /* Border around the links */
 103     margin-bottom:0.1em;
 104     background-color: $inner-background-color;
 105     border-left: solid $navi-color 2px;
 106     border-right: solid $navi-color 2px;
 107     border-top-left-radius: 10px;
 108     border-bottom-left-radius: 10px;
 109 }
 110 #navi li a {
 111     display: block;
 112     width: 100%;
 113
 114     color: $link-color;
 115     font-size:110%;
 116     text-decoration: none;
 117     text-align: center;
 118 }
 119 #navi li.current
 120 {
 121     border-color: $current-color;
 122 }
 123 #navi li:hover {
 124     border-color: $title-color;
 125     border-radius: 0;
 126 }
 127 #navi li:hover a {
 128     color: $text-color;
 129 }
 130
 131 /* Small screens */
 132 @media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
 133     body, #frame, #title, #content, #navi {
 134         margin: 0;
 135         width: auto;
 136         max-width: none;
 137         clear: both;
 138     }
 139     #navi {
 140         /* Place navi above the title */
 141         float: none;
 142         position: static;
 143         background-color: $inner-background-color;
 144         padding: 0;
 145     }
 146     #navi ul, #navi ul ul, #navi li, #navi li a {
 147         margin: 0;
 148         padding: 0;
 149         display: inline;
 150     }
 151     #navi > ul {
 152         padding: 0.3em;
 153         display: block;
 154         border-bottom: solid $navi-color 2px;
 155     }
 156     /* Display only parent and children, and deocare them appropriately */
 157     #navi li {
 158         display:inline-block;
 159         margin: 0 0.2em;
 160     }
 161     #navi li.sibling {
 162         display:none;
 163     }
 164     #navi li.parent:before, #navi li.current:before {
 165         content: "» ";
 166     }
 167     #navi li.child:before {
 168         content: "» ";
 169     }
 170     #navi li.child + li:before {
 171         content: "| ";
 172     }
 173     #navi li {
 174         border: none;
 175     }
 176     #navi li.current a {
 177         text-decoration: underline;
 178     }
 179 }
 180
 181 /* Printing */
 182 @media print {
 183     body, #frame, #title, #content {
 184         margin: 0;
 185         padding: 0;
 186         width: auto;
 187         max-width: none;
 188         border: none;
 189     }
 190     #title h1 {
 191         border: none;
 192     }
 193     #navi {
 194         display: none;
 195     }
 196 }
 197
 198 /* RST styling */
 199 article.rst dt {
 200     font-weight: bold;
 201 }
 202 article.rst dd {
 203     margin-bottom: 1em;
 204 }
 205 article.rst a.rst-footnote {
 206     vertical-align: super;
 207 }
 208 article.rst div.rst-footnote {
 209     display: table;
 210 }
 211 article.rst div.rst-footnote > * {
 212     display: table-cell;
 213 }
 214 article.rst div.rst-footnote a {
 215     min-width: 3em;
 216 }
 217 article.rst .rst-literal, article.rst pre {
 218     font-family: monospace;
 219     font-size: 82%;
 220 }
 221 article.rst .rst-literal {
 222     padding: 0.1em 0.2em;
 223     background-color: $outer-background-color;
 224 }
 225 article.rst pre {
 226     padding: 0.6em;
 227     background-color: $outer-background-color;
 228 }
 229
 230 /* Content styling */
 231 #content p {
 232     margin: 0.5em 0;
 233     line-height: 1.3;
 234 }
 235 #content a {
 236     color:$link-color;
 237 }
 238 #content a:visited {
 239     color:$link-color-visited;
 240 }
 241 #content a:hover {
 242     color:$link-color-hover;
 243 }