css refactoring

public/scripts/records.js

@@ -174,15 +174,15 @@ function FriendlyRecord({type, record}) {
 
 function RecordsByName({ name, recordSets }) {
     return html`
-        <article>
-            <h3>${name}</h4>
-            <div>
+        <article class="rrsets-per-name">
+            <h3 class="record-name">${name}</h4>
+            <div class="rrsets-per-type">
                 ${Object.entries(recordSets).map(
                     ([type, records]) => {
                         return html`
-                            <article>
-                                <h4>${recordTypeNames[type]}</h4>
-                                <ul>
+                            <article class="rrset-per-type">
+                                <h4 class="record-type">${recordTypeNames[type]}</h4>
+                                <ul class="rrset-rdata">
                                     ${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)}
                                 </ul>
                             </article>

public/styles/zone.css

@@ -22,55 +22,64 @@ h2 {
     margin: 0;
     flex-grow: 1;
 }
+
 header > :not(:last-of-type) {
     margin-right: 2ch;
 }
 
-.zone-content h3, .zone-content h4 {
-    margin: 0;
-    font-weight: normal;
-    font-size: 1rem;
-    width: 30%;
-}
-
-.zone-content article {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.zone-content > article > div {
-    flex-grow: 1;
-}
-
-.zone-content > article {
+.zone-content article.rrsets-per-name {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-gap: 2ch;
     margin: .5rem 0;
-    position: relative;
 }
 
-.zone-content > article:not(:last-of-type) {
+.zone-content article.rrsets-per-name:not(:last-of-type) {
     border-bottom: 2px solid rgb(var(--color-hightlight-2));
 }
 
-.zone-content article > *{
-    margin-right: 2ch;
+.zone-content h3.record-name,
+.zone-content h4.record-type {
+    margin: 0;
+    font-weight: normal;
+    font-size: 1rem;
 }
 
-.zone-content article ul {
+.zone-content h3.record-name {
+    grid-column: 1 / 3;
+}
+
+.zone-content div.rrsets-per-type {
+    grid-column: 3 / 7;
+}
+
+.zone-content article.rrset-per-type {
+    grid-template-columns: repeat(4, 1fr);
+    display: grid;
+    grid-gap: 2ch;
+}
+
+.zone-content h4.record-type {
+    grid-column: 1 / 2;
+}
+
+.zone-content ul.rrset-rdata {
     padding: 0;
     margin: 0;
     list-style-type: none;
+    grid-column: 2 / 5;
 }
 
-.zone-content article dl {
+.zone-content ul.rrset-rdata dl {
     display: grid;
     grid-template: auto / max-content 1fr;
 }
 
-.zone-content article dd {
+.zone-content ul.rrset-rdata dd {
     margin: 0;
 }
 
-.zone-content article dt span {
+.zone-content ul.rrset-rdata dt span {
     display: inline-block;
     background-color: rgb(var(--color-hightlight-1));
     padding: 0.1em 0.5em;