Skip to content

Instantly share code, notes, and snippets.

@jedfoster
Created October 12, 2013 03:11
Show Gist options
  • Save jedfoster/6945337 to your computer and use it in GitHub Desktop.
Save jedfoster/6945337 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<article>
<h1>SassMeister 2.0!</h1>
</article>
// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----
@import "fittext";
@import "sassy-text-shadow";
h1 {
font-size: 3em; // For browsers that don't support media queries.
@include fittext($min-media: 200px, $max-media: 2000px, $min-font-size: 1em, $max-font-size: 200em, $media-increment: 100, $font-increment: 1, $ratio: 1, $round: false);
line-height:1;
margin:0;
padding:0;
white-space: nowrap;
color: #FB0076;
@include text-shadow(sassy-text-shadow(#800080, 100, 80, 120, 90, -45, 0.09));
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
article {
text-align: center;
@extend %absolute-center;
}
%absolute-center {
bottom: 0;
top: 0;
width: 100%;
height: 70%;
margin: auto;
position: absolute;
}
h1 {
font-size: 3em;
line-height: 1;
margin: 0;
padding: 0;
white-space: nowrap;
color: #FB0076;
text-shadow: rgba(128, 0, 128, 0.01) 79.92983px -6.69423px 0.1px, rgba(128, 0, 127, 0.02) 79.71943px -13.3415px 0.2px, rgba(128, 0, 127, 0.03) 79.36918px -19.89519px 0.3px, rgba(128, 0, 126, 0.04) 78.87968px -26.30933px 0.4px, rgba(128, 0, 125, 0.05) 78.25181px -32.53893px 0.5px, rgba(128, 0, 124, 0.06) 77.48665px -38.54029px 0.6px, rgba(128, 0, 123, 0.07) 76.58556px -44.27132px 0.7px, rgba(128, 0, 121, 0.08) 75.55011px -49.69182px 0.8px, rgba(128, 0, 119, 0.09) 74.38212px -54.76377px 0.9px, rgba(128, 0, 117, 0.1) 73.08364px -59.45159px 1px, rgba(128, 0, 115, 0.11) 71.65694px -63.72239px 1.1px, rgba(128, 0, 113, 0.12) 70.10453px -67.54623px 1.2px, rgba(128, 0, 111, 0.13) 68.42914px -70.89629px 1.3px, rgba(128, 0, 108, 0.14) 66.6337px -73.74905px 1.4px, rgba(128, 0, 105, 0.15) 64.72136px -76.08452px 1.5px, rgba(128, 0, 102, 0.16) 62.69548px -77.88631px 1.6px, rgba(128, 0, 99, 0.17) 60.5596px -79.14179px 1.7px, rgba(128, 0, 95, 0.18) 58.31749px -79.84214px 1.8px, rgba(128, 0, 92, 0.19) 55.97307px -79.98245px 1.9px, rgba(128, 0, 88, 0.2) 53.53045px -79.56175px 2px, rgba(128, 0, 84, 0.21) 50.99392px -78.58298px 2.1px, rgba(128, 0, 79, 0.22) 48.36793px -77.05301px 2.2px, rgba(128, 0, 75, 0.23) 45.65709px -74.98256px 2.3px, rgba(128, 0, 70, 0.24) 42.86614px -72.38616px 2.4px, rgba(128, 0, 66, 0.25) 40.0px -69.28203px 2.5px, rgba(128, 0, 61, 0.26) 37.06368px -65.69194px 2.6px, rgba(128, 0, 55, 0.27) 34.06234px -61.64106px 2.7px, rgba(128, 0, 50, 0.28) 31.00125px -57.15781px 2.8px, rgba(128, 0, 44, 0.29) 27.88576px -52.27365px 2.9px, rgba(128, 0, 39, 0.3) 24.72136px -47.02282px 3px, rgba(128, 0, 33, 0.31) 21.51359px -41.44216px 3.1px, rgba(128, 0, 27, 0.32) 18.26807px -35.57081px 3.2px, rgba(128, 0, 20, 0.33) 14.99051px -29.44996px 3.3px, rgba(128, 0, 14, 0.34) 11.68664px -23.12254px 3.4px, rgba(128, 0, 7, 0.35) 8.36228px -16.63294px 3.5px, rgba(128, 0, 0, 0.36) 5.02324px -10.02666px 3.6px, rgba(128, 7, 0, 0.37) 1.67539px -3.35005px 3.7px, rgba(128, 14, 0, 0.38) -1.67539px 3.35005px 3.8px, rgba(128, 22, 0, 0.39) -5.02324px 10.02666px 3.9px, rgba(128, 29, 0, 0.4) -8.36228px 16.63294px 4px, rgba(128, 37, 0, 0.41) -11.68664px 23.12254px 4.1px, rgba(128, 45, 0, 0.42) -14.99051px 29.44996px 4.2px, rgba(128, 54, 0, 0.43) -18.26807px 35.57081px 4.3px, rgba(128, 62, 0, 0.44) -21.51359px 41.44216px 4.4px, rgba(128, 71, 0, 0.45) -24.72136px 47.02282px 4.5px, rgba(128, 80, 0, 0.46) -27.88576px 52.27365px 4.6px, rgba(128, 89, 0, 0.47) -31.00125px 57.15781px 4.7px, rgba(128, 98, 0, 0.48) -34.06234px 61.64106px 4.8px, rgba(128, 107, 0, 0.49) -37.06368px 65.69194px 4.9px, rgba(128, 117, 0, 0.5) -40.0px 69.28203px 5px, rgba(128, 127, 0, 0.51) -42.86614px 72.38616px 5.1px, rgba(119, 128, 0, 0.52) -45.65709px 74.98256px 5.2px, rgba(109, 128, 0, 0.53) -48.36793px 77.05301px 5.3px, rgba(99, 128, 0, 0.54) -50.99392px 78.58298px 5.4px, rgba(88, 128, 0, 0.55) -53.53045px 79.56175px 5.5px, rgba(78, 128, 0, 0.56) -55.97307px 79.98245px 5.6px, rgba(67, 128, 0, 0.57) -58.31749px 79.84214px 5.7px, rgba(55, 128, 0, 0.58) -60.5596px 79.14179px 5.8px, rgba(44, 128, 0, 0.59) -62.69548px 77.88631px 5.9px, rgba(33, 128, 0, 0.6) -64.72136px 76.08452px 6px, rgba(21, 128, 0, 0.61) -66.6337px 73.74905px 6.1px, rgba(9, 128, 0, 0.62) -68.42914px 70.89629px 6.2px, rgba(0, 128, 3, 0.63) -70.10453px 67.54623px 6.3px, rgba(0, 128, 15, 0.64) -71.65694px 63.72239px 6.4px, rgba(0, 128, 28, 0.65) -73.08364px 59.45159px 6.5px, rgba(0, 128, 41, 0.66) -74.38212px 54.76377px 6.6px, rgba(0, 128, 53, 0.67) -75.55011px 49.69182px 6.7px, rgba(0, 128, 66, 0.68) -76.58556px 44.27132px 6.8px, rgba(0, 128, 80, 0.69) -77.48665px 38.54029px 6.9px, rgba(0, 128, 93, 0.7) -78.25181px 32.53893px 7px, rgba(0, 128, 107, 0.71) -78.87968px 26.30933px 7.1px, rgba(0, 128, 121, 0.72) -79.36918px 19.89519px 7.2px, rgba(0, 121, 128, 0.73) -79.71943px 13.3415px 7.3px, rgba(0, 107, 128, 0.74) -79.92983px 6.69423px 7.4px, rgba(0, 93, 128, 0.75) -80px 0.0px 7.5px, rgba(0, 78, 128, 0.76) -79.92983px -6.69423px 7.6px, rgba(0, 63, 128, 0.77) -79.71943px -13.3415px 7.7px, rgba(0, 48, 128, 0.78) -79.36918px -19.89519px 7.8px, rgba(0, 33, 128, 0.79) -78.87968px -26.30933px 7.9px, rgba(0, 18, 128, 0.8) -78.25181px -32.53893px 8px, rgba(0, 2, 128, 0.81) -77.48665px -38.54029px 8.1px, rgba(13, 0, 128, 0.82) -76.58556px -44.27132px 8.2px, rgba(29, 0, 128, 0.83) -75.55011px -49.69182px 8.3px, rgba(45, 0, 128, 0.84) -74.38212px -54.76377px 8.4px, rgba(62, 0, 128, 0.85) -73.08364px -59.45159px 8.5px, rgba(78, 0, 128, 0.86) -71.65694px -63.72239px 8.6px, rgba(95, 0, 128, 0.87) -70.10453px -67.54623px 8.7px, rgba(112, 0, 128, 0.88) -68.42914px -70.89629px 8.8px, rgba(128, 0, 127, 0.89) -66.6337px -73.74905px 8.9px, rgba(128, 0, 110, 0.9) -64.72136px -76.08452px 9px, rgba(128, 0, 92, 0.91) -62.69548px -77.88631px 9.1px, rgba(128, 0, 75, 0.92) -60.5596px -79.14179px 9.2px, rgba(128, 0, 57, 0.93) -58.31749px -79.84214px 9.3px, rgba(128, 0, 39, 0.94) -55.97307px -79.98245px 9.4px, rgba(128, 0, 20, 0.95) -53.53045px -79.56175px 9.5px, rgba(128, 0, 2, 0.96) -50.99392px -78.58298px 9.6px, rgba(128, 17, 0, 0.97) -48.36793px -77.05301px 9.7px, rgba(128, 35, 0, 0.98) -45.65709px -74.98256px 9.8px, rgba(128, 54, 0, 0.99) -42.86614px -72.38616px 9.9px, #804a00 -40.0px -69.28203px 10px;
}
@media screen and (min-width: 200px) {
h1 {
font-size: 1em;
}
}
@media screen and (min-width: 300px) {
h1 {
font-size: 2em;
}
}
@media screen and (min-width: 400px) {
h1 {
font-size: 3em;
}
}
@media screen and (min-width: 500px) {
h1 {
font-size: 4em;
}
}
@media screen and (min-width: 600px) {
h1 {
font-size: 5em;
}
}
@media screen and (min-width: 700px) {
h1 {
font-size: 6em;
}
}
@media screen and (min-width: 800px) {
h1 {
font-size: 7em;
}
}
@media screen and (min-width: 900px) {
h1 {
font-size: 8em;
}
}
@media screen and (min-width: 1000px) {
h1 {
font-size: 9em;
}
}
@media screen and (min-width: 1100px) {
h1 {
font-size: 10em;
}
}
@media screen and (min-width: 1200px) {
h1 {
font-size: 11em;
}
}
@media screen and (min-width: 1300px) {
h1 {
font-size: 12em;
}
}
@media screen and (min-width: 1400px) {
h1 {
font-size: 13em;
}
}
@media screen and (min-width: 1500px) {
h1 {
font-size: 14em;
}
}
@media screen and (min-width: 1600px) {
h1 {
font-size: 15em;
}
}
@media screen and (min-width: 1700px) {
h1 {
font-size: 16em;
}
}
@media screen and (min-width: 1800px) {
h1 {
font-size: 17em;
}
}
@media screen and (min-width: 1900px) {
h1 {
font-size: 18em;
}
}
@media screen and (min-width: 2000px) {
h1 {
font-size: 19em;
}
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
article {
text-align: center;
}
article {
bottom: 0;
top: 0;
width: 100%;
height: 70%;
margin: auto;
position: absolute;
}
<article>
<h1>SassMeister 2.0!</h1>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment