Touched up seeds page layout and responsiveness

Author: wyndchyme

seeds/index.html

@@ -49,7 +49,7 @@
             -2px 0 0 #667C96, 
             2px 0 0 #667C96,   
             0 -2px 0 #667C96;  
-        border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+        border-bottom: 4px solid rgba(0, 0, 0, 0.3);
         z-index: 1;
         justify-content: center;
         display: flex;
@@ -58,17 +58,26 @@
         image-rendering: pixelated;
     }
     .tab-btn:hover {
-        background: #5588cc;
+        filter: brightness(1.2);
     }
+    .tab-btn:hover img {
+      filter: brightness(0.833);
+    }
+    /* wyndchyme was here. Yes, I know this is hilariously dumb. */
     .tab-btn.active {
         background: #225588;
         border-bottom: none;
         text-decoration: underline;
     }
+    .tab-btn.active:hover img {
+      filter: brightness(1);
+    }
+    .tab-btn.active:hover {
+      filter: none;
+    }
     .tab-panel {
         display: none;
         padding: 1em;
-        height: calc(100vh - 9.5em);
     }
     .tab-panel.active {
         display: block;
@@ -103,7 +112,7 @@
       display: grid;
       gap: 1em;
       padding: 1em;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       font-family: 'Minecraft Regular';
       font-weight: normal;
     }
@@ -113,7 +122,7 @@
       color: white;
       border: 2px solid black; 
       outline: 2px solid rgba(255, 255, 255, 0.3);
-      min-height: 100px;
+      min-height: 150px;
     }
     .grid-item:hover {
       background: rgba(255, 255, 255, 0.4);
@@ -153,18 +162,30 @@
 
     <div class="tab-container" style="margin-top: 7em;">
         <div class="tab-buttons">
-          <button class="tab-btn active" data-tab="tab1" style="background: rgb(118, 38, 38);">
+          <button class="tab-btn active" data-tab="tab1" style="background: rgb(118, 38, 38); 
+          box-shadow: 
+          -2px 0 0 #966666, 
+          2px 0 0 #966666,   
+          0 -2px 0 #966666;">
             <img src="/img/gui/oreui/resourcepacks.png">Structures
         </button>
-          <button class="tab-btn" data-tab="tab2" style="background: rgb(29, 86, 55);">
+          <button class="tab-btn" data-tab="tab2" style="background: rgb(29, 86, 55);
+          box-shadow: 
+          -2px 0 0 #7f9666, 
+          2px 0 0 #7f9666,   
+          0 -2px 0 #7f9666;">
             <img src="/img/gui/oreui/maps.png">Terrain
         </button>
           <button class="tab-btn" data-tab="tab3">
             <img src="/img/gui/oreui/other.png">Other
         </button>
         </div>
         <div class="tab-content">
-          <div class="tab-panel active" id="tab1" style="background: rgb(118, 38, 38)">
+          <div class="tab-panel active" id="tab1" style="background: rgb(118, 38, 38);
+          box-shadow: 
+          -2px 0 0 #966666, 
+          2px 0 0 #966666,   
+          0 2px 0 #966666;">
             <div class="grid-container">
 
               <div class="grid-item">
@@ -193,7 +214,11 @@
             </div>            
           </div>
 
-          <div class="tab-panel" id="tab2" style="background: rgb(29, 86, 55);">
+          <div class="tab-panel" id="tab2" style="background: rgb(29, 86, 55);
+          box-shadow: 
+          -2px 0 0 #7f9666, 
+          2px 0 0 #7f9666,   
+          0 2px 0 #7f9666;">
             <div class="grid-container">
 
               <div class="grid-item">
@@ -271,6 +296,40 @@
           });
         });
       </script>
+      <script>
+        function stretchTabPanel() {
+          const tabPanel = document.querySelector('.tab-panel.active');
+          if (!tabPanel) return;
+      
+          const top = tabPanel.getBoundingClientRect().top + window.scrollY;
+          const height = window.innerHeight - top;
+          tabPanel.style.height = `${height}px`;
+          tabPanel.style.overflowY = 'auto';
+        }
+      
+        document.querySelectorAll('.tab-btn').forEach(button => {
+          button.addEventListener('click', () => {
+            const tabId = button.dataset.tab;
+      
+            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+            document.querySelectorAll('.tab-panel').forEach(panel => {
+              panel.classList.remove('active');
+              panel.style.height = '';
+            });
+      
+            button.classList.add('active');
+            const activePanel = document.getElementById(tabId);
+            activePanel.classList.add('active');
+      
+            stretchTabPanel(); 
+          });
+        });
+      
+        window.addEventListener('load', stretchTabPanel);
+        window.addEventListener('resize', stretchTabPanel);
+      </script>
+      
+      
 
 
   </body>