refactor: reorder examples and validation sections
[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 /* 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 }