Created
February 22, 2015 12:31
-
-
Save ryardley/5185c387cb1a4da2fc79 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| <html> | |
| <div class="MyMedia"> | |
| <img class="MyMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" /> | |
| <div class="MyMedia-right"> | |
| <h1 class="MyMedia-h1">Beer me</h1> | |
| <p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p> | |
| <p class="MyMedia-more">More...</p> | |
| </div> | |
| </div> | |
| </html> |
This file contains 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.4.12) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // utils/fonts.scss | |
| @import url(http://fonts.googleapis.com/css?family=Roboto:100,700); | |
| @mixin Font-thin{ | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 100; | |
| } | |
| @mixin Font-thick{ | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 700; | |
| } | |
| @mixin Font-copy{ | |
| @include Font-thin; | |
| font-size: 14px; | |
| } | |
| @mixin Font-h1{ | |
| @include Font-thick; | |
| font-size: 16px; | |
| } | |
| //= modules/media.scss | |
| $Media:( | |
| margin: 2% | |
| ); | |
| @mixin Media{ | |
| position:relative; | |
| } | |
| @mixin Media-left{ | |
| float:left; | |
| width:30% - map-get($Media, margin)/2; | |
| } | |
| @mixin Media-right{ | |
| float:right; | |
| width:70% - map-get($Media, margin)/2; | |
| } | |
| // instance/my_media.scss | |
| .MyMedia{ | |
| @include Media; | |
| width:300px; | |
| } | |
| .MyMedia-h1{ | |
| @include Font-h1; | |
| } | |
| .MyMedia-left{ | |
| @include Media-left; | |
| } | |
| .MyMedia-right{ | |
| @include Media-right; | |
| @include Font-copy; | |
| } |
This file contains 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
| @import url(http://fonts.googleapis.com/css?family=Roboto:100,700); | |
| .MyMedia { | |
| position: relative; | |
| width: 300px; | |
| } | |
| .MyMedia-h1 { | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 700; | |
| font-size: 16px; | |
| } | |
| .MyMedia-left { | |
| float: left; | |
| width: 29%; | |
| } | |
| .MyMedia-right { | |
| float: right; | |
| width: 69%; | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 100; | |
| font-size: 14px; | |
| } |
This file contains 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
| <html> | |
| <div class="MyMedia"> | |
| <img class="MyMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" /> | |
| <div class="MyMedia-right"> | |
| <h1 class="MyMedia-h1">Beer me</h1> | |
| <p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p> | |
| <p class="MyMedia-more">More...</p> | |
| </div> | |
| </div> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment