From 9fee35e6e6bfb023c3f4b4474d2921e97be07462 Mon Sep 17 00:00:00 2001
From: Jevinca Marvella <mjevincamarvella@gmail.com>
Date: Mon, 8 Dec 2025 10:58:24 +0700
Subject: [PATCH] Homepage Credit and Responsive

---
 Homepage.css        | 14 +++++++++-
 Homepage.html       | 54 +++++++++++++++++------------------
 Homepage_Credit.css | 68 +++++++++++++++------------------------------
 3 files changed, 62 insertions(+), 74 deletions(-)

diff --git a/Homepage.css b/Homepage.css
index 781852a..b0f8a2d 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -13,6 +13,11 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  max-width: 100vw;
 }
 
 /* Animated Background Grid */
@@ -195,8 +200,15 @@ header {
   z-index: 10;
   text-align: center;
   padding: 140px 20px 120px;
-  max-width: 1100px;
+  max-width: 100%;
+  width: 100%;
   margin: 0 auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 70vh;
+  overflow: hidden;
 }
 
 .hero-title {
diff --git a/Homepage.html b/Homepage.html
index 0965952..197b658 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -12,36 +12,36 @@
   <!-- Neon Particles Background -->
   <div id="particles"></div>
 
-  <!-- Header -->
-  <header>
-    <div class="logo">2048</div>
-    <div class="nav-buttons">
-      <a href="Login.html" class="btn btn-login">Login</a>
-    </div>
-  </header>
+  <!-- Main Content Wrapper -->
+  <div class="main-content">
+    <!-- Header -->
+    <header>
+      <div class="logo">2048</div>
+      <div class="nav-buttons">
+        <a href="Login.html" class="btn btn-login">Login</a>
+      </div>
+    </header>
 
-  <!-- Hero Section -->
-  <section class="hero">
-    <div class="hero-title">2048</div>
-    <p class="hero-subtitle">Join the tiles, reach 2048</p>
-    <div class="cta-buttons">
-      <a href="2048.html" class="btn btn-cta btn-play">Play</a>
-      <a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
-    </div>
-  </section>
-
-  <!-- Spacer -->
-  <br><br><br>
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="hero-title">2048</div>
+      <p class="hero-subtitle">Join the tiles, reach 2048</p>
+      <div class="cta-buttons">
+        <a href="2048.html" class="btn btn-cta btn-play">Play</a>
+        <a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
+      </div>
+    </section>
+  </div>
 
   <!-- Footer with Credits -->
-<footer>
-  <hr class="footer-hr">
-  <div class="credits">
-    <p class="credits-text">
-      <strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
-    </p>
-  </div>
-</footer>
+  <footer>
+    <hr class="footer-hr">
+    <div class="credits">
+      <p class="credits-text">
+        <strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
+      </p>
+    </div>
+  </footer>
 
   <!-- Logout Confirmation Modal -->
   <div class="logout-overlay" id="logout-overlay" style="display: none">
diff --git a/Homepage_Credit.css b/Homepage_Credit.css
index 7aeb15d..533af55 100644
--- a/Homepage_Credit.css
+++ b/Homepage_Credit.css
@@ -1,40 +1,23 @@
-/* Body Setup - Flexbox untuk push footer ke bawah */
-body {
-  min-height: 100vh;
+/* Main Content Wrapper - Takes all space except footer */
+.main-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: 0;
-  margin: 0;
+  position: relative;
+  z-index: 10;
 }
 
-/* Main Content Area - Flex Grow untuk isi space */
-header,
-.hero,
-section:not(footer) {
-  flex-shrink: 0; /* prevent shrinking */
-}
-
-/* Spacer juga perlu flex-grow supaya push footer */
-br {
-  display: block;
-}
-
-/* Wrapper untuk semua konten sebelum footer */
-body > *:not(footer):not(script):not(#particles):not(.logout-overlay):not(.logout-success-overlay) {
-  flex-shrink: 0;
-}
-
-/* Footer Section - Relative & Auto Push to Bottom */
+/* Footer Section - Always at bottom */
 footer {
   position: relative;
-  margin-top: auto; /* push footer ke bawah */
   z-index: 10;
   text-align: center;
-  padding: 20px 20px;
+  padding: 20px;
   background: transparent;
+  margin-top: 0;
 }
 
-/* HR Line Above Credits - Simple Single Line */
+/* HR Line Above Credits */
 .footer-hr {
   width: 50%;
   max-width: 500px;
@@ -44,7 +27,7 @@ footer {
   border: none;
 }
 
-/* Credits Container - No Box, Just Text */
+/* Credits Container */
 .credits {
   max-width: 100%;
   margin: 0 auto;
@@ -53,7 +36,7 @@ footer {
   border: none;
 }
 
-/* Simple Credit Text - Small & Clean */
+/* Credit Text */
 .credits-text {
   color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
@@ -68,23 +51,12 @@ footer {
   font-weight: 500;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  footer {
-    padding: 15px 15px;
-  }
-  
-  .footer-hr {
-    width: 60%;
-    margin-bottom: 10px;
-  }
-  
-  .credits-text {
-    font-size: 11px;
-  }
-}
-
+/* Responsive - HP Only */
 @media (max-width: 480px) {
+  .main-content {
+    min-height: calc(100vh - 80px);
+  }
+
   footer {
     padding: 12px 10px;
   }
@@ -95,7 +67,11 @@ footer {
   }
   
   .credits-text {
-    font-size: 10px;
-    line-height: 1.4;
+    font-size: 9px;
+    line-height: 1.6;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 5px;
   }
 }
\ No newline at end of file