Custom Media Queries

[smhanes]

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.