Media Queries

Authoring stylesheets these days without media queries is somewhat like having prime rib without horseradish. Garden provides the at-media function available in the garden.stylesheet namespace.

user=> (require '[garden.stylesheet :refer [at-media]])
nil
user=> (css (at-media {:screen true} [:h1 {:font-weight "bold"}]))
"@media screen{h1{font-weight:bold}}"
user=> (css
         (at-media {:min-width (px 768) :max-width (px 979)}
           [:container {:width (px 960)}]))
"@media (max-width:979px) and (min-width:768px){container{width:960px}}"

Media queries may also be nested:

user=> (css [:a {:font-weight "normal"}
             [:&:hover {:color "red"}]
             (at-media {:screen true}
               [:&:hover {:color "pink"}])])

and will out put the equivalent CSS:

a {
  font-weight: normal;
}

a:hover {
  color: red;
}

@media screen {

  a:hover {
    color: pink;
  }

}

To understand how media expressions are interpreted refer to this table:

Map	Interpretation
{:screen true}	screen
{:screen false}	not screen
{:screen true :braille false}	screen and not braille
{:screen :only}	only screen
{:min-width (px 768) :max-width (px 959)}	(min-width: 768px) and (max-width: 959)