Skip to content

Instantly share code, notes, and snippets.

@mrcleanandfresh
Created October 16, 2015 14:54
Show Gist options
  • Save mrcleanandfresh/0920114c57be552e5d74 to your computer and use it in GitHub Desktop.
Save mrcleanandfresh/0920114c57be552e5d74 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>Lorem Ipsom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h2>Lorem Ipsom</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h3>Lorem Ipsom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h4>Lorem Ipsom</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h5>Lorem Ipsom</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h6>Lorem Ipsom</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Modular Scale (v2.1.1)
// ----
@import 'modular-scale';
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Noto+Sans:400,400italic,700,700italic);
$base-size: 14px;
$ratio: $golden;
h1,h2,h3,h4,h5,h6 {
font-family: 'Noto Sans', Helvetica, sans-serif;
margin: 0;
}
h1 {
font-size: ms(2.25);
line-height: ms(0) * 1.4;
}
h2 {
font-size: ms(1.75);
line-height: ms(0) * 1.4;
}
h3 {
font-size: ms(1.2);
line-height: ms(0) * 1.4;
}
h4 {
font-size: ms(0.75);
line-height: ms(0.5) * 1.4;
}
h5 {
font-size: ms(0.5);
line-height: ms(0.5) * 1.4;
}
h6 {
font-size: ms(0);
line-height: ms(0.5) * 1.4;
}
p {
font-size: ms(0);
line-height: ms(0) * 1.4;
font-family: "Roboto", sans-serif;
}
div { position: relative; }
a {
height: 100px;
width: 100px;
background-color: red;
display: block;
position: relative;
left: 0;
top: 0;
&:hover {
left: 5px;
top: 5px;
transition-timing-function: cubic-bezier(0.25, 0.25, 0.4, 1);
transition: all 0.5s cubic-bezier(.25,.25,.4,1);
background-color: blue;
}
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Noto+Sans:400,400italic,700,700italic);
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans', Helvetica, sans-serif; margin: 0; }
h1 { font-size: 2.95272em; line-height: 1.4em; }
h2 { font-size: 2.32128em; line-height: 1.4em; }
h3 { font-size: 1.7815em; line-height: 1.4em; }
h4 { font-size: 1.43463em; line-height: 1.78083em; }
h5 { font-size: 1.27202em; line-height: 1.78083em; }
h6 { font-size: 1em; line-height: 1.78083em; }
p { font-size: 1em; line-height: 1.4em; font-family: "Roboto", sans-serif; }
div { position: relative; }
a { height: 100px; width: 100px; background-color: red; display: block; position: relative; left: 0; top: 0; }
a:hover { left: 5px; top: 5px; transition-timing-function: cubic-bezier(0.25, 0.25, 0.4, 1); transition: all 0.5s cubic-bezier(0.25, 0.25, 0.4, 1); background-color: blue; }
<h1>Lorem Ipsom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h2>Lorem Ipsom</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h3>Lorem Ipsom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h4>Lorem Ipsom</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h5>Lorem Ipsom</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
<h6>Lorem Ipsom</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tortor lorem, molestie ac magna laoreet, lobortis pellentesque tortor. Vivamus non mollis ipsum, sit amet blandit odio. Sed eleifend turpis erat, nec tempus sapien convallis id. Etiam dignissim sit amet quam nec rutrum. Nam in sagittis ex. Praesent gravida in leo non volutpat. Integer lacinia ac magna ut mollis. Proin at neque at augue tempus iaculis. Nam at est dolor. Cras ipsum leo, venenatis non auctor vitae, faucibus ac nisl. Donec dictum, ex sit amet tempor condimentum, lorem nisi condimentum tortor, at luctus augue nisl ut est. Praesent vel maximus mauris. Praesent ac fringilla tellus. Vestibulum lorem purus, maximus convallis sem eu, accumsan pharetra lacus. In elementum ante ligula, id molestie nisi lacinia sed. Fusce tempor dictum ipsum sit amet posuere.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment