docs/style.css

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