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