Skip to content

Instantly share code, notes, and snippets.

@jrudenstam

jrudenstam/dabblet.css

Created April 10, 2012 07:14
Show Gist options
  • Save jrudenstam/2348956 to your computer and use it in GitHub Desktop.
Save jrudenstam/2348956 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile first live demo
Raw
dabblet.css
/**
* Mobile first live demo
*/
* {box-sizing: border-box;}
body {
/*background: hsl(60,80%,70%);*/
background-color: hsl(60,30%,70%);
background-image:
repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
font: 16px/22px Monaco, monospace;
text-shadow: 1px 1px 0 rgba(255,255,255, 0.3);
padding: 0; margin: 0;
}
figure {margin: 20px 0;}
figure img {max-width: 100%;}
/* Navigation */
.main-nav {clear: both;}
nav ul {padding: 0;}
nav ul li {
float: left;
list-style: none;
margin: 20px 40px 0 0;
}
nav ul li a {
background: linear-gradient(hsla(125, 33%, 50%, 0.4), hsla(125, 33%, 60%, 0.4));
border-style: solid;
border-width: 1px;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0) rgba(0,0,0,0.5) rgba(255,255,255,0.7);
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
color: #333;
display: inline-block;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
}
nav ul li a:hover {
box-shadow: none;
border-color: rgba(0,0,0,0.5) rgba(255,255,255,0.7) rgba(255,255,255,0.7) rgba(0,0,0,0.3);
background: linear-gradient(hsla(125, 33%, 60%, 0.8), hsla(125, 33%, 50%, 0.8));
text-shadow: -1px -1px 0 rgba(255,255,255, 0.3);
}
/* Header */
.main-header {
background-color: hsla(359, 63%, 100%, 0.5);
color: #f5f5f5;
padding: 40px;
}
.main-header hgroup {
border-bottom: 10px solid rgba(255,255,255,0.6);
padding-bottom: 20px;
margin: 40px 0;
}
.main-header hgroup h1, .main-header hgroup h2 {margin: 0;}
h1 {font-size: 48px; line-height: 48px;}
h1 a {
color: #fff;
text-decoration: none;
}
/* Main content */
.posts {
background: rgba(255,200,200,0.8);
padding: 20px; margin-top: 20px;
}
/* Additional content */
.additional-content {
background: rgba(200,255,200,0.7);
padding: 20px; margin-top: 20px;
}
.twitter-widget ol {padding: 0;}
.twitter-widget ol li{
background: rgba(0,0,0,0.1);
list-style: none;
padding: 10px; margin-bottom: 20px;
}
/* Footer */
.main-footer {
background: rgba(0,0,255,0.1);
margin: 20px 0 0 0; padding: 20px;
}
/* Helpers */
.global-width {
max-width: 960px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* Media queries */
@media only screen and (min-width: 715px){
.left {float: left; margin-right: 20px;}
.right {float: right; margin-right: 0;}
.col-1 {width: 25%;}
.col-2 {width: 50%;}
.col-3 {width: 72%;}
}
Raw
dabblet.html
<header class="main-header global-width clearfix">
<img class="logo left" src="http://thecybershadow.net/misc/github.png" alt="Company logo" />
<hgroup class="left">
<h1><a href="#" title="Back home">Semantic website</a></h1>
<h2>Tagline</h2>
</hgroup>
<nav class="main-nav">
<ul class="clearfix">
<li><a href="#" title="Proceed to: Link 1">Lorem</a></li>
<li><a href="#" title="Proceed to: Link 2">Ipsum</a></li>
<li><a href="#" title="Proceed to: Link 3">Dolor</a></li>
<li><a href="#" title="Proceed to: Link 4">Sit amet</a></li>
</ul>
</nav>
</header>
<div class="main-content global-width">
<section class="posts left col-3">
<article class="post">
<header>
<h1>Post headline</h1>
<p>Published: <time class="date">2012-03-28</time> by <span class="author">Johan Smith</span></p>
</header>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<img src="http://images.piccsy.com/cache/images/cutest-baby-animals-7677-530-413.jpg" alt="Image of an raccoon" />
<figcaption>This raccoon is cool</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
</section>
<section class="additional-content right col-1">
<aside class="twitter-widget">
<h3>My latest tweets</h3>
<ol>
<li>
<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
</li>
<li>
<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
</li>
<li>
<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
</li>
</ol>
</aside>
</section>
</div>
<footer class="main-footer">
<p class="global-width">Copyright &copy; 2012</p>
</footer>
Raw
settings.json
{"view":"separate","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment