simplify and use css grids

[~bandali/bndl.org] / style.css

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