Skip to content

Instantly share code, notes, and snippets.

@Jaswetz

Jaswetz/dabblet.css

Created October 26, 2012 01:39
Show Gist options
  • Save Jaswetz/3956476 to your computer and use it in GitHub Desktop.
Save Jaswetz/3956476 to your computer and use it in GitHub Desktop.
Download ZIP
Sidebar Timeline
Raw
dabblet.css
/**
* Sidebar Timeline
*/
footer
{
clear:both;
}
.articleWrapper
{
border: 1px solid;
}
article
{
width:92%;
padding-left: 3%;
margin-top: -2.6%;
}
.timeline
{
border-left: .3em solid red;
margin-left: 3%;
width:100%;
float: left;
}
.marker
{
width: 15px;
height: 15px;
background:red;
left: 3.2%;
position: absolute;
/* margin-left: 2.3%;
margin-bottom: -%;1.7
display:relative;*/
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="mainWrapper">
<div class="articleWrapper">
<div class="marker"></div>
<div class="timeline">
<article>
<h1>Nulla At Nulla Justo, Eget Luctus Tortor. Nulla</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
<p>Molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla.</p>
</article>
</div><!-- /timeline -->
<footer></footer>
</div><!-- /articleWrapper -->
</div><!-- /mainWrapper -->
Raw
settings.json
{"view":"split-vertical","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