Skip to content

Instantly share code, notes, and snippets.

@modermo
Created March 5, 2014 19:18
Show Gist options
  • Save modermo/9374486 to your computer and use it in GitHub Desktop.
Save modermo/9374486 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<span>This is some really small metadata type text. This is so awesome, expecially the way tha I am able to manipulate and control vertical rhythm!</span>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass/typography";
$base-font-size: 16px;
$base-line-height: $base-font-size * 1.5;
$rhythm-unit: "rem";
@include establish-baseline;
* {
margin: 0;
padding: 0;
}
body {
@include debug-vertical-alignment;
font-family: "Proxima Nova", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
font-weight: 300;
padding: 0 2em;
}
h1 {
@include adjust-font-size-to(36px);
margin: rhythm(2,36px) 0 0 0;
color: tomato;
@include horizontal-borders(1px,1);
}
h2 {
@include adjust-font-size-to(28px);
@include padding-leader(1, 28px);
border:solid 1px green;
color: complement(tomato);
}
p {
@include margin-trailer;
}
span {
@include adjust-font-size-to(12px,2/3);
@include horizontal-borders(1px);
border-color:yellow;
width:200px;
display:block;
}
html {
font-size: 100%;
line-height: 1.5em;
}
* {
margin: 0;
padding: 0;
}
body {
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
-moz-background-size: 100% 1.5rem;
-o-background-size: 100% 1.5rem;
-webkit-background-size: 100% 1.5rem;
background-size: 100% 1.5rem;
background-position: left top;
font-family: "Proxima Nova", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
font-weight: 300;
padding: 0 2em;
}
h1 {
font-size: 36px;
font-size: 2.25rem;
line-height: 48px;
line-height: 3rem;
margin: 3rem 0 0 0;
color: tomato;
border-top-width: 1px;
border-top-width: 0.0625rem;
border-top-style: solid;
padding-top: 23px;
padding-top: 1.4375rem;
border-bottom-width: 1px;
border-bottom-width: 0.0625rem;
border-bottom-style: solid;
padding-bottom: 23px;
padding-bottom: 1.4375rem;
}
h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 48px;
line-height: 3rem;
padding-top: 24px;
padding-top: 1.5rem;
border: solid 1px green;
color: #47e3ff;
}
p {
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
span {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
line-height: 1rem;
border-top-width: 1px;
border-top-width: 0.0625rem;
border-top-style: solid;
padding-top: 23px;
padding-top: 1.4375rem;
border-bottom-width: 1px;
border-bottom-width: 0.0625rem;
border-bottom-style: solid;
padding-bottom: 23px;
padding-bottom: 1.4375rem;
border-color: yellow;
width: 200px;
display: block;
}
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<span>This is some really small metadata type text. This is so awesome, expecially the way tha I am able to manipulate and control vertical rhythm!</span>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment