projects / ~bandali / bndl.org / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ef72be3)
simplify and use css grids
authorAmin Bandali <bandali@gnu.org>
Wed, 31 Jul 2019 03:42:55 +0000 (23:42 -0400)
committerAmin Bandali <bandali@gnu.org>
Wed, 31 Jul 2019 03:42:55 +0000 (23:42 -0400)
many thanks to ddevault for the help :)

contact.html patch | blob | blame | history
index.html patch | blob | blame | history
style.css patch | blob | blame | history

diff --git a/contact.html b/contact.html
index 3c5bbf5..6741c69 100644 (file)
--- a/contact.html
+++ b/contact.html
@@ -10,12 +10,12 @@
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <header>
-      <h1 id="title">bandali's</h1>
-      <h2 id="subtitle">contact info</h2>
-    </header>
-    <article>
-      <div class="section">
+    <main>
+      <header>
+        <h1 id="title">bandali's</h1>
+        <h2 id="subtitle">contact info</h2>
+      </header>
+      <section>
         <p>
           email is by far my preferred method of communication.  i may
           be contacted at bandali&nbsp;at&nbsp;gnu&nbsp;dot&nbsp;org.
@@ -54,8 +54,10 @@
             </tr>
           </tbody>
         </table>
+      </section>
 
-        <h3>elsewhere</h3>
+      <h3>elsewhere</h3>
+      <section>
         <p>
           you may also find me at a few other places online.  stricken
           through accounts are those i don&rsquo;t use anymore, unless
@@ -75,7 +77,7 @@
           <li><strike><a href="https://github.com/notbandali">notbandali</a> on github</strike></li>
           <li><strike><a href="https://twitter.com/notbandali">notbandali</a> on twitter</strike></li>
         </ul>
-      </div>
-    </article>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/index.html b/index.html
index 3df0293..e0efc13 100644 (file)
--- a/index.html
+++ b/index.html
@@ -11,13 +11,13 @@
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <header>
-      <h1 id="title">bandali's</h1>
-      <h2 id="subtitle">corner on the interwebs</h2>
-    </header>
-    <section>
+    <main>
+      <header>
+        <h1 id="title">bandali's</h1>
+        <h2 id="subtitle">corner on the interwebs</h2>
+      </header>
       <h3>academia</h3>
-      <div class="section">
+      <section>
         <nav>
           <ul id="academia">
             <li><a href="cv">cv</a></li>
@@ -25,11 +25,9 @@
             <li><a href="research-interests">research interests</a></li>
           </ul>
         </nav>
-      </div>
-    </section>
-    <section>
+      </section>
       <h3>personal</h3>
-      <div class="section">
+      <section>
         <nav>
           <ul id="personal">
             <li><a href="blog">blog</a></li>
@@ -38,7 +36,7 @@
             <li><a href="contact">contact</a></li>
           </ul>
         </nav>
-      </div>
-    </section>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/style.css b/style.css
index e5d2862..9d3f78e 100644 (file)
--- 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;
 }
Sources for my personal site