Sta.sh
in the previous issues, I featured some deviations that were suggested to me that I chose not to feature. In this issue, I will feature some work by people who made me several suggestions, as a Thank You to them 
:thu
And it's not gonna be brief 
:thu
I'll be featuring 10-15 pieces of fan art, by fandom each week. This week will start with my all time favourite musical and book, Phantom of the Opera as suggested by `TouchedVenus 
First, a quick primer, which probably consists of information that most of you already know.
.text { color: blue; }
@media only screen and (max-width:480px) {
.text { color: red; }
}
...suddenly you have blue text at normal resolutions, and red text on a smartphone. Or on a browser which has been resized down to be really narrow.
In fact, try it out on this article! If you resize your window right now to make it narrower, it should magically invert its colors. Madness!
As an example of where this might be particularly useful, let's consider the #hq site update articles with that big ol' sidebar.
It looks like:
If we add this CSS:
@media only screen and (max-width:480px) {
.sidebar { display:none; }
.text { padding-left:33px; }
.gr-box { background-image:none; }
}
It can now look like:
This is awesome, and makes writing skins targeting multiple resolutions far easier. Unfortunately, dA skins don't support it. It'd be a pain to add in support for writing arbitrary media queries, because our CSS parser just plain isn't set up to handle it at the moment.
So we're adding in a way to target mobile resolutions with a special class.
Instead of
@media only screen and (max-width:480px), you'll add a class selector like .da-media[mobile], and it'll be magically transformed onto a media query wrapping that rule.The above example becomes:
.da-media[mobile] .sidebar { display:none; }
.da-media[mobile] .text { padding-left:33px; }
.da-media[mobile] .gr-box { background-image:none; }
Right now
[mobile] is the only media type supported. We may add others in the future, which is why we decided to have it explicitly stated in the current code.A few things to keep in mind:
- It's called "mobile", but that doesn't mean it'll only trigger when you're viewing the mobile version of dA. Anyone with a narrow enough browser window will see it. You can even watch it switching back and forth by resizing your window.
- "Narrow enough" in this case means 767px. We might choose to tweak this value in the future, if it seems to make sense to do so.
- This still won't help with pages like the blog index page, where you can have a pretty wide screen and still be forced into a narrow column.
Enjoy.
This is the code I used:
The images I used for the header and footer, I noticed they get cut off when resizing a window, so I thought that mobile code would help with that. And I thought it was working okay, except, I found that one specific link messes it up, as though the window thinks it's smaller than it is or something, and the 109% code makes the footer huge. It doesn't seem to effect the header image, though.