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;
  15     border-left: solid $text-color 1px;
  16     min-height: calc(100vh - #{$outer-margin});
  17 }
  18
  19 /* The content of the frame */
  20 #-content {
  21     margin-left: $intrusion-width;
  22     padding: $outer-margin;
  23     padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
  24 }
  25
  26 /* Navigation menu */
  27 #-navi {
  28     padding: 0;
  29     margin: 0;
  30     margin-left: -#{$navi-indent};
  31     width: #{$navi-width + $navi-indent};
  32     /* Put it into the right spot */
  33     float: left;
  34     position: relative;
  35     left: calc(-#{$navi-width} - 1px);
  36     /* Make it not take space away from the main text */
  37     height: 0;
  38     overflow: visible;
  39
  40     ul {
  41         margin: 0;
  42         padding: 0;
  43         list-style-type: none;
  44         /* Indentation for nested nodes */
  45         margin-left: $navi-indent;
  46     }
  47     a {
  48         display: block;
  49         width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
  50         padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
  51         /* Always have *one* border, for the width to stay constant */
  52         border-left: solid transparent 1px;
  53
  54         font-size:110%;
  55         text-align: left;
  56     }
  57     a.current {
  58         padding-top: 0.12em;
  59         border: solid $text-color 1px;
  60         border-right: none; /* solid $background-color 1px; */
  61         background-color: $background-color;
  62     }
  63     a.root {
  64         margin-top: 0.7em;
  65         border-bottom: solid $text-color 1px;
  66         margin-bottom: 0.3em;
  67     }
  68 }
  69
  70 /* Medium-size screens */
  71 @media screen and (max-width:#{ $medium-width + $navi-width } ) {
  72     body {
  73         margin-left: 0;
  74         max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
  75     }
  76     #-frame {
  77         margin-right: 0;
  78     }
  79 }
  80
  81 /* Small screens */
  82 @media screen and (max-width:#{ $small-width } ) {
  83     html {
  84         overflow-y: auto;
  85     }
  86     body, #-frame, #-content, #-navi {
  87         margin: 0;
  88         padding: 0;
  89         height: auto;
  90         width: auto;
  91         max-width: none;
  92         clear: both;
  93         float: none;
  94         position: static;
  95     }
  96     #-content {
  97         padding: $outer-margin;
  98     }
  99     #-navi {
 100         padding: $outer-margin;
 101         border-bottom: solid $text-color 1px;
 102
 103         ul {
 104             display: inline;
 105             padding: 0;
 106             margin: 0;
 107         }
 108         li {
 109             display: inline-block;
 110         }
 111         /* Display only parent and children, and decorate them appropriately */
 112         a {
 113             display:inline-block;
 114             margin: 0 0.3em !important;
 115             padding: 0 !important;
 116             border: none !important;
 117             width: auto !important;
 118         }
 119         a.sibling {
 120             display:none;
 121         }
 122         a.current {
 123             text-decoration: underline;
 124         }
 125         li.parent::before, li.current:before {
 126             content: "»";
 127         }
 128         li.child::before {
 129             content: "»";
 130         }
 131         li.child + li.child::before {
 132             content: "|";
 133         }
 134     }
 135 }
 136
 137 /* Printing */
 138 @media print {
 139     body, #-frame, #-content {
 140         margin: 0;
 141         padding: 0;
 142         width: auto;
 143         max-width: none;
 144         border: none;
 145     }
 146     #-title h1 {
 147         border: none;
 148     }
 149     #-navi {
 150         display: none;
 151     }
 152 }