From: Amin Bandali Date: Wed, 31 Jul 2019 03:42:55 +0000 (-0400) Subject: simplify and use css grids X-Git-Url: https://git.shemshak.org/~bandali/bndl.org/commitdiff_plain/9998ccd03444e45e42238fa7e01099da1d5a6247?ds=sidebyside simplify and use css grids many thanks to ddevault for the help :) --- diff --git a/contact.html b/contact.html index 3c5bbf5..6741c69 100644 --- a/contact.html +++ b/contact.html @@ -10,12 +10,12 @@ -
-

bandali's

-

contact info

-
-
-
+
+
+

bandali's

+

contact info

+
+

email is by far my preferred method of communication. i may be contacted at bandali at gnu dot org. @@ -54,8 +54,10 @@ +

-

elsewhere

+

elsewhere

+

you may also find me at a few other places online. stricken through accounts are those i don’t use anymore, unless @@ -75,7 +77,7 @@

  • notbandali on github
  • notbandali on twitter
    • -
    -
    + + diff --git a/index.html b/index.html index 3df0293..e0efc13 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,13 @@ -
    -

    bandali's

    -

    corner on the interwebs

    -
    -
    +
    +
    +

    bandali's

    +

    corner on the interwebs

    +

    academia

    -
    +
    -
    -
    -
    +

    personal

    -
    +
    -
    - + + diff --git a/style.css b/style.css index e5d2862..9d3f78e 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,11 @@ body { padding: 1em; } +main { + margin: auto; + max-width: 38em; +} + body > header { margin-bottom: 2em !important; } @@ -65,25 +70,27 @@ nav li:last-child:after { content: ""; } -section { - position: relative; -} -section > h3 { - position: absolute; - right: 75%; - width: 25%; - margin: 0; - padding: 0 1em 0 0; /* 1.75 */ - font-weight: normal; - font-size: 1em; +main { + display: grid; + grid-template-columns: auto 38em auto; + grid-gap: 1em; +} + +main > h3 { + grid-column: 1; text-align: right; - white-space: nowrap; + font-size: 1em; + font-weight: normal; } -section > .section, article > .section, body > header { - position: relative; - left: 25%; - width: 50%; - margin: 0; - padding: 0; - max-width: 38em; + +main > header, main > section { + grid-column: 2; +} + +main > h3:first-of-type, section:first-of-type > p, section:first-of-type ul { + margin-bottom: 0; +} + +main > h3:last-of-type, section:last-of-type > p, section:last-of-type ul { + margin-top: 0; }