-
-
Save pjaspers/accff59f5cd5a8f8023e to your computer and use it in GitHub Desktop.
| <div id="sha-stamp" class="sha-stamp"> | |
| <span class="sha-stamp__what-do-I-call-this?"> | |
| <small class="sha-stamp__content">#{content}</small> | |
| </span> | |
| </div> |
(It's for the thing in the bottom right corner: http://canadiaweather.herokuapp.com/lavigne )
As for what's up with both an id and a class; I'd like set some basic styles but give someone else the ability the override those by using the id selector.
Can you add the css file so we can see what each class does?
<style>
#sha-stamp {
position: fixed; bottom: 0; right: 0;
height: 16px;
background: rgb(0, 0, 0) transparent; background-color: rgba(0, 0, 0, 0.2);
padding: 0 5px;
border-top-left-radius: 5px;
z-index: 2147483647; font-size: 12px;
}
#sha-stamp span {
text-align: center;
}
#sha-stamp span small {
color: white;
font-weight: normal;font-size: 12px;
}
</style>
Why the span and the div? :)
<small id="sha-stamp" class="sha-stamp">#{content}</small>.sha-stamp {
z-index: 2147483647;
position: fixed;
bottom: 0;
right: 0;
display: block;
height: 16px;
padding: 0 5px;
background-color: rgba(0, 0, 0, .2);
border-top-left-radius: 5px;
font-size: 12px;
font-weight: normal;
text-align: center;
color: white;
}
.sha-stamp
.sha-stamp__contentwrapper
.sha-stamp__content
AND WHAT ABOUT THAT Z-INDEX BRO? :)
IT'S THE HIGHEST Z INDEX YOU CAN GET!
@IbeVanmeenen the div because that feels less hacky, you might be right about the span being superfluos. Thanks
@bramus that actually makes sense. Thanks
@pjaspers About that ID, just include the user CSS after yours, it'll still overwrite without requiring the ID?
@chrisrowe yes, but that will be hard to do, I'm "injecting" this html into a running app. So basically replacing </ body> with a <style> block and the html on each request.
I want whoever is running the app (and is using my little tool) to add snippets to her css (which is probably defined in <head>) that can override my style block which is defined at the end of the file.
Figured there would be an odd use case
@IbeVanmeenen more on the ridiculous high z number: pjaspers/shack@4a87296
@pjaspers awesome :).
Also: "the div because that feels less hacky". Don't really get that :)
I meant, since I'm injecting my html into a running app, it feels less wrong to inject a div. That way I'm always sure I'm containing my hackery into a single div. Probably just semantic nitpicking.
What's that you say? "But Piet, if you're so semantically inclined, what's up with the <small>, isn't that conflicting style and markup?"
Well, you've got me there.
You sir, are a gentleman and a scholar.
It's a small block, does the span need a name as well? And if I give the span a name, does the
smallneed one as well?