Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann
Forked from LeaVerou/dabblet.css
Created January 5, 2012 01:00
Show Gist options
  • Select an option

  • Save maxhoffmann/1563132 to your computer and use it in GitHub Desktop.

Select an option

Save maxhoffmann/1563132 to your computer and use it in GitHub Desktop.

Revisions

  1. Maximilian Hoffmann revised this gist Jan 5, 2012. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -9,21 +9,23 @@ padding: 20px;

    /* The font. Try changing font-size and see how the lines
    still follow the text */
    font: italic 200%/1.5 Baskerville, "Palatino Linotype", serif;
    font: 90%/1.8 sans-serif;
    color: #444555;

    /* The "paper" color */
    background-color: hsl(24, 10%, 90%);
    background-color: hsl(24, 10%, 98%);

    /* The lines */
    background-image: linear-gradient(hsla(210, 50%, 30%, .5) 1px, transparent 1px);
    background-image: linear-gradient(hsla(210, 100%, 80%, .3) 1px, transparent 1px);

    /* This makes the lines follow the text.
    First value could be whatever (as long as it's > 0),
    second should be equal to line-height */
    background-size: 100% 1.5em;
    background-size: 100% 1.8em;

    /* If you have padding, this makes the background
    offset according to it */
    background-origin: content-box;
    background-position-y: .5em;


  2. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,8 @@ background-color: hsl(24, 10%, 90%);
    background-image: linear-gradient(hsla(210, 50%, 30%, .5) 1px, transparent 1px);

    /* This makes the lines follow the text.
    First value could be whatever, second should
    be equal to line-height */
    First value could be whatever (as long as it's > 0),
    second should be equal to line-height */
    background-size: 100% 1.5em;

    /* If you have padding, this makes the background
  3. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -17,8 +17,9 @@ background-color: hsl(24, 10%, 90%);
    /* The lines */
    background-image: linear-gradient(hsla(210, 50%, 30%, .5) 1px, transparent 1px);

    /* This makes the lines follow the text. First should
    always be 100%, second should be equal to line-height */
    /* This makes the lines follow the text.
    First value could be whatever, second should
    be equal to line-height */
    background-size: 100% 1.5em;

    /* If you have padding, this makes the background
  4. @LeaVerou LeaVerou revised this gist Jan 4, 2012. No changes.
  5. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -10,13 +10,17 @@ padding: 20px;
    /* The font. Try changing font-size and see how the lines
    still follow the text */
    font: italic 200%/1.5 Baskerville, "Palatino Linotype", serif;

    /* The "paper" color */
    background-color: hsl(24, 10%, 90%);

    /* The lines */
    background-image: linear-gradient(hsla(210, 50%, 30%, .5) 1px, transparent 1px);

    /* This makes the lines follow the text. First should
    always be 100%, second should be equal to line-height */
    background-size: 100% 1.5em;

    /* If you have padding, this makes the background
    offset according to it */
    background-origin: content-box;
  6. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,8 @@
    /* Just decorative */
    padding: 20px;

    /* The font. Try changing font-size and see how the lines still follow the text */
    /* The font. Try changing font-size and see how the lines
    still follow the text */
    font: italic 200%/1.5 Baskerville, "Palatino Linotype", serif;
    /* The "paper" color */
    background-color: hsl(24, 10%, 90%);
  7. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@

    /**
    * Lined paper that follows the text
    * Support: Chrome, FF 3.6+, Saf 5.1+, Opera 11.50+, IE10
    */

    /* Just decorative */
  8. @LeaVerou LeaVerou revised this gist Jan 4, 2012. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,9 @@

    /**
    * Lined paper that follows the text
    */

    /* Just decorative */
    padding: 20px;

    /* The font. Try changing font-size and see how the lines still follow the text */
  9. @LeaVerou LeaVerou created this gist Jan 4, 2012.
    17 changes: 17 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@

    padding: 20px;

    /* The font. Try changing font-size and see how the lines still follow the text */
    font: italic 200%/1.5 Baskerville, "Palatino Linotype", serif;
    /* The "paper" color */
    background-color: hsl(24, 10%, 90%);
    /* The lines */
    background-image: linear-gradient(hsla(210, 50%, 30%, .5) 1px, transparent 1px);
    /* This makes the lines follow the text. First should
    always be 100%, second should be equal to line-height */
    background-size: 100% 1.5em;
    /* If you have padding, this makes the background
    offset according to it */
    background-origin: content-box;


    3 changes: 3 additions & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Logistically data ethernet deviation inversion processor echo processor procedural femtosecond logistically interface analog services. Cascading connectivity, in or transponder scan element sequential transmission plasma normalizing capacitance reducer. Recursive plasma, hyperlinked supporting gigabyte, solution.

    Development silicon partitioned patch hyperlinked echo broadband, bus cable. Read-only integer generator servicing, scalar coordinated audio. Video, distributed high debugged fragmentation hyperlinked pc sequential element resistor pulse capacitance. Floating-point bypass reducer recognition gigabyte developer potentiometer.
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}