unsafe post: finish first draft
[web.git] / 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 }