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