Skip to content

Instantly share code, notes, and snippets.

@vitalyrotari

vitalyrotari/dabblet.css

Created May 1, 2012 02:08
Show Gist options
  • Save vitalyrotari/2564423 to your computer and use it in GitHub Desktop.
Save vitalyrotari/2564423 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
background: #ccc;
}
div {
height: 107px;
}
.digit {
background-color: #333;
color: #bada55;
font-family: 'Didact Gothic', sans-serif;
float: left;
height: 107px;
position: relative;
text-align: center;
}
.digit span,
.digit em {
display:block;
padding: 5px;
}
.digit span {
background-color: #f5f5f5;
color: black;
height: 22px;
line-height: 22px;
font-size: 16px;
text-transform: lowercase;
}
.digit em,
.digit-dotted:after {
font-style: normal;
font-size: 36px;
font-weight: bold;
}
.digit em {
line-height: 70px;
text-align: center;
width: 70px;
}
.digit-dotted:after {
content: ":";
position: absolute;
top: 0;
right: -6px;
line-height: 140px;
z-index: 10;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<div class="digit digit-dotted">
<span>Hours</span>
<em>23</em>
</div>
<div class="digit digit-dotted">
<span>Minutes</span>
<em>13</em>
</div>
<div class="digit">
<span>seconds</span>
<em>05</em>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment