style.clj

(def menu
  [[:body.show-header-menu
    [:header
     [:nav
      {:max-height (px 450)}]
     hamburger-to-x]]

   [:body.show-footer-menu
    [:footer
     [:nav
      {:max-height (px 450)}]
     hamburger-to-x]]

   [:.menu
    (underline green (px -1))
    [:button
     (at-medium
       {:display :none})
     (link)
     {:display :block
      :margin [[0 :auto]]}
     [:&:before
      {:background green}]
     hamburger]

    [:nav
     (at-medium
       {:background white
        :max-height (px 450)})
     {:position :relative
      :background green
      :padding-left (px 20)
      :padding-right (px 20)
      :max-height 0
      :overflow :hidden
      :transition [[:max-height "500ms" :ease]]}

     [:a
      {:color white}]

     [:ul.main-nav
      (at-medium
        {:text-align :justify
         :line-height 0}
        [:.facebook
         {:display :none}]
        [:li
         {:display :inline-block
          :vertical-align :bottom}
         [:&:after
          {:line-height 0
           :visibility :hidden}]]
        [:&:after
         {:content "''"
          :width (percent 100)
          :display :inline-block
          :font-size 0
          :line-height 0}]
        hamburger
        [:a
         {:color black
          :text-align :left
          :display :inline-block
          :line-height (px 29)}
         [:&:before
          {:background green}]])
      {:font-size (px 24)
       :line-height (px 29)}
      [:li
       {:margin-top (px 20)}
       (underline white (px -1))]]

     (clearfix)
     [:ul.sub-nav
      (at-medium
        {:background green
         :display :none})
      (column 1/2)
      {:font-size (px 19)
       :line-height (px 23)
       :margin-top (px 10)
       :margin-bottom (px 30)}
      [:.portfolio
       {:display :none}]
      [:&.column-1
       {:float :left}]
      [:&.column-2
       {:float :right
        :position :relative
        :padding-left (px 25)}
       [:&:before
        {:content "''"
         :opacity 0.4
         :background-color white
         :position :absolute
         :top (px 20)
         :bottom (px -10)
         :left 0
         :width (px 1)}]]
      [:li
       {:margin-top (px 10)}]]
     [:.facebook :.roof :.hamburger
      {:display :none}]]]])