lektura

lektura.git
git clone git://git.lenczewski.org/lektura.git
Log | Files | Refs

navbar.css (1934B)

      1 .navbar {
      2 }
      3 
      4 .navbar-menu {
      5   margin-top: 0;
      6   margin-bottom: 0;
      7   list-style: none;
      8 }
      9 
     10 .navbar-menu li {
     11   display: inline-block;
     12 }
     13 
     14 .navbar-toggle-label {
     15   cursor: pointer;
     16 }
     17 
     18 /* css selector explanation
     19  * --
     20  *  .navbar-toggle ~ .navbar-menu li { ... }
     21  * --
     22  *  - given an element with the `navbar-toggle` class,
     23  *    - for all subsequent siblings with the `navbar-menu` class,
     24  *      - for all their children of type <li>
     25  *
     26  * --
     27  *  .navbar-toggle:checked + .navbar-menu { ... }
     28  * --
     29  *  - given an element with the `navbar-toggle` class, that is currently checked
     30  *    - if its immediate (first next) sibling has the `navbar-menu` class
     31  */
     32 
     33 /* on mobile ... */
     34 @media screen and (max-width:576px) {
     35   /* always display the hamburger menu button */
     36   .navbar-toggle-label {
     37     display: inline-block;
     38   }
     39 
     40   /* dont pad navbar menu ... */
     41   .navbar-menu {
     42     padding: 0;
     43   }
     44 
     45   /* ... unless the hamburger menu button has been clicked */
     46   .navbar-toggle:checked + .navbar-menu {
     47     padding: 1em;
     48   }
     49 
     50   /* never display the remaining list items ... */
     51   .navbar-toggle ~ .navbar-menu li {
     52     display: none;
     53   }
     54 
     55   /* ... unless the hamburger menu button has been clicked */
     56   .navbar-toggle:checked ~ .navbar-menu li {
     57     display: block;
     58   }
     59 
     60   /* never display the bottom navbar border ... */
     61   .navbar-divider {
     62     display: none;
     63   }
     64 
     65   /* ... unless the hamburger menu buttong has been clicked */
     66   .navbar-toggle:checked ~ .navbar-divider {
     67     display: block;
     68   }
     69 }
     70 
     71 /* on desktop ... */
     72 @media screen and (min-width:577px) {
     73   /* never display the hamburger menu */
     74   .navbar-toggle-label {
     75     display: none;
     76   }
     77 
     78   /* always have 1em of padding around the navbar items */
     79   .navbar-menu {
     80     padding: 1em;
     81   }
     82 
     83   /* always display the remaining list items */
     84   .navbar-menu li {
     85     display: inline-block;
     86   }
     87 
     88   /* always display the bottom navbar border */
     89   .navbar-divider {
     90     display: block;
     91   }
     92 }