ab657879ae033ccb7de8af50242e0c7aade2db7e
[web.git] / personal / style.scss
1 ---
2 hide: true
3 ---
4 @charset "utf-8";
5
6 /* Variables */
7 $navi-width:      11em;
8 $navi-indent:     1.2em;
9 $frame-max-width: 50em;
10 $intrusion-width: 1.0em;
11 $outer-margin:    0.8em;
12
13 $small-width:      $frame-max-width + 2*$outer-margin;
14 $medium-width:     $small-width + $intrusion-width + $navi-width;
15
16 $background-color:       white;
17 $text-color:             #313131;
18 $light-text-color:       #808080;
19 $code-background-color:  #F7F7F7;
20 $link-color:             #268BD2;
21
22 /* General Fonts */
23 html, body, div, p {
24     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
25     font-size: 12pt;
26     color: $text-color;
27 }
28 /* Links */
29 a {
30     text-decoration: none;
31     color: $link-color;
32 }
33 a:hover, a:focus {
34     text-decoration: underline;
35 }
36 /* Header Size & Spacing */
37 h1, h2, h3, h4 {
38     color: $text-color;
39
40     a {
41         color: $text-color;
42     }
43 }
44 h1 {
45     margin-top: 0.1em;
46     font-size: 200%;
47     margin-bottom: 0.2em;
48 }
49 h2 {
50     margin-top: 0.5em;
51     font-size: 150%;
52     margin-bottom: 0.2em;
53 }
54 h3 {
55     margin-top: 0.5em;
56     font-size: 135%;
57     margin-bottom: 0.1em;
58 }
59 h4 {
60     margin-top: 0.5em;
61     font-size: 120%;
62     margin-bottom: 0.0em;
63 }
64
65 /* Layout and Color stuff */
66
67 /* General page structure */
68 html {
69     overflow-y: scroll;
70 }
71 body { /* This centers us in the page, and handles the "too wide" case */
72     padding: 0;
73     margin: 0 auto;
74     background-color: $background-color;
75     max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
76 }
77 #-frame { /* Add a frame, full height */
78     margin: 0 $navi-width;
79     padding-top: $outer-margin;
80     border-left: solid $text-color 1px;
81     min-height: calc(100vh - #{$outer-margin});
82 }
83
84 /* The content of the frame */
85 #-content {
86     margin-left: $intrusion-width;
87     padding: $outer-margin;
88     padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
89 }
90
91 /* Navigation menu */
92 #-navi {
93     padding: 0;
94     margin: 0;
95     margin-left: -#{$navi-indent};
96     width: #{$navi-width + $navi-indent};
97     /* Put it into the right spot */
98     float: left;
99     position: relative;
100     left: calc(-#{$navi-width} - 1px);
101     /* Make it not take space away from the main text */
102     height: 0;
103     overflow: visible;
104
105     ul {
106         margin: 0;
107         padding: 0;
108         list-style-type: none;
109         /* Indentation for nested nodes */
110         margin-left: $navi-indent;
111     }
112     a {
113         display: block;
114         width: calc(100% - 2*0.25em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
115         padding: 0.08em 0.25em 0.02em; /* top left-right bottom */
116         /* Always have *one* border, for the width to stay constant */
117         border-left: solid transparent 1px;
118     
119         font-size:110%;
120         text-align: left;
121     }
122     a.current {
123         padding-top: 0.12em;
124         border: solid $text-color 1px;
125         border-right: none; /* solid $background-color 1px; */
126         background-color: $background-color;
127     }
128     a.root {
129         margin-top: 0.7em;
130         border-bottom: solid $text-color 1px;
131         margin-bottom: 0.3em;
132     }
133 }
134
135 /* Medium-size screens */
136 @media screen and (max-width:#{ $medium-width + $navi-width } ) {
137     body {
138         margin-left: 0;
139         max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
140     }
141     #-frame {
142         margin-right: 0;
143     }
144 }
145
146 /* Small screens */
147 @media screen and (max-width:#{ $small-width } ) {
148     html {
149         overflow-y: auto;
150     }
151     body, #-frame, #-content, #-navi {
152         margin: 0;
153         padding: 0;
154         height: auto;
155         width: auto;
156         max-width: none;
157         clear: both;
158         float: none;
159         position: static;
160     }
161     #-content {
162         padding: $outer-margin;
163     }
164     #-navi {
165         padding: $outer-margin;
166         border-bottom: solid $text-color 1px;
167
168         ul {
169             display: inline;
170             padding: 0;
171             margin: 0;
172         }
173         li {
174             display: inline-block;
175         }
176         /* Display only parent and children, and decorate them appropriately */
177         a {
178             display:inline-block;
179             margin: 0 0.3em !important;
180             padding: 0 !important;
181             border: none !important;
182             width: auto !important;
183         }
184         a.sibling {
185             display:none;
186         }
187         a.current {
188             text-decoration: underline;
189         }
190         li.parent::before, li.current:before {
191             content: "»";
192         }
193         li.child::before {
194             content: "»";
195         }
196         li.child + li.child::before {
197             content: "|";
198         }
199     }
200 }
201
202 /* Printing */
203 @media print {
204     body, #-frame, #-content {
205         margin: 0;
206         padding: 0;
207         width: auto;
208         max-width: none;
209         border: none;
210     }
211     #-title h1 {
212         border: none;
213     }
214     #-navi {
215         display: none;
216     }
217 }
218
219 /* Content styling */
220 #-content {
221     .side {
222         float: right;
223         color: $light-text-color;
224     }
225
226     .pretitle, .subtitle {
227         h1 {
228             display: inline-block;
229             font-size: 165%;
230         }
231         .side {
232             margin-left: 0.5em;
233             margin-top: 0.8em;
234         }
235     }
236     .pretitle {
237         margin-bottom: 1em;
238     }
239     .subtitle {
240         margin-top: 2em;
241     }
242     .title {
243         clear: both;
244         margin-bottom: 1em;
245     }
246
247     pre, code {
248         background-color: $code-background-color;
249         font-family: monospace;
250         font-size: 82%;
251     }
252     code {
253         padding: 0.1em 0.2em;
254     }
255     pre {
256         padding: 0.6em;
257     }
258     pre code {
259         padding: 0;
260         font-size: 100%;
261     }
262
263     p {
264         margin: 0.5em 0;
265         line-height: 1.3;
266     }
267 }