website: css

website/styles/main.css

@@ -27,11 +27,10 @@ main {
 
   &::after {
     bottom: 0;
-    height: 16rem;
+    height: var(--main-padding);
     background-image: linear-gradient(
       to bottom,
       transparent,
-      var(--background-color) 85%,
       var(--background-color)
     );
   }
@@ -54,7 +53,7 @@ main {
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding-bottom: var(--bottom-area);
+    padding-bottom: 12rem;
   }
 }
 

website/styles/panes/explorer.css

@@ -1,6 +1,6 @@
 #explorer {
   width: 100%;
-  height: 100dvh;
+  height: 100%;
   display: flex;
   overflow: hidden;
 
@@ -12,35 +12,6 @@
     overflow-y: auto;
     padding: var(--main-padding) 0;
     flex-direction: column;
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: var(--main-padding);
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    &::before {
-      left: 0;
-      background-image: linear-gradient(
-        to left,
-        transparent,
-        var(--background-color)
-      );
-    }
-
-    &::after {
-      right: 0;
-      background-image: linear-gradient(
-        to right,
-        transparent,
-        var(--background-color)
-      );
-    }
   }
 
   --cube: 4.5rem;
@@ -63,6 +34,7 @@
     @media (min-width: 768px) {
       height: 100%;
       overflow-y: auto;
+      padding-right: calc(var(--main-padding) / 2);
     }
 
     .blocks {
@@ -79,6 +51,10 @@
         height: 11.5rem;
         width: max-content;
       }
+
+      @media (min-width: 768px) {
+        padding-bottom: 6rem;
+      }
     }
 
     .cube {
@@ -192,6 +168,7 @@
 
     @media (min-width: 768px) {
       overflow-y: auto;
+      padding-left: calc(var(--main-padding) / 2);
     }
 
     h1 {

website/styles/variables.css

@@ -33,10 +33,11 @@
   --inv-border-color: light-dark(var(--dark-gray), var(--light-gray));
   --off-border-color: light-dark(var(--dark-white), var(--light-black));
 
-  --font-mono: "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  --font-mono:
+    "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
-  --font-serif: Instrument, Charter, "Bitstream Charter", "Sitka Text",
-    Cambria, serif;
+  --font-serif:
+    Instrument, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
 
   --font-size-xs: 0.75rem;
   --line-height-xs: calc(1 / 0.75);
@@ -56,5 +57,4 @@
   --negative-main-padding: calc(-1 * var(--main-padding));
   --font-weight-base: 400;
   --max-main-width: 70dvw;
-  --bottom-area: 69vh;
 }