style.css

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