Skip to content

Instantly share code, notes, and snippets.

@yatil

yatil/dabblet.css

Created October 15, 2013 22:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yatil/6999704 to your computer and use it in GitHub Desktop.
Save yatil/6999704 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
font-family: 'Helvetica';
font-size:20px;
}
section {
display:flex;
justify-content: center;
margin-bottom:30px;
}
h2, div {
padding: 10px;
border-radius:10px;
}
h2 {
background-color:yellow;
margin:0;
text-align:right;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex: 20;
}
section:nth-child(even) h2 {
order: 3;
justify-content: flex-start;
text-align:left;
}
section:nth-child(even) .sep {
order: 2
}
div {
background-color:#f2f2f2;
flex: 79;
display:flex;
justify-content: flex-end;
align-items: flex-end;
text-align:right;
}
div.sep {
background:none;
flex:1;
}
p {
margin:0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
<section>
<h2>Test eins zwei drei vier</h2>
<div class="sep"></div>
<div><p>Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… Lorem Ipsum dolor… </p></div>
</section>
Raw
dabblet.js
// alert('Hello world!');
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