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