Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/paragraph-flow.html

Last active August 29, 2015 14:08
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 tomhodgins/01aeea3cec8d2a3b3800 to your computer and use it in GitHub Desktop.
Save tomhodgins/01aeea3cec8d2a3b3800 to your computer and use it in GitHub Desktop.
Download ZIP
Paragraph Flow
Raw
paragraph-flow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraph Flow</title>
<style class="text/css">
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic');
/* Base Font Size */
html {
font-size: 11pt;
letter-spacing: -.015625em;
-webkit-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.paragraph-flow a,
.paragraph-flow img {
border: 0;
outline: 0;
}
/* Base Font Settings */
.paragraph-flow * {
line-height: 1.4;
font-family: 'Open Sans';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
}
/* Image Classes */
.paragraph-flow .img-left,
.paragraph-flow .img-right {
display: inline-block;
width: auto;
max-width: 50%;
margin: .25em auto;
}
.paragraph-flow .img-left {
float: left;
margin-right: .75em;
}
.paragraph-flow .img-right {
float: right;
margin-left: .5em;
}
.paragraph-flow .img-center,
.paragraph-flow .img-full {
float: none;
display: block;
width: auto;
max-width: 100%;
margin: .5em auto;
}
/* Stacking Columns */
.paragraph-flow .holder {
display: block;
overflow: hidden;
}
.paragraph-flow .double,
.paragraph-flow .triple,
.paragraph-flow .quad {
display: block;
width: 100%;
}
.paragraph-flow .double + double,
.paragraph-flow .triple + .triple,
.paragraph-flow .quad + .quad {
margin-top: .5em;
}
/* Generic Heading Font Styles */
.paragraph-flow h1,
.paragraph-flow h2,
.paragraph-flow h3,
.paragraph-flow h4,
.paragraph-flow h5,
.paragraph-flow h6 {
margin: .5em 0 .25em 0;
line-height: 1;
letter-spacing: -.03125em;
font-weight: 400;
color: #000;
}
/* Heading Sizing */
.paragraph-flow h1 {
font-size: 300%;
}
.paragraph-flow h2 {
font-size: 250%;
}
.paragraph-flow h3 {
font-size: 200%;
}
.paragraph-flow h4 {
font-size: 160%;
}
.paragraph-flow h5 {
font-size: 140%;
}
.paragraph-flow h6 {
font-size: 120%;
}
/* Paragraph and List Styles */
.paragraph-flow p,
.paragraph-flow ul,
.paragraph-flow ol,
.paragraph-flow blockquote {
margin: .25em 0 .5em 0;
letter-spacing: -.015625em;
font-weight: 300;
overflow: hidden;
color: #333;
}
.paragraph-flow ul,
.paragraph-flow ol {
padding-left: 1.5em;
}
.paragraph-flow li {
margin: 0;
}
.paragraph-flow li + li {
margin-top: .5em;
}
/* Text Tag Styles */
.paragraph-flow .left {
text-align: left;
}
.paragraph-flow .center {
text-align: center;
}
.paragraph-flow .right {
text-align: right;
}
.paragraph-flow em {
}
.paragraph-flow strong {
font-weight: 600;
}
.paragraph-flow small {
font-size: 85%;
font-weight: 400;
}
.paragraph-flow strike {
}
.paragraph-flow del {
}
.paragraph-flow ins {
}
.paragraph-flow code {
font-family: 'Source Code Pro', monospace;
font-weight: normal;
}
.paragraph-flow q:before {
content: '“';
}
.paragraph-flow q:after {
content: '”';
}
.paragraph-flow q {
font-style: italic;
}
.paragraph-flow mark {
padding: .15625em .3125em;
display: inline;
border-radius: .15625em;
background: rgba(255,255,0,.75);
}
.paragraph-flow sup {
font-size: 80%;
}
.paragraph-flow sub {
font-size: 80%;
}
.paragraph-flow u {
}
/* Responsive Font Resize */
@media (min-width: 481px) {
html {
font-size: 108.3%; /* font-size: 12pt; */
}
.paragraph-flow .img-center.img-left {
float: left;
margin-right: .5em;
}
.paragraph-flow .img-center.img-right {
float: right;
margin-left: .5em;
}
.paragraph-flow .double {
width: 49%;
float: left;
}
.paragraph-flow .double + .double {
margin: auto auto auto 2%;
}
.paragraph-flow .triple {
width: 32%;
float: left;
}
.paragraph-flow .triple + .triple {
margin: auto auto auto 1.5%;
}
.paragraph-flow .quad {
width: 24%;
float: left;
}
.paragraph-flow .quad + .quad {
margin: auto auto auto 1.33%;
}
}
@media (min-width: 769px) {
html {
font-size: 121.4%; /* font-size: 14pt; */
}
}
</style>
</head>
<body>
<section>
<article class="paragraph-flow">
<h1 class="center">Paragraph Flow</h1>
<h1>Level One Heading</h1>
<h2>Level Two Heading</h2>
<h3>Level Three Heading</h3>
<h4>Level Four Heading</h4>
<h5>Level Five Heading</h5>
<h6>Level Six Heading</h6>
<p>Normal Text, <em>emphasized text</em>, <strong>strong text</strong>, <small>small text</small>, <strike>struck text</strike>, <del>deleted text</del>, <ins>inserted text</ins>, <code>coded text</code>, <q>quoted text</q>, <mark>marked text</mark>, <sup>superscripted text</sup>, <sub>subscripted text</sub>, <u>underlined text</u></p>
<p>In ut tortor ac nisl egestas mollis non in metus. Aenean nunc ligula, porta sit amet dolor et, euismod ullamcorper tellus. Quisque lacus magna, egestas sit amet tortor eget, aliquet gravida mi. Vestibulum a ultricies metus. Suspendisse non efficitur diam, quis fringilla nibh. Maecenas eget auctor nunc, et vestibulum velit. Nulla sodales ligula erat, nec venenatis nunc volutpat ac. Donec euismod turpis dolor, et rutrum metus faucibus at. Praesent tincidunt neque ut felis viverra, sit amet maximus eros sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quam risus, porttitor ut ultrices nec, lobortis in nibh.</p>
<p><img class="img-right" src="http://placehold.it/400x150" alt="img-right">Donec semper quis diam et consectetur. Morbi egestas ante eros, vitae feugiat velit ullamcorper at. Suspendisse mollis in sem quis varius. Praesent nec odio sit amet odio placerat auctor. Fusce eu magna vel ipsum euismod commodo. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida. Phasellus aliquet justo at turpis condimentum venenatis. Duis sed sapien at orci iaculis hendrerit eget sed diam. Pellentesque feugiat hendrerit sapien vitae interdum. Fusce dictum dapibus fermentum. Fusce eleifend neque posuere lorem interdum iaculis.</p>
<p><img class="img-left" src="http://placehold.it/150x150" alt="img-left">Donec pharetra porttitor tortor vel porttitor. Mauris sit amet rutrum leo. Morbi sit amet bibendum urna, eu condimentum orci. Integer nec sodales lorem, ut blandit diam. Quisque sagittis pretium condimentum. Aliquam scelerisque diam vitae dolor lacinia dignissim sit amet sed ligula. Pellentesque feugiat hendrerit sapien vitae interdum. Fusce dictum dapibus fermentum. Fusce eleifend neque posuere lorem interdum iaculis. Morbi lacinia consequat vehicula. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<h2>Level Two Heading</h2>
<p><img class="img-right img-center" src="http://placehold.it/150x150" alt="img-right and img-center">Donec pharetra porttitor tortor vel porttitor. Mauris sit amet rutrum leo. Morbi sit amet bibendum urna, eu condimentum orci. Integer nec sodales lorem, ut blandit diam. Quisque sagittis pretium condimentum. Aliquam scelerisque diam vitae dolor lacinia dignissim sit amet sed ligula. Morbi lacinia consequat vehicula. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<h3>Level Three Heading</h3>
<p>Donec pharetra porttitor tortor vel porttitor. Mauris sit amet rutrum leo. Morbi sit amet bibendum urna, eu condimentum orci. Integer nec sodales lorem, ut blandit diam. Quisque sagittis pretium condimentum. Aliquam scelerisque diam vitae dolor lacinia dignissim sit amet sed ligula. Morbi lacinia consequat vehicula. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida.</p>
<img class="img-full" src="http://placehold.it/1000x200" alt="img-full">
<div class="holder">
<div class="double">
<h4>Level Four Heading</h4>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</div>
<div class="double">
<h4>Level Four Heading</h4>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
<h5>Level Five Heading</h5>
<p>Donec pharetra porttitor tortor vel porttitor. Mauris sit amet rutrum leo. Morbi sit amet bibendum urna, eu condimentum orci. Integer nec sodales lorem, ut blandit diam. Quisque sagittis pretium condimentum. Aliquam scelerisque diam vitae dolor lacinia dignissim sit amet sed ligula. Morbi lacinia consequat vehicula. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida.</p>
<h6>Level Six Heading</h6>
<div class="holder">
<div class="triple">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="triple">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="triple">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
<h5>Level Five Heading</h5>
<p>Donec pharetra porttitor tortor vel porttitor. Mauris sit amet rutrum leo. Morbi sit amet bibendum urna, eu condimentum orci. Integer nec sodales lorem, ut blandit diam. Quisque sagittis pretium condimentum. Aliquam scelerisque diam vitae dolor lacinia dignissim sit amet sed ligula. Morbi lacinia consequat vehicula. Proin accumsan tempor tellus eget aliquet. Cras porttitor hendrerit tortor, et eleifend diam molestie ac. Vestibulum porta vulputate dolor ut lobortis. Cras non facilisis metus. Praesent aliquet ut eros sollicitudin gravida.</p>
<h6>Level Six Heading</h6>
<div class="holder">
<div class="quad">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="quad">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="quad">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="quad">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
</article>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment