website is now phone

index.html

@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style/styles.css">
   <link rel="stylesheet" href="style/gallery.css">
   <link rel="stylesheet" href="style/comments.css">
@@ -28,17 +29,22 @@
     <source src="textures/bot_background.mp4" type="video/mp4">
   </video>
   <div id="top-line">
-    <button id="about-btn">About This Website</button>
-    <button id="gallery-btn">Gallery</button>
-    <button id="bucketlist-btn">Bucketlist</button>
-    <button id="yuukabot-btn">Bot Status</button>
-    <button id="calendar-btn">Calendar</button>
-    <button id="services-btn">Services</button>
+    <span id="nav-current"></span>
+    <nav id="nav-tabs">
+      <button id="about-btn">About This Website</button>
+      <button id="gallery-btn">Gallery</button>
+      <button id="bucketlist-btn">Bucketlist</button>
+      <button id="yuukabot-btn">Bot Status</button>
+      <button id="calendar-btn">Calendar</button>
+      <button id="services-btn">Services</button>
+    </nav>
+    <button id="nav-hamburger" aria-label="Menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
   </div>
 
   <section id="about" class="tab-content">
 
-    <!-- Top half: welcome -->
     <div id="about-hero">
       <div id="click-counter-container">
         <img src="textures/yuuka_click.webp" id="yuuka-click-btn" alt="Click Me!">
@@ -52,20 +58,17 @@
       </div>
     </div>
 
-    <!-- Bottom half: Steam-style comments -->
+    <!-- comments -->
     <div id="comments-section">
 
-      <!-- Steam panel header -->
       <div class="steam-header">
         <span class="steam-header-title">COMMENTS</span>
         <span id="comments-title"></span>
       </div>
 
-      <!-- Post form — at the top -->
       <div class="steam-form-area">
         <p class="steam-form-label">Leave a comment:</p>
 
-        <!-- Avatar picker -->
         <div id="avatar-picker">
           <span class="picker-label">Avatar:</span>
 
@@ -101,10 +104,8 @@
         </form>
       </div>
 
-      <!-- Comments feed -->
       <div id="comments-list"></div>
 
-      <!-- Pagination -->
       <div id="comments-pagination" class="steam-pagination"></div>
 
     </div>
@@ -122,7 +123,6 @@
     </header>
 
     <div class="dash-grid">
-      <!-- Row 1: 3 boxes -->
       <div class="dash-card span2">
         <div class="card-top"><span class="card-label">Uptime</span></div>
         <p class="card-value" id="dash-uptime">—</p>
@@ -142,7 +142,6 @@
         <span class="card-detail">1m / 5m / 15m</span>
       </div>
 
-      <!-- Row 2: 3 boxes -->
       <div class="dash-card span2">
         <div class="card-top"><span class="card-label">Network</span></div>
         <p class="card-value" id="dash-net">—</p>
@@ -162,7 +161,6 @@
         <span class="card-detail" id="dash-swap-detail"></span>
       </div>
 
-      <!-- Row 3: 2 boxes stretched -->
       <div class="dash-card span3">
         <div class="card-top"><span class="card-label">CPU</span></div>
         <p class="card-value" id="dash-cpu-val">—</p>
@@ -179,7 +177,6 @@
         <span class="card-detail" id="dash-ram-detail"></span>
       </div>
 
-      <!-- Row 4: full width -->
       <div class="dash-card span6">
         <div class="card-top"><span class="card-label">System Info</span></div>
         <pre class="card-fetch" id="dash-fetch">—</pre>
@@ -213,7 +210,7 @@
     </header>
 
     <div class="svc-list">
-      <!-- One banner per service — copy this block to add another -->
+      <!-- copy this to add another service -->
       <article class="svc-banner" style="--brand: #FFD600">
         <img class="svc-logo" src="textures/revolt_logo.png" alt="">
         <div class="svc-info">
@@ -225,7 +222,7 @@
     </div>
   </section>
 
-  <!-- Lightbox (gallery) -->
+  <!-- gallery lightbox -->
   <div id="lightbox" class="lightbox">
     <span class="lightbox-close">&times;</span>
     <img class="lightbox-content" id="lightbox-img" alt="">
@@ -235,7 +232,7 @@
   <script src="js/gallery.js" defer></script>
   <script src="js/tabs.js" defer></script>
 
-  <!-- Firebase SDK (must load before the Firestore-backed scripts below) -->
+  <!-- firebase has to load before the scripts below -->
   <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
   <script src="js/comments.js"></script>