personal/style.scss

   1 ---
   2 hide: true
   3 ---
   4 @charset "utf-8";
   5
   6 /* Variables */
   7 $navi-width:      11em;
   8 $navi-indent:     1.2em;
   9 $frame-max-width: 50em;
  10 $intrusion-width: 1.0em;
  11 $outer-margin:    0.8em;
  12
  13 $small-width:      $frame-max-width + 2*$outer-margin;
  14 $medium-width:     $small-width + $intrusion-width + $navi-width;
  15
  16 $background-color:       white;
  17 $text-color:             #313131;
  18 $light-text-color:       #808080;
  19 $code-background-color:  #F7F7F7;
  20 $link-color:             #268BD2;
  21
  22 /* General Fonts */
  23 html, body, div, p {
  24     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
  25     font-size: 12pt;
  26     color: $text-color;
  27 }
  28 /* Links */
  29 a {
  30     text-decoration: none;
  31     color: $link-color;
  32 }
  33 a:hover, a:focus {
  34     text-decoration: underline;
  35 }
  36 /* Header Size & Spacing */
  37 h1, h2, h3, h4 {
  38     color: $text-color;
  39
  40     a {
  41         color: $text-color;
  42     }
  43 }
  44 h1 {
  45     margin-top: 0.1em;
  46     font-size: 200%;
  47     margin-bottom: 0.2em;
  48 }
  49 h2 {
  50     margin-top: 0.5em;
  51     font-size: 150%;
  52     margin-bottom: 0.2em;
  53 }
  54 h3 {
  55     margin-top: 0.5em;
  56     font-size: 135%;
  57     margin-bottom: 0.1em;
  58 }
  59 h4 {
  60     margin-top: 0.5em;
  61     font-size: 120%;
  62     margin-bottom: 0.0em;
  63 }
  64
  65 /* Layout and Color stuff */
  66
  67 /* General page structure */
  68 html {
  69     overflow-y: scroll;
  70 }
  71 body { /* This centers us in the page, and handles the "too wide" case */
  72     padding: 0;
  73     margin: 0 auto;
  74     background-color: $background-color;
  75     max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
  76 }
  77 #-frame { /* Add a frame, full height */
  78     margin: 0 $navi-width;
  79     padding-top: $outer-margin;
  80     border-left: solid $text-color 1px;
  81     min-height: calc(100vh - #{$outer-margin});
  82 }
  83
  84 /* The content of the frame */
  85 #-content {
  86     margin-left: $intrusion-width;
  87     padding: $outer-margin;
  88     padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
  89 }
  90
  91 /* Navigation menu */
  92 #-navi {
  93     padding: 0;
  94     margin: 0;
  95     margin-left: -#{$navi-indent};
  96     width: #{$navi-width + $navi-indent};
  97     /* Put it into the right spot */
  98     float: left;
  99     position: relative;
 100     left: calc(-#{$navi-width} - 1px);
 101     /* Make it not take space away from the main text */
 102     height: 0;
 103     overflow: visible;
 104
 105     ul {
 106         margin: 0;
 107         padding: 0;
 108         list-style-type: none;
 109         /* Indentation for nested nodes */
 110         margin-left: $navi-indent;
 111     }
 112     a {
 113         display: block;
 114         width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
 115         padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
 116         /* Always have *one* border, for the width to stay constant */
 117         border-left: solid transparent 1px;
 118
 119         font-size:110%;
 120         text-align: left;
 121     }
 122     a.current {
 123         padding-top: 0.12em;
 124         border: solid $text-color 1px;
 125         border-right: none; /* solid $background-color 1px; */
 126         background-color: $background-color;
 127     }
 128     a.root {
 129         margin-top: 0.7em;
 130         border-bottom: solid $text-color 1px;
 131         margin-bottom: 0.3em;
 132     }
 133 }
 134
 135 /* Medium-size screens */
 136 @media screen and (max-width:#{ $medium-width + $navi-width } ) {
 137     body {
 138         margin-left: 0;
 139         max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
 140     }
 141     #-frame {
 142         margin-right: 0;
 143     }
 144 }
 145
 146 /* Small screens */
 147 @media screen and (max-width:#{ $small-width } ) {
 148     html {
 149         overflow-y: auto;
 150     }
 151     body, #-frame, #-content, #-navi {
 152         margin: 0;
 153         padding: 0;
 154         height: auto;
 155         width: auto;
 156         max-width: none;
 157         clear: both;
 158         float: none;
 159         position: static;
 160     }
 161     #-content {
 162         padding: $outer-margin;
 163     }
 164     #-navi {
 165         padding: $outer-margin;
 166         border-bottom: solid $text-color 1px;
 167
 168         ul {
 169             display: inline;
 170             padding: 0;
 171             margin: 0;
 172         }
 173         li {
 174             display: inline-block;
 175         }
 176         /* Display only parent and children, and decorate them appropriately */
 177         a {
 178             display:inline-block;
 179             margin: 0 0.3em !important;
 180             padding: 0 !important;
 181             border: none !important;
 182             width: auto !important;
 183         }
 184         a.sibling {
 185             display:none;
 186         }
 187         a.current {
 188             text-decoration: underline;
 189         }
 190         li.parent::before, li.current:before {
 191             content: "»";
 192         }
 193         li.child::before {
 194             content: "»";
 195         }
 196         li.child + li.child::before {
 197             content: "|";
 198         }
 199     }
 200 }
 201
 202 /* Printing */
 203 @media print {
 204     body, #-frame, #-content {
 205         margin: 0;
 206         padding: 0;
 207         width: auto;
 208         max-width: none;
 209         border: none;
 210     }
 211     #-title h1 {
 212         border: none;
 213     }
 214     #-navi {
 215         display: none;
 216     }
 217 }
 218
 219 /* Content styling */
 220 #-content {
 221     .side {
 222         float: right;
 223         color: $light-text-color;
 224     }
 225
 226     .pretitle, .subtitle {
 227         h1 {
 228             display: inline-block;
 229             font-size: 165%;
 230         }
 231         .side {
 232             margin-left: 0.5em;
 233             margin-top: 0.8em;
 234         }
 235     }
 236     .pretitle {
 237         margin-bottom: 1em;
 238     }
 239     .subtitle {
 240         margin-top: 2em;
 241     }
 242     .title {
 243         clear: both;
 244         margin-bottom: 1em;
 245     }
 246
 247     pre, code {
 248         background-color: $code-background-color;
 249         font-family: monospace;
 250         font-size: 82%;
 251     }
 252     code {
 253         padding: 0.1em 0.2em;
 254     }
 255     pre {
 256         padding: 0.6em;
 257     }
 258     pre code {
 259         padding: 0;
 260         font-size: 100%;
 261     }
 262
 263     p {
 264         margin: 0.5em 0;
 265         line-height: 1.3;
 266     }
 267 }