Skip to content

Instantly share code, notes, and snippets.

@erikjung

erikjung/config.rb

Created July 11, 2012 23:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erikjung/3094526 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erikjung/3094526 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. erikjung revised this gist Jul 12, 2012. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions config.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    http_path = "/"
    css_dir = ""
    sass_dir = ""
    images_dir = ""
    javascripts_dir = ""
    output_style = :expanded
    line_comments = false
    preferred_syntax = :scss
  2. erikjung created this gist Jul 11, 2012.
    20 changes: 20 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!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>
    92 changes: 92 additions & 0 deletions screen.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    * {
    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;
    }
    87 changes: 87 additions & 0 deletions screen.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    @import "compass/typography";
    @import "compass/layout";
    @import "compass/css3";


    @function measure($index: 1) {
    $measures: 18, 27, 36, 45, 54; // Modular Scale
    @return nth($measures, $index) * 1px;
    }

    @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;
    }