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     background-color: $outer-background-color;
  83     /* No border, no padding, so all the width computations become easy. */
  84     padding: 0;
  85     margin: 0;
  86     width: $navi-width;
  87     /* Put it into the right spot */
  88     float: left;
  89     position: relative;
  90     left: -#{$navi-width};
  91     /* Make it not take space away from the main text */
  92     height: 0;
  93     overflow: visible;
  94 }
  95 #-navi ul {
  96     margin: 0px;
  97     padding: 0px;
  98     list-style-type: none;
  99 }
 100 #-navi ul ul {
 101     /* Indentation for nested nodes */
 102     margin-left: 1.2em;
 103 }
 104 #-navi li {
 105     /* Border around the links */
 106     margin-bottom:0.1em;
 107     background-color: $inner-background-color;
 108     border-left: solid $navi-color 2px;
 109     border-right: solid $navi-color 2px;
 110     border-top-left-radius: 10px;
 111     border-bottom-left-radius: 10px;
 112 }
 113 #-navi li a {
 114     display: block;
 115     width: 100%;
 116
 117     color: $link-color;
 118     font-size:110%;
 119     text-decoration: none;
 120     text-align: center;
 121 }
 122 #-navi li.current
 123 {
 124     border-color: $current-color;
 125 }
 126 #-navi li:hover {
 127     border-color: $title-color;
 128     border-radius: 0;
 129 }
 130 #-navi li:hover a {
 131     color: $text-color;
 132 }
 133
 134 /* Small screens */
 135 @media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
 136     body, #-frame, #-title, #-content, #-navi {
 137         margin: 0;
 138         width: auto;
 139         max-width: none;
 140         clear: both;
 141     }
 142     #-navi {
 143         /* Place navi above the title */
 144         float: none;
 145         position: static;
 146         background-color: $inner-background-color;
 147         padding: 0;
 148     }
 149     #-navi ul, #-navi ul ul, #-navi li, #-navi li a {
 150         margin: 0;
 151         padding: 0;
 152         display: inline;
 153     }
 154     #-navi > ul {
 155         padding: 0.3em;
 156         display: block;
 157         border-bottom: solid $navi-color 2px;
 158     }
 159     /* Display only parent and children, and deocare them appropriately */
 160     #-navi li {
 161         display:inline-block;
 162         margin: 0 0.2em;
 163     }
 164     #-navi li.sibling {
 165         display:none;
 166     }
 167     #-navi li.parent:before, #-navi li.current:before {
 168         content: "» ";
 169     }
 170     #-navi li.child:before {
 171         content: "» ";
 172     }
 173     #-navi li.child + li:before {
 174         content: "| ";
 175     }
 176     #-navi li {
 177         border: none;
 178     }
 179     #-navi li.current a {
 180         text-decoration: underline;
 181     }
 182 }
 183
 184 /* Printing */
 185 @media print {
 186     body, #-frame, #-title, #-content {
 187         margin: 0;
 188         padding: 0;
 189         width: auto;
 190         max-width: none;
 191         border: none;
 192     }
 193     #-title h1 {
 194         border: none;
 195     }
 196     #-navi {
 197         display: none;
 198     }
 199 }
 200
 201 /* Content styling */
 202 #-content {
 203     code {
 204         padding: 0.1em 0.2em;
 205         background-color: $outer-background-color;
 206         font-family: monospace;
 207         font-size: 82%;
 208     }
 209     pre {
 210         padding: 0.6em;
 211         background-color: $outer-background-color;
 212     }
 213     pre code {
 214         padding: 0;
 215     }
 216
 217     p {
 218         margin: 0.5em 0;
 219         line-height: 1.3;
 220     }
 221     a {
 222         color:$link-color;
 223     }
 224     a:visited {
 225         color:$link-color-visited;
 226     }
 227     a:hover {
 228         color:$link-color-hover;
 229     }
 230 }