28d5919d40dea82ba1d9b040cc95994f896d72bb
[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; /* 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     }
104     #-content {
105         padding: #{ $outer-margin * 0.75 };
106     }
107     #-navi {
108         padding: #{ $outer-margin * 0.75 };
109         border-bottom: solid $text-color 1px;
110
111         ul {
112             display: inline;
113             padding: 0;
114             margin: 0;
115         }
116         li {
117             display: inline-block;
118         }
119         /* Display only parent and children, and decorate them appropriately */
120         a {
121             display:inline-block;
122             margin: 0 0.3em !important;
123             padding: 0 !important;
124             border: none !important;
125             width: auto !important;
126         }
127         a.sibling {
128             display:none;
129         }
130         a.current {
131             text-decoration: underline;
132         }
133         li.parent::before, li.current:before {
134             content: "»";
135         }
136         li.child::before {
137             content: "»";
138         }
139         li.child + li.child::before {
140             content: "|";
141         }
142     }
143 }
144
145 /* Printing */
146 @media print {
147     body {
148         background-color: white;
149     }
150     body, #-frame, #-content {
151         margin: 0;
152         padding: 0;
153         width: auto;
154         max-width: none;
155         border: none;
156     }
157     #-title h1 {
158         border: none;
159     }
160     #-navi {
161         display: none;
162     }
163 }
164
165 /* Title and Title-asides spacing */
166 .side {
167     float: right;
168 }
169 .subtitle {
170     margin-top: 2em;
171     
172     h1, h2 {
173         display: inline-block;
174         margin: 0;
175     }
176     .side {
177         margin-left: 0.5em;
178         margin-top: 0.45em;
179     }
180 }
181 .title {
182     margin-top: 0.2em;
183     margin-bottom: 1.2em;
184     
185     h1, h2 {
186         display: inline-block;
187         margin: 0;
188     }
189     .side {
190         margin-left: 0.5em;
191         margin-top: 0.8em;
192     }
193 }