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 - #{2*$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 /* The footer */
  29 #-footer {
  30     padding-top: 3em;
  31     text-align: center;
  32 }
  33
  34 /* Navigation menu */
  35 #-navi {
  36     padding: 0;
  37     margin: 0;
  38     margin-left: -#{$navi-indent};
  39     width: #{$navi-width + $navi-indent};
  40     /* Put it into the right spot */
  41     float: left;
  42     position: relative;
  43     left: calc(-#{$navi-width} - 1px);
  44     /* Make it not take space away from the main text */
  45     height: 0;
  46     overflow: visible;
  47
  48     ul {
  49         margin: 0;
  50         padding: 0;
  51         list-style-type: none;
  52         /* Indentation for nested nodes */
  53         margin-left: $navi-indent;
  54     }
  55     a {
  56         display: block;
  57         width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
  58         padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
  59         /* Always have *one* border, for the width to stay constant */
  60         border-left: solid transparent 1px;
  61
  62         font-size:110%;
  63         text-align: left;
  64     }
  65     a.current {
  66         padding-top: 0.12em;
  67         border: solid $text-color 1px;
  68         border-right: none; /* solid $background-color 1px; */
  69         background-color: $background-color;
  70     }
  71     a.root {
  72         margin-top: 0.7em;
  73         border-bottom: solid $text-color 1px;
  74         margin-bottom: 0.3em;
  75     }
  76 }
  77
  78 /* Medium-size screens */
  79 @media screen and (max-width:#{ $medium-width + $navi-width } ) {
  80     body {
  81         margin-left: 0;
  82         max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
  83     }
  84     #-frame {
  85         margin-right: 0;
  86     }
  87 }
  88
  89 /* Small screens */
  90 @media screen and (max-width:#{ $small-width } ) {
  91     html {
  92         overflow-y: auto;
  93     }
  94     body, #-frame, #-content, #-navi {
  95         margin: 0;
  96         padding: 0;
  97         height: auto;
  98         width: auto;
  99         max-width: none;
 100         clear: both;
 101         float: none;
 102         position: static;
 103         border: none;
 104     }
 105     #-content {
 106         padding: #{ $outer-margin * 0.75 };
 107     }
 108     #-navi {
 109         padding: #{ $outer-margin * 0.75 };
 110         border-bottom: solid $text-color 1px;
 111
 112         ul {
 113             display: inline;
 114             padding: 0;
 115             margin: 0;
 116         }
 117         li {
 118             display: inline-block;
 119         }
 120         /* Display only parent and children, and decorate them appropriately */
 121         a {
 122             display:inline-block;
 123             margin: 0 0.3em !important;
 124             padding: 0 !important;
 125             border: none !important;
 126             width: auto !important;
 127         }
 128         a.sibling {
 129             display:none;
 130         }
 131         a.current {
 132             text-decoration: underline;
 133         }
 134         li.parent::before, li.current:before {
 135             content: "»";
 136         }
 137         li.child::before {
 138             content: "»";
 139         }
 140         li.child + li.child::before {
 141             content: "|";
 142         }
 143     }
 144 }
 145
 146 /* Printing */
 147 @media print {
 148     body {
 149         background-color: white;
 150     }
 151     body, #-frame, #-content {
 152         margin: 0;
 153         padding: 0;
 154         width: auto;
 155         max-width: none;
 156         border: none;
 157     }
 158     #-title h1 {
 159         border: none;
 160     }
 161     #-navi {
 162         display: none;
 163     }
 164 }
 165
 166 /* Title and Title-asides spacing */
 167 .side {
 168     float: right;
 169 }
 170 .subtitle {
 171     margin-top: 2em;
 172
 173     h1, h2 {
 174         display: inline-block;
 175         margin: 0;
 176     }
 177     .side {
 178         margin-left: 0.5em;
 179         margin-top: 0.45em;
 180     }
 181 }
 182 .title {
 183     margin-top: 0.2em;
 184     margin-bottom: 1.2em;
 185
 186     h1, h2 {
 187         display: inline-block;
 188         margin: 0;
 189     }
 190     .side {
 191         margin-left: 0.5em;
 192         margin-top: 0.8em;
 193     }
 194 }
 195
 196 /* Images (~350px wide) floating to the right but only if there is enough space */
 197 .float-right-350 {
 198   float: right;
 199   margin-left: 0.8em;
 200   margin-bottom: 0.3em;
 201 }
 202 @media screen and (max-width:600px) {
 203     .float-right-350 {
 204         max-width: 300px;
 205         float: none;
 206         margin: auto;
 207     }
 208 }