/ittf/site/docs/styles/t/header.css.ittf (primary)

edit 
                                            
   1 $group
   2     < header .flexbox
   3         display flex
   4         height 50px
   5     < header
   6         padding 15px
   7         background darken(#333, 3%)
   8         < h1, nav
   9             display inline-block
  10         . flexbox
  11             display flex
  12             height 50px
  13             & > *
  14                 margin auto
  15         . logo
  16             display block
  17             < img
  18                 margin-top -7px
  19         . search .svg-icons
  20             display none
  21     < nav, .meta
  22         < ul
  23             padding 0
  24             margin 0
  25             white-space nowrap
  26             display inline-block
  27         < li
  28             display inline-block
  29     . meta ul
  30         margin-left 10px
  31         < li
  32             vertical-align middle
  33     . main-nav, .meta
  34         < li
  35             < a
  36                 border-radius 5px
  37                 font-weight 900
  38                 font-size 0.75em
  39                 padding 0.5em 1em
  40                 text-shadow none
  41                 text-transform uppercase
  42                 transition all .25s
  43                 & :hover
  44                     background-color #252525
  45                     box-shadow inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1)
  46                     text-shadow 0 1px 3px rgba(0,0,0,.5)
  47             & .current
  48                 < a
  49                     background-color #fc0
  50                     color #222
  51                     box-shadow inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)
  52                     text-shadow 0 1px 0 rgba(255,255,255,.3)
  53     . mobile-nav
  54         padding 0 5px
  55         < ul
  56             overflow hidden
  57             width 100%
  58             display table
  59         < a
  60             float left
  61             width 100%
  62             background-color #333
  63             color #fc0
  64             text-align center
  65             text-transform uppercase
  66             font-size 0.625em
  67             font-weight 900
  68             padding 10px 5px
  69             border-radius 5px
  70         < li
  71             display table-cell
  72             width 20%
  73             padding 8px 2px
  74         . current
  75             < a
  76                 background-color #fc0
  77                 color #222
  78                 box-shadow inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)
  79                 text-shadow 0 1px 0 rgba(255,255,255,.3)
  80         - This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com
  81             - http://ben.balter.com/2014/03/13/pages-anchor-links/
  82     . header-link
  83         position relative
  84         left 0.5em
  85         opacity 0
  86         font-size 0.8em
  87         transition opacity 0.2s ease-in-out 0.1s
  88     < h2:hover .header-link
  89         + h3:hover .header-link
  90         + h4:hover .header-link
  91         + h5:hover .header-link
  92         + h6:hover .header-link
  93             opacity 1
  94     media (max-width: 580px)
  95         < header
  96             . flexbox
  97                 height auto
  98             . logo img
  99                 margin-top 0
 100     media (max-width: 699px)
 101         . searchbox
 102             display none
 103     media (max-width: 768px)
 104         . main-nav ul
 105             text-align right
 106     media (max-width: 830px)
 107         . main-nav
 108             . show-on-mobiles
 109                 display inline
 110             . hide-on-mobiles
 111                 display none
 112     media (max-width: 890px)
 113         . meta
 114             display none