lektura

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

navbar.css (1153B)

      1 .navbar {
      2   padding-left: 1em;
      3   padding-right: 1em;
      4 }
      5 
      6 .navbar-menu {
      7   padding: 0;
      8   margin: 0;
      9   list-style: none;
     10 }
     11 
     12 .navbar-menu li {
     13   display: inline-block;
     14 }
     15 
     16 .navbar-toggle-label {
     17   cursor: pointer;
     18 }
     19 
     20 /* css selector explanation
     21  * --
     22  *  .navbar-toggle ~ .navbar-menu li { ... }
     23  * --
     24  *  - given an element with the `navbar-toggle` class,
     25  *    - for all subsequent siblings with the `navbar-menu` class,
     26  *      - for all their children of type <li>
     27  */
     28 
     29 /* on mobile ... */
     30 @media screen and (max-width:576px) {
     31   /* always display the hamburger menu */
     32   .navbar-toggle ~ .navbar-menu li:first-child {
     33     display: inline-block;
     34   }
     35 
     36   /* never display the remaining list items ... */
     37   .navbar-toggle ~ .navbar-menu li {
     38     display: none;
     39   }
     40 
     41   /* ... unless the hamburger menu button has been clicked */
     42   .navbar-toggle:checked ~ .navbar-menu li {
     43     display: block;
     44   }
     45 }
     46 
     47 /* on desktop ... */
     48 @media screen and (min-width:577px) {
     49   /* never display the hamburger menu */
     50   .navbar-menu li:first-child {
     51     display: none;
     52   }
     53 
     54   /* always display the remaining list items */
     55   .navbar-menu li {
     56     display: inline-block;
     57   }
     58 }