Skip to content

Instantly share code, notes, and snippets.

@davidmerrique

davidmerrique/dabblet.css

Created February 4, 2012 21:28
Show Gist options
  • Save davidmerrique/1740237 to your computer and use it in GitHub Desktop.
Save davidmerrique/1740237 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr-ish
Raw
dabblet.css
/**
* Tumblr-ish
*/
* { box-sizing: border-box; }
html {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
//background: url("http://f.cl.ly/items/1J1B1m0N133Z1f0F091E/blue_bg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height:100%;
padding-top: 20px;
//font-smoothing: antialiased;
}
img { max-width: 100%; }
h1 { margin: 0; }
p { margin: 0; padding: 0; }
a { text-decoration: none; }
.box {
width: 600px;
margin: 0 auto 40px auto;
//padding: 0 30px;
background: rgba(255,255,255,0.7);
border-radius: 5px;
//box-shadow: 0 15px 30px rgba(0,0,0,0.2),
inset 0 1px 0 0 rgba(255,255,255,1);
position: relative;
}
.box:hover .side { opacity: 1; }
.box .media { text-align: center; }
.box .media img { width: 100%; }
.box .side {
opacity: 0;
font-size: 80%;
line-height: 18px;
padding: 0 20px 0 0;
margin: 0;
position: absolute;
left: -100px;
top: 0px;
width: 100px;
transition: opacity .3s ease-in-out;
}
.box .side ul {
list-style: none;
text-align: right;
padding: 0;
margin-bottom: 10px;
margin-top: 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="box">
<div class="side">
<ul class="meta">
<li>02/27/12</li>
<li>3:14pm</li>
<li>31,965 notes</li>
</ul>
<ul class="tags">
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
</ul>
</div>
<div class="media">
<img src="http://26.media.tumblr.com/tumblr_lzpgvehzyC1r8ciz2o1_500.jpg" />
</div>
</div>
<div class="box">
<div class="side">
<ul class="meta">
<li>02/27/12</li>
<li>3:14pm</li>
<li>31,965 notes</li>
</ul>
<ul class="tags">
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
</ul>
</div>
<div class="media">
<img src="http://24.media.tumblr.com/tumblr_lzpgv6zmIB1r8ciz2o1_500.jpg" />
</div>
</div>
<div class="box">
<div class="side">
<ul class="meta">
<li>02/27/12</li>
<li>3:14pm</li>
<li>31,965 notes</li>
</ul>
<ul class="tags">
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
<li>#tag1</li>
</ul>
</div>
<p>Donec ullamcorper nulla non metus auctor fringilla.
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Curabitur blandit tempus porttitor.
Curabitur blandit tempus porttitor. Donec sed odio dui.</p>
<p>Sed posuere consectetur est at lobortis. Aenean eu
leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Maecenas sed diam
eget risus varius blandit sit amet non magna.</p>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment