Created
October 12, 2013 03:11
-
-
Save jedfoster/6945337 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article> | |
<h1>SassMeister 2.0!</h1> | |
</article> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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