Custom Media Queries

[smhanes]

trafficstars

In your custom SCSS files, you can do things such as @extend %aura-container, %measure, etc for custom styling on the tags you put those commands in, say #page.

Can you do something similar with media queries, so say I could have auto-generated media queries with custom styling for certain regions based upon min-width requirements?

ie:

Say I want to conditionally style the following:

@media screen and (min-width: 1px) and (max-width: 800px) { #site-name, #site-slogan { display: inline !important; float: left !important; clear: both !important; width: 100% !important; } #site-slogan { font-size: 1.3em; } #logo, #name-and-slogan, #sla-logo-and-site-search { width: 100% !important; margin: 0 auto !important; margin-top: 1em !important; padding: 0 10px !important; display: inline !important; text-align: center !important; } #sla-logo { float: left !important; } #block-search-form { padding-right: 0 !important; } }

Is this possible as Aurora currently stands?

[Snugug]

Aura comes with a Media Query API that will soon be changing, but for the time being, take a look at the following: http://snugug.github.com/Aura/#media-query-api

That will let you write all the media queries you'd like.

That being said, that's a hell of a lot of !importants, no?

[smhanes]

Heh, yeap.. but every single one of those is being set elsewhere and so I have to make sure they're not overridden later on. Also, I threw the media query in manually, and so they 'might' not be necessary once I use the media query api.

Thanks.