Skip to content

Instantly share code, notes, and snippets.

@piersroberts

piersroberts/dabblet.css

Created January 13, 2014 11:57
Show Gist options
  • Save piersroberts/8399104 to your computer and use it in GitHub Desktop.
Save piersroberts/8399104 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
*/
@viewport {
width: device-width;
max-zoom: 3;
min-zoom: 0.50;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body{
background-image: url('http://lorempixel.com/g/200/1000/animals/4/'), url('http://lorempixel.com/g/200/1000/animals/2/');
background-position: top left, top right;
background-repeat: no-repeat;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
margin:0 200px;
transition: margin 0.6s;
}
h1,h2,h3,h4,h5{
font-weight:normal;
}
a{
text-decoration:none;
}
#header{
border-left:solid #8bc6ea 10px;
background-color:#fff;
}
#header-logo{font-weight:normal;
font-size:200%;
padding:20px;
color:#333}
div,article,figure,section,h1,p{padding:0;margin:0;
}
h1,p{padding-bottom:10px;
}
#carousel,#sponsored-links{
vertical-align:top;
display:inline-block;
margin:0;
padding:0;
height:200px;
}
#carousel{
width:calc(100% - 200px);
overflow:hidden;
}
#sponsored-links{
min-width:200px;
right:0;
}
#sponsored-links ul{
list-style:none;
padding:0;
margin:0;
}
#sponsored-1,#sponsored-2,#sponsored-3,#sponsored-4{
background-color:#ddd;
}
#sponsored-links ul li{
text-align:center;
padding:0 10px;
line-height:49px;
border-bottom:solid 1px #fff;
}
#sponsored-links ul li:last-child{
line-height:50px;
border:
none;
}
#trending{
background-color:#333;
border-top:solid 1px #fff;
border-bottom:solid 1px #fff;
}
#trending a{
line-height:30px;
padding:0 10px;
color:#fff;
}
.marquee {
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent:-100% }
}
#slide1,#slide2,#slide3,#slide4{
width:calc(25% - 1px);
display:inline-block;
height:100%;
border-right:solid 1px #fff;
}
@keyframes slide {
0% { width: calc(25% - 1px) }
100% { width:calc(60% - 1px) }
}
#slide1:hover,#slide2:hover,#slide3:hover,#slide4:hover{
animation:slide 1s forwards;
}
#slide1{
background-color:#ffc;
background-image:url('http://lorempixel.com/800/450/technics/1');
background-size:cover;
}
#slide2{
background-color:#fcf;
background-image:url('http://lorempixel.com/800/450/technics/2');
background-size:cover
}
#slide3{
background-color:#cff;
background-image:url('http://lorempixel.com/800/450/technics/3');
background-size:cover
}
#slide4{
background-color:#ccc;
background-image:url('http://lorempixel.com/800/450/technics/4');
background-size:cover
}
.news-column>header{
border-bottom:dotted 1px #000;
margin-bottom:10px
}
#col1,#col2,#col3{
-vertical-align:top;
-display:inline-block;
position:absolute;
top:0;
box-sizing:border-box;
padding:10px;
min-height: inherit;
}
#content article{
position:relative;
border-bottom:solid 1px;
margin-bottom:10px;
}
#content article h1{
top:0;
}#col3 article h1{
position:absolute;
left:calc(10px + 50%);
}
#content article figure{
margin:0;
padding-bottom:10px
}
#col3 article figure{
width:50%;
}
#content article figure img{
width:100%;
}
#content article.top header{
position:relative;
}
#content article.top figure{
width:100%;
}
#content article.top h1{
width:60%;
position:absolute;
left:10px;
bottom:25px;
top:initial;
background-color:rgba(255,255,255,0.7);
padding:5px;
}
#content article.no-image h1{
position:relative;
display:block;
left:initial;
}
#content{
position:relative;
width:100%;
margin:0 auto;
vertical-align:top;
min-height:1000px;
}
#col1{
left:0;
width:25%;
background-color:#fff;
border-left:solid 10px #8bc6ea;
min-width:300px;
}
#col2{
min-left:0;
width:25%;
background-color:#fff;
border-left:solid 10px #f8d63b;
min-width:300px;
right:50%;
-box-shadow: -5px 0 50px 1px rgba(0,0,0,0.3);
}
#col2:hover{
z-index:20;
}
#col1:hover{
z-index:20;
-box-shadow: 5px 0 50px 1px rgba(0,0,0,0.3);
}
#col3{
z-index:30;
width:50%;
min-width:600px;
background-color:#fff;
border-left:solid 10px #d44338;
right:0;
-box-shadow: -5px 0 50px 1px rgba(0,0,0,0.3);
}
@media (max-width: 1000px) {
body{
margin:0;
}
.marquee{
animation: marquee 30s linear infinite;
}
}
@media (max-width: 600px) {
#col1,#col2,#col3{
min-width:100%;
}
#col2 {
position:absolute;
margin-top:30px;
left: 0;
transition:margin-top 1s;
}
#col3{
z-index:3;
margin-top:60px;
transition:margin-top 1s;
}
}
@media (max-width: 320px){
#col3{
margin-top:60px;
left: 0;
transition:margin-top 1s;
}
}
Raw
dabblet.html
<section id="header">
<h1 id="header-logo">TechRadar</h1>
</section>
<div id="top-links">
<section id=carousel><div id="slide1"></div><div id="slide2"></div><div id="slide3"></div><div id="slide4"></div>
</section><section id="sponsored-links">
<ul>
<li id="sponsored-1"><a href="">Xbox One</a></li>
<li id="sponsored-2"><a href="">smart choice</a></li>
<li id="sponsored-3"><a href="">My mobile life</a></li>
<li id="sponsored-4"><a href="">Sponsored Link</a></li>
</ul>
</section>
<section id="trending" class="marquee">
<a href="">Xbox One</a>
<a href="">iPad Air</a>
<a href="">Playstation 4</a>
<a href="">Oculus Rift</a>
<a href="">Windows 8.1</a>
<a href="">Nintendo 64</a>
<a href="">Atari 2600</a>
</section>
</div><section id="content">
<div id="col1" class="news-column">
<header>
<h1>On The Radar</h1>
</header>
<article class="no-image">
<header>
<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>
</div><div id="col2" class="news-column">
<header>
<h1>Incoming</h1>
</header>
<article>
<header>
<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
<figure><img src="http://lorempixel.com/800/450/technics/3"></figure>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>
</div><div id="col3" class="news-column">
<header>
<h1>Hot right now</h1>
</header>
<article class="top">
<header>
<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
<figure><img src="http://lorempixel.com/800/450/technics/3"></figure>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>
</div>
</section>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment