-
-
Save tylersticka/3105516 to your computer and use it in GitHub Desktop.
Testing Compass Vertical Rhythm Loveliness
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
| http_path = "/" | |
| css_dir = "" | |
| sass_dir = "" | |
| images_dir = "" | |
| javascripts_dir = "" | |
| output_style = :expanded | |
| line_comments = false | |
| preferred_syntax = :scss |
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
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="screen.css"> | |
| </head> | |
| <body> | |
| <h1>This is an h1</h1> | |
| <h2>This is an h2</h2> | |
| <h3>This is an h3</h3> | |
| <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.</p> | |
| <p><input type="text"><a class="button">Launch</a></p> | |
| <hr> | |
| <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.</p> | |
| <hr> | |
| <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum.</p> | |
| <hr> | |
| </body> | |
| </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
| * { | |
| margin: 0; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 112.5%; | |
| line-height: 1.5em; | |
| } | |
| body { | |
| max-width: 30em; | |
| background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.1)), color-stop(5%, rgba(0, 0, 0, 0))); | |
| background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0) 5%); | |
| -webkit-background-size: 100% 27px; | |
| -moz-background-size: 100% 27px; | |
| -o-background-size: 100% 27px; | |
| background-size: 100% 27px; | |
| background-position: left top; | |
| } | |
| h1 { | |
| font-size: 3em; | |
| line-height: 1em; | |
| margin-top: 1em; | |
| } | |
| h2 { | |
| font-size: 2.5em; | |
| line-height: 1.2em; | |
| margin-top: 0.9em; | |
| } | |
| h3 { | |
| font-size: 2em; | |
| line-height: 1.125em; | |
| margin-top: 0.75em; | |
| } | |
| h4 { | |
| font-size: 1.5em; | |
| line-height: 1em; | |
| margin-top: 1em; | |
| } | |
| h5, h6 { | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| margin-top: 1.5em; | |
| } | |
| p { | |
| margin-top: 1.5em; | |
| } | |
| hr { | |
| border: 0; | |
| border-color: black; | |
| height: 0; | |
| border-bottom-style: solid; | |
| border-bottom-width: 0.111em; | |
| padding-bottom: 1.389em; | |
| } | |
| input[type=text] { | |
| border-color: #333; | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| } | |
| .button { | |
| background: #333; | |
| border-color: black; | |
| color: white; | |
| } | |
| input, | |
| .button { | |
| border-style: solid; | |
| border-width: 0.111em; | |
| padding: 0.264em; | |
| display: inline-block; | |
| padding-left: 1em; | |
| padding-right: 1em; | |
| vertical-align: top; | |
| } |
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 "compass/typography"; | |
| @import "compass/layout"; | |
| @import "compass/css3"; | |
| @function measure($index: 1) { | |
| @return ($index + 1) * 9px; | |
| } | |
| @mixin typeSize($measure) { | |
| @include adjust-font-size-to(measure($measure)); | |
| } | |
| // Compass Typography Vars | |
| $base-font-size: measure(1); | |
| $base-line-height: measure(2); | |
| $round-to-nearest-half-line: true; | |
| $min-line-padding: 0; | |
| * { | |
| margin: 0; | |
| @include box-sizing(border-box); | |
| } | |
| @include establish-baseline(); | |
| body { | |
| max-width: 30em; | |
| @include baseline-grid-background($base-line-height, rgba(0,0,0,.1)); | |
| } | |
| h1 { | |
| @include typeSize(5); | |
| @include margin-leader(2, measure(5)); | |
| } | |
| h2 { | |
| @include typeSize(4); | |
| @include margin-leader(1.5, measure(4)); | |
| } | |
| h3 { | |
| @include typeSize(3); | |
| @include margin-leader(1, measure(3)); | |
| } | |
| h4 { | |
| @include typeSize(2); | |
| @include margin-leader(1, measure(2)); | |
| } | |
| h5, h6 { | |
| @include typeSize(1); | |
| @include margin-leader(1, measure(1)); | |
| } | |
| p { | |
| @include margin-leader(1); | |
| } | |
| hr { | |
| border: 0; | |
| border-color: black; | |
| height: 0; | |
| @include apply-side-rhythm-border(bottom, 2px, 1); | |
| } | |
| input[type=text] { | |
| border-color: #333; | |
| @include typeSize(1); | |
| } | |
| .button { | |
| background: #333; | |
| border-color: black; | |
| color: white; | |
| } | |
| input, | |
| .button { | |
| @include rhythm-borders(2px, .25); | |
| display: inline-block; | |
| padding-left: 1em; | |
| padding-right: 1em; | |
| vertical-align: top; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment