From 9d7913bf21c3f715b461beaf9c49dc040fdbb67d Mon Sep 17 00:00:00 2001
From: copyrighttxt <183881018+copyrighttxt@users.noreply.github.com>
Date: Mon, 3 Aug 2026 17:40:16 -0400
Subject: [PATCH] i also had ai do this btw

---
 app/pages/home/home.html |  61 +++++++------------
 app/static/css/home.css  | 126 ++++++++++++---------------------------
 2 files changed, 59 insertions(+), 128 deletions(-)

diff --git a/app/pages/home/home.html b/app/pages/home/home.html
index 84194e6..b987741 100644
--- a/app/pages/home/home.html
+++ b/app/pages/home/home.html
@@ -5,7 +5,7 @@
 {% endblock %}
 {% block content %}
 <div id="main" class="home-page-shell">
-    <div class="home-page-container">
+    <div class="home-page-container container">
 <!--        {% if not isEmailVerified: %}
         <div class="alert p-2 alert-warning d-flex align-items-center">
             <i class="bi bi-envelope-plus ms-2" style="font-size: 30px;"></i>
@@ -24,13 +24,13 @@
             <a href="/settings/discord_link" class="ms-auto text-decoration-none me-2"><button class="btn btn-primary btn-sm">Link Discord</button></a>
         </div>
         {%endif%}
-        <section class="home-hero card-container">
-            <div class="home-hero-avatar-wrap">
-                <img class="home-hero-avatar" src="/Thumbs/Head.ashx?x=150&y=150&userId={{currentuser.id}}" alt="{{currentuser.username}}" />
-            </div>
-            <div class="home-hero-copy">
+        <div class="home-hero-subtle d-flex align-items-center">
+            <img class="rounded-5 overflow-hidden me-4 home-hero-avatar" src="/Thumbs/Head.ashx?x=150&y=150&userId={{currentuser.id}}" alt="{{currentuser.username}}"/>
+            <div class="mt-2">
                 <p class="home-kicker mb-1">Welcome back</p>
-                <h1 class="home-greeting mb-2"><span id="greetings"></span>, {{currentuser.username}}!</h1>
+                <h1 class="home-greeting mb-2">
+                    <span id="greetings"></span>, {{currentuser.username}}!
+                </h1>
                 <div class="home-status-row">
                     {% if membershipValue == 1: %}
                         <span class="rbx-icon-bc"></span>
@@ -44,42 +44,31 @@
                     <span class="home-status-text">Your account and friends are the quickest places to jump back into the site.</span>
                 </div>
             </div>
-        </section>
-        <section class="home-section card-container">
-            <div class="home-section-header">
-                <div>
-                    <h4 class="home-section-title mb-1">Friends ({{friendcount}})</h4>
-                    <p class="home-section-meta mb-0">People online and worth checking in on.</p>
-                </div>
-                <a class="home-section-link" href="/users/{{currentuser.id}}/friends">View all</a>
-            </div>
-        <div class="home-friends-strip friends-scroll">
+        </div>
+        <h4 class="home-section-title mt-4">Friends ( {{friendcount}} )</h4>
+        <p class="home-section-meta mb-2">People online and worth checking in on.</p>
+        <div class="w-100 p-2 d-flex flex-nowrap card-container friends-scroll home-soft-strip" style="min-height: 100px;">
             {% for friend in friends %}
-                <a href="/users/{{friend.id}}/profile" class="home-friend-card">
-                    <div class="image-container home-friend-avatar-frame">
-                        <img class="home-friend-avatar" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" alt="{{friend.username}}"/>
+                <a href="/users/{{friend.id}}/profile">
+                    <div style="height: fit-content; width:90px;" class="me-3 home-friend-card">
+                        <div class="image-container home-friend-avatar-frame">
+                            <img class="rounded w-100 d-table home-friend-avatar" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" style="margin: 0 auto;height: fit-content; max-width: 100px;" alt="{{friend.username}}"/>
                             {% if friend.isonline: %}<div class="status-icon {% if friend.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
+                        </div>
+                        <p class="text-body w-100 text-center d-inline-block m-0 text-truncate" style="font-size: 12px;">{{friend.username}}</p>
                     </div>
-                    <p class="text-body w-100 text-center d-inline-block m-0 text-truncate home-friend-name">{{friend.username}}</p>
                 </a>
             {% endfor %}
             {% if friendcount == 0: %}
-                <div class="home-empty-state">
+                <div class="home-empty-state home-empty-inline">
                     <p class="mb-0">You have no friends yet.</p>
                     <a href="/games" class="btn btn-sm btn-primary mt-2">Explore games</a>
                 </div>
             {% endif %}
         </div>
-        </section>
-        <section class="home-section card-container">
-            <div class="home-section-header">
-                <div>
-                    <h4 class="home-section-title mb-1">Recently Played</h4>
-                    <p class="home-section-meta mb-0">Pick up where you left off or try something new.</p>
-                </div>
-                <a class="home-section-link" href="/games">Browse games</a>
-            </div>
-        <div class="home-places-strip">
+        <h4 class="home-section-title mt-4">Recently Played</h4>
+        <p class="home-section-meta mb-2">Pick up where you left off or try something new.</p>
+        <div class="w-100 p-2 d-flex home-soft-strip" style="overflow-x: hidden;min-height: 100px;overflow-x: auto;">
             {% for place in recentlyplayed %}
                 <a class="text-decoration-none" href="/games/{{place.id}}/">
                     <div class="me-3 overflow-hidden rounded place-card home-place-card">
@@ -108,13 +97,12 @@
                 </a>
             {% endfor %}
             {% if recentlyplayedcount == 0: %}
-                <div class="home-empty-state home-empty-wide">
+                <div class="home-empty-state home-empty-wide home-empty-inline">
                     <p class="mb-0">Looks like you haven’t played any games yet.</p>
                     <a class="btn btn-sm btn-primary mt-2" href="/games">Play something now</a>
                 </div>
             {% endif %}
         </div>
-        </section>
     </div>
 </div>
 <script>
@@ -132,10 +120,5 @@
     }
 
     document.getElementById("greetings").textContent = greeting;
-
-    document.querySelectorAll(".home-place-vote-fill").forEach((fill) => {
-        const percentage = fill.dataset.likePercentage || 0;
-        fill.style.width = `${percentage}%`;
-    });
 </script>
 {% endblock %}
diff --git a/app/static/css/home.css b/app/static/css/home.css
index ee38f4a..86ebc04 100644
--- a/app/static/css/home.css
+++ b/app/static/css/home.css
@@ -5,48 +5,18 @@
 
 .home-page-shell {
     width: 100%;
-    padding: 1.5rem 1rem 2rem;
+    padding: 1.25rem 1rem 1.75rem;
 }
 
 .home-page-container {
     width: 100%;
-    max-width: 1080px;
+    max-width: 980px;
     margin: 0 auto;
-    display: grid;
-    gap: 1rem;
+    padding: 0 0.25rem;
 }
 
-.home-alert {
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
-}
-
-.home-hero,
-.home-section {
-    padding: 1rem 1.1rem;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 18px;
-    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
-}
-
-.home-hero {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.home-hero-avatar-wrap {
-    position: relative;
-    flex: 0 0 auto;
-}
-
-.home-hero-avatar {
-    width: 88px;
-    height: 88px;
-    border-radius: 22px;
-    object-fit: cover;
-    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
+.home-hero-subtle {
+    padding: 0.5rem 0 0.75rem;
 }
 
 .home-kicker {
@@ -57,7 +27,7 @@
 }
 
 .home-greeting {
-    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
     font-weight: 700;
     line-height: 1.05;
 }
@@ -72,32 +42,13 @@
 .home-status-text,
 .home-section-meta {
     color: var(--text-secondary, #9c9c9c);
-    font-size: 0.95rem;
-}
-
-.home-section-header {
-    display: flex;
-    align-items: end;
-    justify-content: space-between;
-    gap: 1rem;
-    margin-bottom: 0.85rem;
+    font-size: 0.9rem;
 }
 
 .home-section-title {
-    font-size: 1.35rem;
+    font-size: 1.15rem;
     line-height: 1.1;
-    margin-bottom: 0.15rem;
-}
-
-.home-section-link {
-    color: #4ea2ff;
-    text-decoration: none;
-    font-size: 0.92rem;
-    flex: 0 0 auto;
-}
-
-.home-section-link:hover {
-    text-decoration: underline;
+    margin-bottom: 0;
 }
 
 .card-container {
@@ -106,9 +57,14 @@
     border-radius: 5px;
 }
 
+.home-soft-strip {
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
 .home-friends-strip {
     display: flex;
-    gap: 0.85rem;
+    gap: 0.75rem;
     align-items: flex-start;
     min-height: 116px;
 }
@@ -128,12 +84,7 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 18px;
-}
-
-.home-friend-name {
-    font-size: 12px;
-    margin-top: 0.35rem !important;
+    border-radius: 16px;
 }
 
 .home-empty-state {
@@ -144,8 +95,8 @@
     justify-content: center;
     text-align: center;
     color: var(--text-secondary, #9c9c9c);
-    border: 1px dashed rgba(255, 255, 255, 0.12);
-    border-radius: 16px;
+    border: 1px dashed rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
     padding: 1rem;
     flex: 1 1 auto;
 }
@@ -154,25 +105,20 @@
     width: 100%;
 }
 
-.home-places-strip {
-    display: flex;
-    gap: 0.85rem;
-    overflow-x: auto;
-    padding-bottom: 0.25rem;
-    scroll-snap-type: x proximity;
+.home-empty-inline {
+    margin: 0.25rem 0;
 }
 
 .home-place-card {
-    width: 180px;
+    width: 170px;
     flex: 0 0 auto;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    scroll-snap-align: start;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.07);
 }
 
 .home-place-thumb-wrap {
     overflow: hidden;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
 .home-place-thumb {
@@ -184,16 +130,16 @@
 
 .home-place-year {
     font-size: 11px;
-    padding: 4px 6px;
+    padding: 3px 6px;
     border-top-right-radius: 6px;
 }
 
 .home-place-copy {
-    min-height: 94px;
+    min-height: 90px;
 }
 
 .home-place-name {
-    font-size: 0.98rem;
+    font-size: 0.95rem;
     line-height: 1.15;
     line-clamp: 2;
     display: -webkit-box;
@@ -204,17 +150,24 @@
 
 .home-place-playing {
     margin: 0;
-    font-size: 0.88rem;
+    font-size: 0.84rem;
 }
 
 .home-place-playing span {
-    font-size: 0.82rem;
+    font-size: 0.8rem;
 }
 
 .home-place-votes {
     margin-top: auto;
 }
 
+.home-places-strip {
+    display: flex;
+    gap: 0.75rem;
+    overflow-x: auto;
+    padding-bottom: 0.25rem;
+}
+
 .status-icon {
     position: absolute;
     bottom : -8px;
@@ -256,15 +209,10 @@
         padding: 1rem 0.75rem 1.5rem;
     }
 
-    .home-hero {
+    .home-hero-subtle {
         align-items: flex-start;
     }
 
-    .home-section-header {
-        align-items: flex-start;
-        flex-direction: column;
-    }
-
     .home-place-card {
         width: 160px;
     }