55
66/** ============== Layout =============== **/ 
77
8- html , 
9- body  {
10-     height :  100%  ;
11- }
12- 
138body  {
149    background-color :  # fff ;
1510    padding :  0 ;
2520    font-weight :  300 ;
2621    font-size :  42px  ;
2722    color :  # 285786 ;
28-     margin :  0.5 em   0  0.5em   0 ;
23+     margin :  0  0  0.5em   0 ;
2924}
3025.typography  h2  {
3126    position :  relative;
5853    line-height :  1.5em  ;
5954    margin :  1em   0 ;
6055    border-bottom :  1px   solid # eee ;
56+     overflow :  auto;
6157}
6258.typography  dl .specs  dt  {
6359    float :  left;
@@ -91,12 +87,26 @@ body {
9187/** ================= GRID =================== **/ 
9288
9389.container  {
94-     margin :  0  auto;
95-     padding :  0  40px  ;
90+     padding :  0  20px  ;
9691    max-width :  1200px  ;
9792}
93+ 
94+ @media  (min-width :  768px  ) {
95+     .container  {
96+         margin :  0  auto;
97+     }
98+ }
99+ 
98100.container .main  {
99-     padding :  100px   40px  ;
101+     padding-top :  20px  ;
102+     padding-bottom :  20px  ;
103+ }
104+ 
105+ @media  (min-width :  768px  ) {
106+     .container .main  {
107+         padding-top :  40px  ;
108+         padding-bottom :  40px  ;
109+     }
100110}
101111
102112.row  {
@@ -131,7 +141,7 @@ body {
131141    margin-left :  8.3333333333%  ;
132142}
133143
134- @media  (max-width :  768 px  ) {
144+ @media  (max-width :  767.98 px  ) {
135145    .col-sm-1  {
136146        display :  inline-block;
137147        box-sizing :  border-box;
@@ -173,7 +183,7 @@ body {
173183    margin-left :  16.6666666667%  ;
174184}
175185
176- @media  (max-width :  768 px  ) {
186+ @media  (max-width :  767.98 px  ) {
177187    .col-sm-2  {
178188        display :  inline-block;
179189        box-sizing :  border-box;
@@ -215,7 +225,7 @@ body {
215225    margin-left :  25%  ;
216226}
217227
218- @media  (max-width :  768 px  ) {
228+ @media  (max-width :  767.98 px  ) {
219229    .col-sm-3  {
220230        display :  inline-block;
221231        box-sizing :  border-box;
@@ -257,7 +267,7 @@ body {
257267    margin-left :  33.3333333333%  ;
258268}
259269
260- @media  (max-width :  768 px  ) {
270+ @media  (max-width :  767.98 px  ) {
261271    .col-sm-4  {
262272        display :  inline-block;
263273        box-sizing :  border-box;
@@ -299,7 +309,7 @@ body {
299309    margin-left :  41.6666666667%  ;
300310}
301311
302- @media  (max-width :  768 px  ) {
312+ @media  (max-width :  767.98 px  ) {
303313    .col-sm-5  {
304314        display :  inline-block;
305315        box-sizing :  border-box;
@@ -341,7 +351,7 @@ body {
341351    margin-left :  50%  ;
342352}
343353
344- @media  (max-width :  768 px  ) {
354+ @media  (max-width :  767.98 px  ) {
345355    .col-sm-6  {
346356        display :  inline-block;
347357        box-sizing :  border-box;
@@ -383,7 +393,7 @@ body {
383393    margin-left :  58.3333333333%  ;
384394}
385395
386- @media  (max-width :  768 px  ) {
396+ @media  (max-width :  767.98 px  ) {
387397    .col-sm-7  {
388398        display :  inline-block;
389399        box-sizing :  border-box;
@@ -425,7 +435,7 @@ body {
425435    margin-left :  66.6666666667%  ;
426436}
427437
428- @media  (max-width :  768 px  ) {
438+ @media  (max-width :  767.98 px  ) {
429439    .col-sm-8  {
430440        display :  inline-block;
431441        box-sizing :  border-box;
@@ -467,7 +477,7 @@ body {
467477    margin-left :  75%  ;
468478}
469479
470- @media  (max-width :  768 px  ) {
480+ @media  (max-width :  767.98 px  ) {
471481    .col-sm-9  {
472482        display :  inline-block;
473483        box-sizing :  border-box;
@@ -509,7 +519,7 @@ body {
509519    margin-left :  83.3333333333%  ;
510520}
511521
512- @media  (max-width :  768 px  ) {
522+ @media  (max-width :  767.98 px  ) {
513523    .col-sm-10  {
514524        display :  inline-block;
515525        box-sizing :  border-box;
@@ -551,7 +561,7 @@ body {
551561    margin-left :  91.6666666667%  ;
552562}
553563
554- @media  (max-width :  768 px  ) {
564+ @media  (max-width :  767.98 px  ) {
555565    .col-sm-11  {
556566        display :  inline-block;
557567        box-sizing :  border-box;
@@ -593,7 +603,7 @@ body {
593603    margin-left :  100%  ;
594604}
595605
596- @media  (max-width :  768 px  ) {
606+ @media  (max-width :  767.98 px  ) {
597607    .col-sm-12  {
598608        display :  inline-block;
599609        box-sizing :  border-box;
@@ -615,31 +625,30 @@ body {
615625/** ============== Header =============== **/ 
616626
617627header  {
618-     position :  absolute;
619-     z-index :  1024 ;
620-     top :  0 ;
621-     left :  0 ;
622-     width :  100%  ;
623-     height :  60px  ;
624628    background-color :  # fff ;
625629    box-shadow :  0  0  4px   rgba (0 ,  0 ,  0 ,  0.5 );
626630    text-transform :  uppercase;
627-     font-size :  20px  ;
628631}
632+ 
633+ @media  (min-width :  768px  ) {
634+     header  .container  {
635+         display :  flex;
636+         justify-content :  space-between;
637+     }
638+ }
639+ 
629640header  .logo  {
630641    padding-left :  37px  ;
631-     float :  left;
632642    text-decoration :  none;
633643    color :  var (--color-text );
644+     font-size :  20px  ;
634645    line-height :  60px  ;
646+     height :  60px  ;
647+     display :  block;
635648    background-image :  url(../ images/logo-32.png);
636649    background-repeat :  no-repeat;
637650    background-position :  left center;
638651}
639- header  nav  {
640-     text-align :  right;
641-     font-size :  0 ;
642- }
643652header  nav  ul  {
644653    display :  inline-block;
645654    padding :  0 ;
@@ -651,11 +660,10 @@ header nav li {
651660}
652661header  nav  a  {
653662    display :  inline-block;
654-     padding :   0   15 px  ;
663+     margin-right :   1 rem  ;
655664    color :  var (--color-text );
656665    text-decoration :  none;
657-     font-size :  20px  ;
658-     line-height :  60px  ;
666+     margin-bottom :  0.5rem  ;
659667    transition :  opacity 0.2s  ;
660668}
661669header  nav  a .current  {
@@ -665,6 +673,14 @@ header nav a:hover {
665673    opacity :  0.75 ;
666674}
667675
676+ @media  (min-width :  768px  ) {
677+     header  nav  a  {
678+         margin-bottom :  0 ;
679+         font-size :  20px  ;
680+         line-height :  60px  ;
681+     }
682+ }
683+ 
668684/** ============== Home =============== **/ 
669685
670686.content  {
@@ -707,9 +723,10 @@ header nav a:hover {
707723}
708724
709725/** ============== Navigation ============== **/ 
710- 
711726.navigation  {
712-     padding :  20px   20px   0  0 ;
727+     /* This !important is only necessary because the col classes set 
728+     margin-bottom to 0 */ 
729+     margin-bottom :  1.5rem   !important ;
713730}
714731.navigation  ul  {
715732    list-style :  none;
@@ -737,7 +754,15 @@ header nav a:hover {
737754    top :  0 ;
738755    max-height :  100vh  ;
739756    overflow-y :  auto;
757+     display :  none;
740758}
759+ 
760+ @media  (min-width :  768px  ) {
761+     .toc-container  {
762+         display :  inline-block;
763+     }
764+ }
765+ 
741766.toc-container  ol  {
742767    list-style :  none;
743768    padding-left :  20px  ;
0 commit comments