---
@charset "utf-8";
+/* Variables */
+$navi-width: 11em;
+$navi-indent: 1.2em;
+$frame-max-width: 50em;
+$intrusion-width: 1.0em;
+$outer-margin: 0.8em;
+
+$small-width: $frame-max-width + 2*$outer-margin;
+$medium-width: $small-width + $intrusion-width + $navi-width;
+
+$background-color: white;
+$text-color: #313131;
+$light-text-color: #808080;
+$code-background-color: #F7F7F7;
+$link-color: #268BD2;
+
/* General Fonts */
html, body, div, p {
font-family: DejaVu Sans, Verdana, Arial, sans-serif;
font-size: 12pt;
+ color: $text-color;
+}
+/* Links */
+a {
+ text-decoration: none;
+ color: $link-color;
+}
+a:hover, a:focus {
+ text-decoration: underline;
}
/* Header Size & Spacing */
+h1, h2, h3, h4 {
+ color: $text-color;
+
+ a {
+ color: $text-color;
+ }
+}
h1 {
margin-top: 0.1em;
font-size: 200%;
- margin-bottom: 0.4em;
+ margin-bottom: 0.5em;
}
h2 {
margin-top: 0.5em;
}
/* Layout and Color stuff */
-$navi-width: 11em;
-$navi-indent: 1.2em;
-$frame-max-width: 50em;
-$intrusion-width: 0.8em;
-$outer-margin: 0.8em;
-$full-content-width: $frame-max-width + $navi-width + 2*$outer-margin + $intrusion-width;
-
-$frame-color: #121212;
-$title-color: #08f;
-$navi-color: #36ff00;
-$current-color: #ffa700;
-$background-color: white;
-$text-color: #313131;
-$code-background-color: #505050;
-$light-text-color: #888;
-$link-color: #268BD2;
-
/* General page structure */
body { /* This centers us in the page, and handles the "too wide" case */
padding: 0;
margin: 0 auto;
- color: $text-color;
background-color: $background-color;
- max-width: calc(#{$full-content-width + $navi-width} + 1px); /* add the right-hand "navi" for centering - and the border... ;-) */
+ max-width: calc(#{$medium-width + $navi-width} + 1px); /* add the right-hand "navi" space for centering - and the border... ;-) */
}
#-frame { /* Add a frame, full height */
margin: 0 $navi-width;
- padding-top: 1em;
+ padding-top: $outer-margin;
border-left: solid $text-color 1px;
- min-height: calc(100vh);
+ min-height: calc(100vh - #{$outer-margin});
}
/* The content of the frame */
-#-title h1 {
- margin: 0;
-}
#-content {
margin-left: $intrusion-width;
padding: $outer-margin;
- padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
+ padding-top: 1px; /* If we use 0 here, some paddings add up things get ugly. What?!? */
}
/* Navigation menu */
/* Put it into the right spot */
float: left;
position: relative;
- left: -#{$navi-width};
+ left: calc(-#{$navi-width} - 1px);
/* Make it not take space away from the main text */
height: 0;
overflow: visible;
}
a {
display: block;
- width: calc(100% - 2*0.1em - 2*1px + #{$intrusion-width});
- padding: 0 0.1em;
- /* Always have a border, for the width to stay constant */
- border: solid transparent 1px;
+ width: calc(100% - 2*0.1em - 1px + #{$intrusion-width}); /* minus the padding, the border, and plus how much we want to overlap */
+ padding: 0.08em 0.1em 0.02em; /* top left-right bottom */
+ /* Always have *one* border, for the width to stay constant */
+ border-left: solid transparent 1px;
- color: $link-color;
font-size:110%;
- text-decoration: none;
text-align: left;
}
a.current {
- padding-top: 0.1em;
- margin: 0.05em 0;
+ padding-top: 0.12em;
border: solid $text-color 1px;
- border-right: solid $background-color 1px;
+ border-right: none; /* solid $background-color 1px; */
background-color: $background-color;
}
a.root {
- margin-top: 0.5em;
+ margin-top: 0.7em;
border-bottom: solid $text-color 1px;
margin-bottom: 0.3em;
}
- a:hover, a:focus {
- text-decoration: underline;
- }
}
/* Medium-size screens */
-@media screen and (max-width:#{ $full-content-width } ) {
+@media screen and (max-width:#{ $medium-width + $navi-width } ) {
+ body {
+ margin-left: 0;
+ max-width: calc(#{ $medium-width} + 1px); /* add the left-hand *only* navi space for centering - and the border... ;-) */
+ }
#-frame {
margin-right: 0;
}
}
/* Small screens */
-@media screen and (max-width:#{ $frame-max-width } ) {
+@media screen and (max-width:#{ $small-width } ) {
body, #-frame, #-title, #-content, #-navi {
margin: 0;
padding: 0;
/* Content styling */
#-content {
- .subtitle .side {
+ .side {
float: right;
color: $light-text-color;
}
- code {
- padding: 0.1em 0.2em;
+ #-pretitle, .subtitle {
+ margin-bottom: 1em;
+
+ h1 {
+ display: inline-block;
+ font-size: 165%;
+ }
+ .side {
+ margin-left: 0.5em;
+ margin-top: 0.9em;
+ }
+ }
+ .subtitle {
+ margin-top: 2em;
+ }
+
+ #-title {
+ clear: both;
+ }
+
+ pre, code {
+ background-color: $code-background-color;
font-family: monospace;
font-size: 82%;
}
+ code {
+ padding: 0.1em 0.2em;
+ }
pre {
padding: 0.6em;
}
pre code {
- background-color: $code-background-color;
padding: 0;
+ font-size: 100%;
}
p {
margin: 0.5em 0;
line-height: 1.3;
}
- a {
- text-decoration: none;
- color:$link-color;
- }
- a:hover, a:focus {
- text-decoration: underline;
- }
}