Home: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
@@ Line 20: / Line 20: @@
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        overflow: hidden;
-       margin: 12px 0;        /* left aligned (no auto margins) */
+       margin: 12px 0;
-       width: 100%;           /* occupy full row so content below isn't squashed */
+       width: 100%;
-       max-width: 900px;      /* nice readable max width on desktop */
+       max-width: 900px;
      }
      .season2-inner {
        display: grid;
-       grid-template-columns: 130px auto; /* image + text */
+       grid-template-columns: 130px auto;
        gap: 12px;
-       padding: 8px 12px;     /* compact height per your request */
+       padding: 8px 12px;
        align-items: center;
-    }
-    .season2-media {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
      }
      .season2-media img {
-       width: 112px;   /* keep same image size */
+       width: 112px;
        height: auto;
        border-radius: 8px;
@@ Line 57: / Line 51: @@
        color: #111827;
        margin: 0;
-      white-space: nowrap;  /* desktop no-wrap */
      }
@@ Line 65: / Line 58: @@
        color: #4b5563;
        margin: 0;
-      white-space: nowrap;  /* desktop no-wrap */
      }
@@ Line 83: / Line 75: @@
        border-radius: 8px;
        transition: transform 0.15s ease;
-      white-space: nowrap;   /* desktop no-wrap */
        width: fit-content;
      }
-     .season2-button:hover { transform: scale(1.03); }
+     .season2-button:hover {
+      transform: scale(1.03);
+    }
-     /* Mobile: stack + allow wrapping so nothing gets squashed */
+     /* ✅ Mobile fix: stack image above text */
      @media (max-width: 640px) {
        .season2-inner {
-         grid-template-columns: 1fr;   /* stack image above text */
+         grid-template-columns: 1fr;
-         align-items: start;
+         gap: 8px;
        }
-       .season2-headline,
+       .season2-media {
-       .season2-subtitle,
+        justify-content: center; /* center the image */
-       .season2-button {
+       }
-         white-space: normal;          /* allow wrap on small screens */
+       .season2-content {
+         text-align: center; /* center-align text/buttons for mobile */
        }
      }
@@ Line 115: / Line 109: @@
          <p class="season2-headline">🔥 Alpha: Season 2</p>
          <p id="season2-heading" class="season2-subtitle">Sneak peek at what's to come</p>
-         <a href="https://treeverse.wiki/index.php?title=Season_2" class="season2-button">Learn More ➜</a>
+         <a href="Season 2" class="season2-button">Learn More ➜</a>
        </div>
      </div>
@@ Line 121: / Line 115: @@
 </body>
 </html>