docs/style.css

   1 /* SPDX-License-Identifier: LGPL-2.1-or-later */
   2
   3 @font-face {
   4     font-family: 'Heebo';
   5     src: url('fonts/heebo-regular.woff');
   6     font-weight: 400;
   7 }
   8
   9 @font-face {
  10     font-family: 'Heebo';
  11     src: url('fonts/heebo-bold.woff');
  12     font-weight: 600;
  13 }
  14
  15 /* Typography */
  16 * {
  17   -moz-box-sizing: border-box;
  18   -webkit-box-sizing: border-box;
  19   box-sizing: border-box;
  20 }
  21 html, body {
  22   margin: 0;
  23   padding: 0;
  24   font-size: 16px;
  25   font-family: "Heebo", sans-serif;
  26   font-weight: 400;
  27   line-height: 1.6;
  28 }
  29 body {
  30   color: #241f31;
  31   background-color: #f6f5f4;
  32 }
  33 h1, h2, h3, h4, h5, h6 {
  34   margin: 1rem 0 10px;
  35   font-weight: 600;
  36   line-height: 1.25;
  37 }
  38 h1 {
  39   text-align: center;
  40   font-size: 30px;
  41   font-weight: 100;
  42   font-style: normal;
  43   margin-bottom: 2rem;
  44 }
  45 @media screen and (min-width: 650px) {
  46   h1 {
  47     margin-left: 10%;
  48     margin-right: 10%;
  49     font-size: 38px;
  50   }
  51 }
  52 h2 {
  53   margin-top: 3rem;
  54   font-size: 1.2rem;
  55 }
  56 a {
  57   font-weight: 600;
  58   text-decoration: none;
  59   color: #26b763;
  60   cursor: pointer;
  61 }
  62 a:hover {
  63   text-decoration: underline;
  64 }
  65 b {
  66   font-weight: 600;
  67 }
  68 small {
  69   color: #777;
  70 }
  71 hr {
  72   margin: 3rem auto 4rem;
  73   width: 40%;
  74   opacity: 40%;
  75 }
  76
  77 /* Layout */
  78 .container {
  79   width: 80%;
  80   margin-left: auto;
  81   margin-right: auto;
  82   max-width: 720px;
  83 }
  84
  85 /* Singletons */
  86 .page-logo {
  87   display: block;
  88   padding: 5rem 0 3rem;
  89 }
  90 .page-logo > img {
  91   display: block;
  92   margin: 0 auto;
  93 }
  94
  95 .brand-white {
  96   background-color: #fff;
  97 }
  98
  99 .brand-green {
 100   background-color: #30D475;
 101 }
 102
 103 .brand-black {
 104   background-color: #201A26;
 105   color: white;
 106 }
 107
 108 .page-link::after {
 109   content: " ➜";
 110 }
 111
 112
 113 /* Footer */
 114 footer {
 115   text-align: center;
 116   padding: 3em 0 3em;
 117   font-size: 1em;
 118   margin-top: 4rem;
 119 }
 120
 121 /* Make tables vertically aligned to the top */
 122 tbody td {
 123   vertical-align: top;
 124 }
 125
 126 /* Github Code Highlighting */
 127 .highlight table td { padding: 5px; }
 128 .highlight table pre { margin: 0; }
 129 .highlight .cm {
 130   color: #999988;
 131   font-style: italic;
 132 }
 133 .highlight .cp {
 134   color: #999999;
 135   font-weight: bold;
 136 }
 137 .highlight .c1 {
 138   color: #999988;
 139   font-style: italic;
 140 }
 141 .highlight .cs {
 142   color: #999999;
 143   font-weight: bold;
 144   font-style: italic;
 145 }
 146 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
 147   color: #999988;
 148   font-style: italic;
 149 }
 150 .highlight .err {
 151   color: #a61717;
 152   background-color: #e3d2d2;
 153 }
 154 .highlight .gd {
 155   color: #000000;
 156   background-color: #ffdddd;
 157 }
 158 .highlight .ge {
 159   color: #000000;
 160   font-style: italic;
 161 }
 162 .highlight .gr {
 163   color: #aa0000;
 164 }
 165 .highlight .gh {
 166   color: #999999;
 167 }
 168 .highlight .gi {
 169   color: #000000;
 170   background-color: #ddffdd;
 171 }
 172 .highlight .go {
 173   color: #888888;
 174 }
 175 .highlight .gp {
 176   color: #555555;
 177 }
 178 .highlight .gs {
 179   font-weight: bold;
 180 }
 181 .highlight .gu {
 182   color: #aaaaaa;
 183 }
 184 .highlight .gt {
 185   color: #aa0000;
 186 }
 187 .highlight .kc {
 188   color: #000000;
 189   font-weight: bold;
 190 }
 191 .highlight .kd {
 192   color: #000000;
 193   font-weight: bold;
 194 }
 195 .highlight .kn {
 196   color: #000000;
 197   font-weight: bold;
 198 }
 199 .highlight .kp {
 200   color: #000000;
 201   font-weight: bold;
 202 }
 203 .highlight .kr {
 204   color: #000000;
 205   font-weight: bold;
 206 }
 207 .highlight .kt {
 208   color: #445588;
 209   font-weight: bold;
 210 }
 211 .highlight .k, .highlight .kv {
 212   color: #000000;
 213   font-weight: bold;
 214 }
 215 .highlight .mf {
 216   color: #009999;
 217 }
 218 .highlight .mh {
 219   color: #009999;
 220 }
 221 .highlight .il {
 222   color: #009999;
 223 }
 224 .highlight .mi {
 225   color: #009999;
 226 }
 227 .highlight .mo {
 228   color: #009999;
 229 }
 230 .highlight .m, .highlight .mb, .highlight .mx {
 231   color: #009999;
 232 }
 233 .highlight .sb {
 234   color: #d14;
 235 }
 236 .highlight .sc {
 237   color: #d14;
 238 }
 239 .highlight .sd {
 240   color: #d14;
 241 }
 242 .highlight .s2 {
 243   color: #d14;
 244 }
 245 .highlight .se {
 246   color: #d14;
 247 }
 248 .highlight .sh {
 249   color: #d14;
 250 }
 251 .highlight .si {
 252   color: #d14;
 253 }
 254 .highlight .sx {
 255   color: #d14;
 256 }
 257 .highlight .sr {
 258   color: #009926;
 259 }
 260 .highlight .s1 {
 261   color: #d14;
 262 }
 263 .highlight .ss {
 264   color: #990073;
 265 }
 266 .highlight .s, .highlight .sa, .highlight .dl {
 267   color: #d14;
 268 }
 269 .highlight .na {
 270   color: #008080;
 271 }
 272 .highlight .bp {
 273   color: #999999;
 274 }
 275 .highlight .nb {
 276   color: #0086B3;
 277 }
 278 .highlight .nc {
 279   color: #445588;
 280   font-weight: bold;
 281 }
 282 .highlight .no {
 283   color: #008080;
 284 }
 285 .highlight .nd {
 286   color: #3c5d5d;
 287   font-weight: bold;
 288 }
 289 .highlight .ni {
 290   color: #800080;
 291 }
 292 .highlight .ne {
 293   color: #990000;
 294   font-weight: bold;
 295 }
 296 .highlight .nf, .highlight .fm {
 297   color: #990000;
 298   font-weight: bold;
 299 }
 300 .highlight .nl {
 301   color: #990000;
 302   font-weight: bold;
 303 }
 304 .highlight .nn {
 305   color: #555555;
 306 }
 307 .highlight .nt {
 308   color: #000080;
 309 }
 310 .highlight .vc {
 311   color: #008080;
 312 }
 313 .highlight .vg {
 314   color: #008080;
 315 }
 316 .highlight .vi {
 317   color: #008080;
 318 }
 319 .highlight .nv, .highlight .vm {
 320   color: #008080;
 321 }
 322 .highlight .ow {
 323   color: #000000;
 324   font-weight: bold;
 325 }
 326 .highlight .o {
 327   color: #000000;
 328   font-weight: bold;
 329 }
 330 .highlight .w {
 331   color: #bbbbbb;
 332 }
 333 .highlight {
 334   background-color: #f8f8f8;
 335 }
 336
 337
 338 /* Code Blocks */
 339 .highlighter-rouge {
 340   padding: 2px 1rem;
 341   border-radius: 5px;
 342   background-color: white;
 343
 344   overflow: auto;
 345 }
 346 .highlighter-rouge * {
 347   background-color: white;
 348 }
 349
 350 /* Inline Code */
 351 code.highlighter-rouge {
 352   padding: 2px 6px;
 353   background-color: rgba(0,0,0, 0.07);
 354 }