personal/_sass/_layout.scss

   1
   2 /* General page structure */
   3 html {
   4     overflow-y: scroll;
   5 }
   6 body { /* This centers us in the page, and handles the "too wide" case */
   7     padding: 0;
   8     margin: 0 auto;
   9     background-color: $background-color;
  10     max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
  11 }
  12 #-frame { /* Add a frame, full height */
  13     margin: 0 $navi-width;
  14     padding-top: $outer-margin; /* distance of top to window border */
  15     padding-bottom: $outer-margin; /* distance of page-bottom to window border */
  16     border-left: solid $text-color 1px;
  17     min-height: calc(100vh - #{$outer-margin});
  18 }
  19
  20 /* The content of the frame */
  21 #-content {
  22     margin-left: $intrusion-width;
  23     padding-left: $outer-margin; /* Distance to the end of the intrusion */
  24     padding-right: $outer-margin; /* Distance to the end of the window */
  25     padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
  26 }
  27
  28 /* Navigation menu */
  29 #-navi {
  30     padding: 0;
  31     margin: 0;
  32     margin-left: -#{$navi-indent};
  33     width: #{$navi-width + $navi-indent};
  34     /* Put it into the right spot */
  35     float: left;
  36     position: relative;
  37     left: calc(-#{$navi-width} - 1px);
  38     /* Make it not take space away from the main text */
  39     height: 0;
  40     overflow: visible;
  41
  42     ul {
  43         margin: 0;
  44         padding: 0;
  45         list-style-type: none;
  46         /* Indentation for nested nodes */
  47         margin-left: $navi-indent;
  48     }
  49     a {
  50         display: block;
  51         width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
  52         padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
  53         /* Always have *one* border, for the width to stay constant */
  54         border-left: solid transparent 1px;
  55
  56         font-size:110%;
  57         text-align: left;
  58     }
  59     a.current {
  60         padding-top: 0.12em;
  61         border: solid $text-color 1px;
  62         border-right: none; /* solid $background-color 1px; */
  63         background-color: $background-color;
  64     }
  65     a.root {
  66         margin-top: 0.7em;
  67         border-bottom: solid $text-color 1px;
  68         margin-bottom: 0.3em;
  69     }
  70 }
  71
  72 /* Medium-size screens */
  73 @media screen and (max-width:#{ $medium-width + $navi-width } ) {
  74     body {
  75         margin-left: 0;
  76         max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
  77     }
  78     #-frame {
  79         margin-right: 0;
  80     }
  81 }
  82
  83 /* Small screens */
  84 @media screen and (max-width:#{ $small-width } ) {
  85     html {
  86         overflow-y: auto;
  87     }
  88     body, #-frame, #-content, #-navi {
  89         margin: 0;
  90         padding: 0;
  91         height: auto;
  92         width: auto;
  93         max-width: none;
  94         clear: both;
  95         float: none;
  96         position: static;
  97     }
  98     #-content {
  99         padding: #{ $outer-margin * 0.75 };
 100     }
 101     #-navi {
 102         padding: #{ $outer-margin * 0.75 };
 103         border-bottom: solid $text-color 1px;
 104
 105         ul {
 106             display: inline;
 107             padding: 0;
 108             margin: 0;
 109         }
 110         li {
 111             display: inline-block;
 112         }
 113         /* Display only parent and children, and decorate them appropriately */
 114         a {
 115             display:inline-block;
 116             margin: 0 0.3em !important;
 117             padding: 0 !important;
 118             border: none !important;
 119             width: auto !important;
 120         }
 121         a.sibling {
 122             display:none;
 123         }
 124         a.current {
 125             text-decoration: underline;
 126         }
 127         li.parent::before, li.current:before {
 128             content: "»";
 129         }
 130         li.child::before {
 131             content: "»";
 132         }
 133         li.child + li.child::before {
 134             content: "|";
 135         }
 136     }
 137 }
 138
 139 /* Printing */
 140 @media print {
 141     body, #-frame, #-content {
 142         margin: 0;
 143         padding: 0;
 144         width: auto;
 145         max-width: none;
 146         border: none;
 147     }
 148     #-title h1 {
 149         border: none;
 150     }
 151     #-navi {
 152         display: none;
 153     }
 154 }
 155
 156 /* Title and Title-asides spacing */
 157 .side {
 158     float: right;
 159 }
 160 .subtitle {
 161     margin-top: 2em;
 162
 163     h1, h2 {
 164         display: inline-block;
 165         margin: 0;
 166     }
 167     .side {
 168         margin-left: 0.5em;
 169         margin-top: 0.45em;
 170     }
 171 }
 172 .title {
 173     margin-top: 0.2em;
 174     margin-bottom: 1.2em;
 175
 176     h1, h2 {
 177         display: inline-block;
 178         margin: 0;
 179     }
 180     .side {
 181         margin-left: 0.5em;
 182         margin-top: 0.8em;
 183     }
 184 }