How to use Media Query with Purescript CSS

Help
#1

I’m trying to declare a media query for the CSS I’m using, written with purescript-css. Does anyone have a snippet that demonstrates this? The Media Query type in CSS.Stylesheet is

MediaQuery (Maybe NotOrOnly) MediaType (NonEmpty Array Feature)

I’m not sure where to put this. Then I see

query :: MediaType -> NonEmpty Array Feature -> CSS -> CSS

If anyone has an example of this it would be greatly appreciated.

#2

Can you post a snippet of what you’re working on? I’m looking through the documentation for purescript-css and it looks like there might be multiple ways to do things, so it would be helpful to see what you have so far.

1 Like
#3

I’m using it like so

import Halogen.HTML.CSS         as HCSS

stylesheet = HCSS.stylesheet do
  body

where body is a CSS function like

body :: CSS.CSS
body = 
  CSS.fromString "body" ? do
    margin 0.0

I think I understand now actually. I found the CSS.Media module which I was not looking at earlier and there is a function “screen” which is the MediaType I need for the query function. It also has a maxWidth function so guessing I can set it like this (haven’t checked this)

query screen (singleton [maxWidth $ CSS.px 1200.0]) myCSS

This would return a CSS so I’m guessing I can do this inside the CSS definitions I already have.

#4

I think you’re right. I was able to get this:

media :: CSS.CSS
media = CSS.query CSS.Media.screen features bodyStyle
  
bodyStyle :: CSS.CSS
bodyStyle = CSS.select CSS.body (CSS.backgroundColor $ Color.rgb 255 0 0)
  
features :: Data.NonEmpty.NonEmpty Array CSS.Feature
features = Data.NonEmpty.singleton $ CSS.Media.maxWidth $ CSS.px 1000.0

Which it turns into:

@media screen and (max-width: 1000.0px) { body { background-color: hsl(0.0, 100.0%, 50.0%) }
 }

I wasn’t sure how to add it to the page stylesheet, but Halogen covers that.

1 Like
#5

sweet! yup that does it for me