Skip to content

Instantly share code, notes, and snippets.

@cisolarix

cisolarix/dabblet.css

Created November 5, 2018 04:51
Show Gist options
  • Save cisolarix/4bd413a37cbe93ae9fd3492b72644084 to your computer and use it in GitHub Desktop.
Save cisolarix/4bd413a37cbe93ae9fd3492b72644084 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cisolarix created this gist Nov 5, 2018.
    28 changes: 28 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    /**
    * Vertical centering - Viewport unit method
    */

    main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
    }

    h1 {
    margin: 0 0 .2em;
    font-size: 150%;
    }

    p {
    margin: 0;
    }

    body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
    }
    4 changes: 4 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
    </main>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}