c20dedfbe7bea9f295aa8efadff8e8e174633917
[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     /* No border, no padding, so all the width computations become easy. */
83     float: left;
84     background-color: $outer-background-color;
85     width: $navi-width;
86     padding: 0;
87     margin: 0;
88     position: relative;
89     left: -#{$navi-width};
90     margin-bottom: calc(-100% - #{$frame-max-width});
91 }
92 #navi ul {
93     margin: 0px;
94     padding: 0px;
95     list-style-type: none;
96 }
97 #navi ul ul {
98     /* Indentation for nested nodes */
99     margin-left: 1.2em;
100 }
101 #navi li {
102     /* Border around the links */
103     margin-bottom:0.1em;
104     background-color: $inner-background-color;
105     border-left: solid $navi-color 2px;
106     border-right: solid $navi-color 2px;
107     border-top-left-radius: 10px;
108     border-bottom-left-radius: 10px;
109 }
110 #navi li a {
111     display: block;
112     width: 100%;
113     
114     color: $link-color;
115     font-size:110%;
116     text-decoration: none;
117     text-align: center;
118 }
119 #navi li.current
120 {
121     border-color: $current-color;
122 }
123 #navi li:hover {
124     border-color: $title-color;
125     border-radius: 0;
126 }
127 #navi li:hover a {
128     color: $text-color;
129 }
130
131 /* Small screens */
132 @media screen and (max-width:#{ $frame-max-width + 2 * $outer-margin } ) {
133     body, #frame, #title, #content, #navi {
134         margin: 0;
135         width: auto;
136         max-width: none;
137         clear: both;
138     }
139     #navi {
140         /* Place navi above the title */
141         float: none;
142         position: static;
143         background-color: $inner-background-color;
144         padding: 0;
145     }
146     #navi ul, #navi ul ul, #navi li, #navi li a {
147         margin: 0;
148         padding: 0;
149         display: inline;
150     }
151     #navi > ul {
152         padding: 0.3em;
153         display: block;
154         border-bottom: solid $navi-color 2px;
155     }
156     /* Display only parent and children, and deocare them appropriately */
157     #navi li {
158         display:inline-block;
159         margin: 0 0.2em;
160     }
161     #navi li.sibling {
162         display:none;
163     }
164     #navi li.parent:before, #navi li.current:before {
165         content: "» ";
166     }
167     #navi li.child:before {
168         content: "» ";
169     }
170     #navi li.child + li:before {
171         content: "| ";
172     }
173     #navi li {
174         border: none;
175     }
176     #navi li.current a {
177         text-decoration: underline;
178     }
179 }
180
181 /* Printing */
182 @media print {
183     body, #frame, #title, #content {
184         margin: 0;
185         padding: 0;
186         width: auto;
187         max-width: none;
188         border: none;
189     }
190     #title h1 {
191         border: none;
192     }
193     #navi {
194         display: none;
195     }
196 }
197
198 /* RST styling */
199 article.rst dt {
200     font-weight: bold;
201 }
202 article.rst dd {
203     margin-bottom: 1em;
204 }
205 article.rst a.rst-footnote {
206     vertical-align: super;
207 }
208 article.rst div.rst-footnote {
209     display: table;
210 }
211 article.rst div.rst-footnote > * {
212     display: table-cell;
213 }
214 article.rst div.rst-footnote a {
215     min-width: 3em;
216 }
217 article.rst .rst-literal, article.rst pre {
218     font-family: monospace;
219     font-size: 82%;
220 }
221 article.rst .rst-literal {
222     padding: 0.1em 0.2em;
223     background-color: $outer-background-color;
224 }
225 article.rst pre {
226     padding: 0.6em;
227     background-color: $outer-background-color;
228 }
229
230 /* Content styling */
231 #content p {
232     margin: 0.5em 0;
233     line-height: 1.3;
234 }
235 #content a {
236     color:$link-color;
237 }
238 #content a:visited {
239     color:$link-color-visited;
240 }
241 #content a:hover {
242     color:$link-color-hover;
243 }