Created
January 10, 2012 11:04
-
-
Save tkbremnes/1588495 to your computer and use it in GitHub Desktop.
My blog redesign
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* My blog redesign | |
*/ | |
@import url(http://fonts.googleapis.com/css?family=Montserrat|PT+Sans|PT+Serif); | |
body { | |
background: #eaeaea; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: Montserrat, PT Sans, Helvetica, Arial, sans-serif; | |
text-shadow: #fff 0 1px 0; | |
margin-bottom: 0.2em; | |
} | |
h1 { | |
font-size: 2.5em; | |
} | |
h2 { | |
font-size: 1.7em; | |
} | |
p { | |
font-family: PT Serif, serif; | |
font-size: 1.1em; | |
text-shadow: #fff 0 1px 0; | |
margin-top: 0.2em; | |
} | |
a { | |
color: #39c; | |
color: #065588; | |
transition: color linear 0.1s; | |
} | |
figcaption { | |
font-family: PT Sans, sans-serif; | |
font-size: 1.1em; | |
text-shadow: #ccc 0 1px 0, 0 0 .2em rgba(255, 102, 0, .5); | |
} | |
a:hover, a:focus { | |
text-decoration: none; | |
color: #5ddaff; | |
color: #39c; | |
} | |
.subtle_shadow { | |
box-shadow: #444 0 1px 5px; | |
} | |
#media_wrapper { | |
background: white; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
padding: 1em; | |
position: relative; | |
} | |
.media_image { | |
border: 1px solid #ccc; | |
max-width: 100%; | |
padding: 0; margin: 0; | |
} | |
.media { | |
padding: 0; margin: 0; | |
} | |
figcaption { | |
text-align: center; | |
} | |
.media:hover #meta { | |
height: 417px; | |
transition-delay: 0.4s; | |
} | |
.media:hover #meta ul { | |
opacity: 1; | |
transition: opacity ease-out 0.1s; | |
} | |
#meta { | |
width:740px; | |
height: 0; | |
position: absolute; | |
top: 1em; | |
left: 1em; | |
background: #000; | |
opacity: 0.7; | |
transition: height ease 0.4s; | |
transition-delay: 0; | |
overflow: hidden; | |
} | |
#meta ul { | |
decoration: none; | |
color: white; | |
opacity: 0; | |
transition: opacity ease-in 0.2s; | |
transition-delay: 0.2s; | |
} | |
#meta2 { | |
position: absolute; | |
top: 1em; | |
left: 1em; | |
background: #000; | |
height: 50%; | |
width: 20%; | |
opacity: 0; | |
transition: opacity ease-out 0.3s; | |
transition-delay: 0; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.media:hover #meta2 { | |
opacity: 0.7; | |
} | |
.media:hover #meta2:after { | |
opacity: 1; | |
} | |
#meta2:after { | |
content:""; | |
height: 50px; | |
width: 50px; | |
background: #000; | |
position: absolute; | |
top: 180px; | |
left: 60px; | |
border-style: solid; | |
border-color: white; | |
border-width: 0 0 15px 15px; | |
transform: rotate(45deg); | |
opacity: 1; | |
transition: opacity linear 1s; | |
} | |
#meta2:after:hover { | |
background: yellow; | |
} | |
#meta2 ul{ | |
visibility: hidden; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<article> | |
<h1>Hello world</h1> | |
<div id="media_wrapper" class="subtle_shadow rounded_corners"> | |
<figure class="media"> | |
<img class="media_image" src="http://i.imgur.com/0J0cp.jpg" /> | |
<figcaption>This is a piece of media. Wonder what happens when the text exedes one line. Will it break? Nope, it got handled fine, just fine<figcaption> | |
<div id="meta2" onclick="alert('nav')"> | |
</div> | |
</figure> | |
</div> | |
<!-- start slipsum code --> | |
<h2>I'm serious as a heart attack</h2> | |
<p>You think <a href="#">water</a> moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p> | |
<h2>Hold on to your butts</h2> | |
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p> | |
<h2>We happy?</h2> | |
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p> | |
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p> | |
<!-- please do not remove this line --> | |
<div style="display:none;"> | |
<a href="http://slipsum.com">lorem ipsum</a></div> | |
<!-- end slipsum code --> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment