website_next: part 2

website_next/explore/block/style.css

@@ -10,11 +10,11 @@
   line-height: var(--line-height-sm);
   scrollbar-width: none;
 
-  .dim {
+  [data-dim] {
     opacity: 0.5;
   }
 
-  :is(h1, h2, p, dl, dd) {
+  :is(h1, p) {
     margin: 0;
   }
 
@@ -42,7 +42,7 @@
       line-height: 1;
     }
 
-    .title-label {
+    [data-title-label] {
       font-family: var(--font-serif);
       font-size: 2.5rem;
       font-style: italic;
@@ -50,7 +50,7 @@
       text-transform: lowercase;
     }
 
-    .title-height {
+    [data-title-height] {
       color: var(--gray);
       font-size: var(--font-size-lg);
       line-height: var(--line-height-lg);
@@ -86,10 +86,6 @@
     gap: 0.75rem;
     min-width: 0;
 
-    &[data-group="overview"] {
-      grid-column: 1 / -1;
-    }
-
     &[data-group="mining"] {
       --section-color: var(--orange);
 
@@ -160,10 +156,11 @@
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-
     }
 
-    &:is([data-group="mining"], [data-group="difficulty"]) {
+    &[data-group="difficulty"] {
+      --section-color: var(--orange);
+
       [data-metric-list] {
         display: grid;
         gap: 0.5rem;
@@ -247,31 +244,9 @@
       }
     }
 
-    &[data-group="difficulty"] {
-      --section-color: var(--orange);
-    }
-
     &[data-group="block"] {
       --section-color: var(--cyan);
 
-      h2 {
-        color: var(--section-color);
-      }
-    }
-
-    &[data-group="rewards"] {
-      --section-color: var(--orange);
-    }
-
-    &[data-group="rewards"] {
-      [data-stat-box] {
-        display: grid;
-        gap: 0.5rem;
-        min-width: 0;
-      }
-    }
-
-    &[data-group="block"] {
       [data-block-box] {
         display: grid;
         gap: 0.5rem;
@@ -365,6 +340,14 @@
     }
 
     &[data-group="rewards"] {
+      --section-color: var(--orange);
+
+      [data-rewards-pane] {
+        display: grid;
+        gap: 0.5rem;
+        min-width: 0;
+      }
+
       [data-reward-total] {
         display: grid;
         gap: 0.125rem;
@@ -417,62 +400,11 @@
     }
 
     &[data-group="fees"] {
-      h2 {
-        color: var(--green);
-      }
-
       figure[data-fee-chart] {
         --chart-xy-height: 7.5rem;
       }
     }
   }
-
-  h2 {
-    color: var(--gray);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
-    font-weight: 450;
-    line-height: var(--line-height-xs);
-    text-transform: uppercase;
-  }
-
-  dl {
-    display: grid;
-
-    > div {
-      display: grid;
-      grid-template-columns: minmax(6rem, 0.36fr) minmax(0, 1fr);
-      gap: 0.75rem;
-      padding: 0.35rem 0;
-      border-bottom: 1px solid
-        color-mix(in oklch, var(--gray) 12%, transparent);
-
-      &:first-child {
-        padding-top: 0;
-      }
-
-      &:last-child {
-        padding-bottom: 0;
-        border-bottom: 0;
-      }
-    }
-  }
-
-  dt {
-    color: var(--gray);
-  }
-
-  dd {
-    min-width: 0;
-    overflow-wrap: anywhere;
-    text-align: right;
-  }
-
-  code {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
-    line-height: var(--line-height-xs);
-  }
 }
 
 @media (max-width: 48rem) {
@@ -484,18 +416,5 @@
     > div {
       grid-template-columns: minmax(0, 1fr);
     }
-
-    section[data-group="overview"] {
-      grid-column: auto;
-    }
-
-    dl > div {
-      grid-template-columns: minmax(0, 1fr);
-      gap: 0.15rem;
-    }
-
-    dd {
-      text-align: left;
-    }
   }
 }