945f31a716ac6487962f2bdad67247774049bee2
[web.git] / style.scss
1 ---
2 # YAML front matter
3 ---
4 @charset "utf-8";
5
6 /* General Fonts */
7 html, body, div, p {
8     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
9     font-size: 12pt;
10 }
11 /* Header Size & Spacing */
12 h1 {
13     margin-top: 0.1em;
14     font-size: 200%;
15     margin-bottom: 0.4em;
16 }
17 h2 {
18     margin-top: 0.5em;
19     font-size: 150%;
20     margin-bottom: 0.2em;
21 }
22 h3 {
23     margin-top: 0.5em;
24     font-size: 135%;
25     margin-bottom: 0.1em;
26 }
27 h4 {
28     margin-top: 0.5em;
29     font-size: 120%;
30     margin-bottom: 0.0em;
31 }
32
33 /* Layout and Color stuff */
34 $navi-width:      11em;
35 $outer-margin:    1em;
36 $frame-max-width: 52em;
37
38 $frame-color: #121212;
39 $title-color: #08f;
40 $navi-color: #36ff00;
41 $current-color: #ffa700;
42 $outer-background-color:  #505050;
43 $inner-background-color: #252525;
44 $text-color:             #DDD;
45 $link-color: #9ed2ff;
46 $link-color-visited: #bfe1ff;
47 $link-color-hover: #5089ba;
48
49
50 /* General page structure */
51 body { /* This centers us in the page, and handles the "too wide" case */
52     padding: $outer-margin;
53     margin: 0 auto;
54     color: $text-color;
55     background-color: $outer-background-color;
56     max-width: calc(#{$frame-max-width + 2 * $navi-width} + 2px);
57 }
58 #-frame { /* Add a frame */
59     margin: 0 $navi-width;
60     border: solid $frame-color 1px;
61     background-color: $inner-background-color;
62     border-radius: 10px;
63     min-height: calc(100vh - #{2* $outer-margin} - 2px);
64 }
65
66 /* The content of the frame */
67 #-title {
68     border-bottom: solid $title-color 2px;
69     text-align: center;
70 }
71 #-title h1 {
72     padding: 0 0.7em;
73     margin-bottom: 0;
74 }
75 #-content {
76     padding: 0.7em;
77     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
78 }
79
80 /* Navigation menu */
81 #-navi {
82     background-color: $outer-background-color;
83     /* No border, no padding, so all the width computations become easy. */
84     padding: 0;
85     margin: 0;
86     width: $navi-width;
87     /* Put it into the right spot */
88     float: left;
89     position: relative;
90     left: -#{$navi-width};
91     /* Make it not take space away from the main text */
92     height: 0;
93     overflow: visible;
94 }
95 #-navi ul {
96     margin: 0px;
97     padding: 0px;
98     list-style-type: none;
99 }
100 #-navi ul ul {
101     /* Indentation for nested nodes */
102     margin-left: 1.2em;
103 }
104 #-navi li {
105     /* Border around the links */
106     margin-bottom:0.1em;
107     background-color: $inner-background-color;
108     border-left: solid $navi-color 2px;
109     border-right: solid $navi-color 2px;
110     border-top-left-radius: 10px;
111     border-bottom-left-radius: 10px;
112 }
113 #-navi li a {
114     display: block;
115     width: 100%;
116     
117     color: $link-color;
118     font-size:110%;
119     text-decoration: none;
120     text-align: center;
121 }
122 #-navi li.current
123 {
124     border-color: $current-color;
125 }
126 #-navi li:hover {
127     border-color: $title-color;
128     border-radius: 0;
129 }
130 #-navi li:hover a {
131     color: $text-color;
132 }
133
134 /* Small screens */
135 @media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
136     body, #-frame, #-title, #-content, #-navi {
137         margin: 0;
138         width: auto;
139         max-width: none;
140         clear: both;
141     }
142     #-navi {
143         /* Place navi above the title */
144         float: none;
145         position: static;
146         background-color: $inner-background-color;
147         padding: 0;
148     }
149     #-navi ul, #-navi ul ul, #-navi li, #-navi li a {
150         margin: 0;
151         padding: 0;
152         display: inline;
153     }
154     #-navi > ul {
155         padding: 0.3em;
156         display: block;
157         border-bottom: solid $navi-color 2px;
158     }
159     /* Display only parent and children, and deocare them appropriately */
160     #-navi li {
161         display:inline-block;
162         margin: 0 0.2em;
163     }
164     #-navi li.sibling {
165         display:none;
166     }
167     #-navi li.parent:before, #-navi li.current:before {
168         content: "» ";
169     }
170     #-navi li.child:before {
171         content: "» ";
172     }
173     #-navi li.child + li:before {
174         content: "| ";
175     }
176     #-navi li {
177         border: none;
178     }
179     #-navi li.current a {
180         text-decoration: underline;
181     }
182 }
183
184 /* Printing */
185 @media print {
186     body, #-frame, #-title, #-content {
187         margin: 0;
188         padding: 0;
189         width: auto;
190         max-width: none;
191         border: none;
192     }
193     #-title h1 {
194         border: none;
195     }
196     #-navi {
197         display: none;
198     }
199 }
200
201 /* Content styling */
202 #-content {
203     code {
204         padding: 0.1em 0.2em;
205         background-color: $outer-background-color;
206         font-family: monospace;
207         font-size: 82%;
208     }
209     pre {
210         padding: 0.6em;
211         background-color: $outer-background-color;
212     }
213     pre code {
214         padding: 0;
215     }
216
217     p {
218         margin: 0.5em 0;
219         line-height: 1.3;
220     }
221     a {
222         color:$link-color;
223     }
224     a:visited {
225         color:$link-color-visited;
226     }
227     a:hover {
228         color:$link-color-hover;
229     }
230 }