Updated 7 files and added assets/logo/light.css (automated)

8 files changed, 264 insertions, 41 deletions

diff --git a/assets/logo/light.css b/assets/logo/light.css
new file mode 100644
index 0000000..ead5586
--- /dev/null
+++ b/assets/logo/light.css
@@ -0,0 +1,220 @@
+@media (prefers-color-scheme: light) {
+    body {
+        color: black !important;
+        background-color: #efefef !important;
+    }
+
+    #banner-lower {
+        background: #dddddd8a !important;
+    }
+
+    #timeline-container {
+        background: #dddddd8a !important;
+        border-top-color: rgba(0, 0, 0, .1) !important;
+    }
+
+    #timeline a, .new-homepage-system-title, .new-homepage-link, .home-legacy, .member-card-name, .member-card-prefix, .member-card-prefix code, #navigation-pane *, #mobile-navigation-box-container *, .member-link, .relation-intro, .system-action, #member-banner code, #system-info a {
+        color: black !important;
+    }
+
+    .timeline-indicator {
+        border-right-color: rgba(0, 0, 0, .5) !important;
+    }
+
+    .home-legacy-icon, #explicit-modal img {
+        filter: invert(1);
+    }
+
+    #hpd-legacy, .hpd-item-card {
+        background-color: rgba(0, 0, 0, .05) !important;
+    }
+
+    .hpd-item-card:hover {
+        background-color: rgba(0, 0, 0, .1) !important;
+    }
+
+    .hpd-item-card:active {
+        background-color: rgba(0, 0, 0, .15) !important;
+    }
+
+    #navigation-pane {
+        background-color: #ddd !important;
+        border-right: 1px solid rgba(0, 0, 0, .1) !important;
+    }
+
+    #mobile-navigation {
+        background-color: #ddd !important;
+        border-top: 1px solid rgba(0, 0, 0, .1) !important;
+    }
+
+    .dropdown-icon, #login-link img, .alert, .btn-close, .relation img, .text-danger, .text-success, .form-select, .ck-toolbar, .form-check-input, .system-action img, #member-designs-inner img, .form-control, .list-group-item img {
+        filter: none !important;
+    }
+
+    #login-link, #pane-header, .pane-group {
+        border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
+    }
+
+    .pane-group-category {
+        background: rgba(0, 0, 0, .025) !important;
+        border: 1px solid rgba(0, 0, 0, .05) !important;
+    }
+
+    .pane-group-item:hover, .mobile-navigation-item:hover {
+        background-color: rgba(0, 0, 0, .05);
+    }
+
+    .mobile-navigation-item:active, .mobile-navigation-item.open {
+        background-color: rgba(0, 0, 0, .1);
+    }
+
+    #mobile-navigation-box-container {
+        background-color: rgba(255, 255, 255, .5) !important;
+    }
+
+    #page-content a {
+        color: #0d6efd;
+    }
+
+    #btn-on {
+        background: hsl(0, 80%, 75%) !important;
+    }
+
+    .modal-backdrop {
+        background-color: #fff !important;
+    }
+
+    .modal-header, #explicit-modal .modal-header {
+        border-bottom: 1px solid #dee2e6 !important;
+    }
+
+    .modal-content, #explicit-modal .modal-content {
+        background-color: #fff !important;
+        border: 1px solid rgba(0,0,0,.2) !important;
+    }
+
+    .relation {
+        background-color: rgba(0, 0, 0, .05) !important;
+    }
+
+    .relation-intro {
+        background-color: rgba(0, 0, 0, .025) !important;
+        border-right: 1px solid rgba(0, 0, 0, .05) !important;
+    }
+
+    .card {
+        background-color: #fff !important;
+        border: 1px solid rgba(0,0,0,.125) !important;
+        color: black;
+    }
+
+    .list-group-item {
+        color: #212529 !important;
+        background-color: #fff !important;
+        border-color: rgba(0,0,0,.125) !important;
+    }
+
+    .list-group-item-action:focus, .list-group-item-action:hover {
+        color: #495057 !important;
+        background-color: #f8f9fa !important;
+    }
+
+    .btn-outline-light, #page-content .btn-outline-light {
+        color: #212529 !important;
+        border-color: #212529 !important;
+    }
+
+    .btn-outline-light:hover, #page-content .btn-outline-light:hover {
+        color: #fff !important;
+        background-color: #212529 !important;
+        border-color: #212529 !important;
+    }
+
+    .btn-check:active+.btn-outline-light, .btn-check:checked+.btn-outline-light, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show, .btn-outline-light:active, #page-content .btn-outline-light:active {
+        color: #fff !important;
+        background-color: #212529 !important;
+        border-color: #212529 !important;
+    }
+
+    .form-control {
+        color: #212529 !important;
+        background-color: #fff !important;
+        background-clip: padding-box !important;
+        border: 1px solid #ced4da !important;
+    }
+
+    .contact-item {
+        background-color: #ddd;
+    }
+
+    .contact-method {
+        background-color: #ccc;
+    }
+
+    .dropdown-menu {
+        background-color: #fff !important;
+    }
+
+    .dropdown-item {
+        color: #212529 !important;
+        opacity: 1 !important;
+    }
+
+    .dropdown-item:focus, .dropdown-item:hover {
+        color: #1e2125 !important;
+        background-color: #e9ecef !important;
+    }
+
+    .day-gradient {
+        color: white;
+    }
+
+    #system-banner-inner, #member-banner-inner {
+        background: linear-gradient(180deg, rgba(239,239,239,0) 0%, rgba(239,239,239,.25) 50%, rgba(239,239,239,1) 100%) !important;
+    }
+
+    #system-page, #member-page {
+        background-color: rgba(226,226,226,0.8) !important;
+    }
+
+    .system-info-system {
+        background-color: rgba(0, 0, 0, .05) !important;
+    }
+
+    #system-actions {
+        background-color: rgba(0, 0, 0, .025) !important;
+    }
+
+    .system-action:hover {
+        background: rgba(0, 0, 0, .05) !important;
+    }
+
+    #member-designs-inner {
+        background-color: rgba(20, 20, 20, .05) !important;
+    }
+
+    .btn-dark {
+        color: #000 !important;
+        background-color: #f8f9fa !important;
+        border-color: #f8f9fa !important;
+    }
+
+    .btn-dark:hover {
+        color: #000 !important;
+        background-color: #f9fafb !important;
+        border-color: #f9fafb !important;
+    }
+
+    .btn-check:active+.btn-dark, .btn-check:checked+.btn-dark, .btn-dark.active, .btn-dark:active, .show>.btn-dark.dropdown-toggle {
+        color: #000 !important;
+        background-color: #f9fafb !important;
+        border-color: #f9fafb !important;
+    }
+
+    .btn-check:focus+.btn-dark, .btn-dark:focus {
+        color: #000 !important;
+        background-color: #f9fafb !important;
+        border-color: #f9fafb !important;
+        box-shadow: 0 0 0 0.25rem rgba(211,212,213,.5) !important;
+    }
+}
\ No newline at end of file
diff --git a/includes/components/header.inc b/includes/components/header.inc
index 234b518..5179d54 100644
--- a/includes/components/header.inc
+++ b/includes/components/header.inc
@@ -54,6 +54,7 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
 <html lang="en">
 <head>
     <link href="/assets/logo/custom.css" rel="preload" as="style">
+    <link href="/assets/logo/light.css" rel="preload" as="style">
     <link href="/assets/logo/custom.css" rel="stylesheet">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -61,6 +62,7 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     <title><?= $title && $title !== "-" ? $title . " · " : "" ?>Cold Haze</title>
     <link rel="shortcut icon" href="/assets/logo/newlogo<?= $isLoggedIn || $isLowerLoggedIn ? "3" : "" ?>.png" type="image/png">
+    <link href="/assets/logo/light.css" rel="stylesheet">
 </head>
 <body style="background-color: #000;">
     <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/navigation.inc"; global $navigation; ?>
diff --git a/includes/components/sysbanner.inc b/includes/components/sysbanner.inc
index 26a049e..30babf0 100644
--- a/includes/components/sysbanner.inc
+++ b/includes/components/sysbanner.inc
@@ -13,7 +13,7 @@ $pages = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/pa
 
 ?>
 
-<div id="system-info" style="background-color:rgba(255, 255, 255, .05);margin-left: -20px; margin-right: -20px;margin-top:-20px;padding: 0 20px 10px; <?php if ($systemID === $app["other"]["id"]): ?>padding-top: 15px;<?php endif; ?>">
+<div id="system-info" class="system-info-system" style="background-color:rgba(255, 255, 255, .05);margin-left: -20px; margin-right: -20px;margin-top:-20px;padding: 0 20px 10px; <?php if ($systemID === $app["other"]["id"]): ?>padding-top: 15px;<?php endif; ?>">
     <div style="padding:10px 10px 10px 20px;text-align:center;">
         <div>
             <img src="<?= getAsset($systemID) ?>" alt="" style="margin-right: auto; margin-left: auto; display: block; width:128px;max-height:128px;border-radius:10px;">
diff --git a/includes/components/timeline.inc b/includes/components/timeline.inc
index 1a34550..3766073 100644
--- a/includes/components/timeline.inc
+++ b/includes/components/timeline.inc
@@ -6,23 +6,23 @@ function displayTimeline($systems) { global $app; $showIcons = count($systems) >
         <thead>
         <tr class="row-desktop">
             <?php if ($showIcons): ?><th colspan="20"></th><?php endif; ?>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 6) ?></th>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 5) ?></th>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 4) ?></th>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 3) ?></th>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 2) ?></th>
-            <th class="dynamic-time" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 1) ?></th>
-            <th class="dynamic-time" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time()) ?></th>
+            <th class="dynamic-time timeline-indicator" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 6) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 5) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 4) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 3) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 2) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 1) ?></th>
+            <th class="dynamic-time  timeline-indicator" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time()) ?></th>
         </tr>
         <tr class="row-mobile">
             <?php if ($showIcons): ?><th colspan="20"></th><?php endif; ?>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 6) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 5) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 4) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 3) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 2) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 1) ?></th>
-            <th class="dynamic-time-mobile" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time()) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 6) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 5) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 4) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 3) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 2) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 1) ?></th>
+            <th class="dynamic-time-mobile  timeline-indicator" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time()) ?></th>
         </tr>
         </thead>
         <tbody>
@@ -70,23 +70,23 @@ function displayTimeline($systems) { global $app; $showIcons = count($systems) >
         <?php endforeach; ?>
         <tr class="row-desktop">
             <?php if ($showIcons): ?><td colspan="20"></td><?php endif; ?>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">6 hours ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">5 hours ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">4 hours ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">3 hours ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">2 hours ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">1 hour ago</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">6 hours ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">5 hours ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">4 hours ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">3 hours ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">2 hours ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">1 hour ago</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
         </tr>
         <tr class="row-mobile">
             <?php if ($showIcons): ?><td colspan="20"></td><?php endif; ?>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-6h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-5h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-4h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-3h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-2h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-1h</td>
-            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-6h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-5h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-4h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-3h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-2h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-1h</td>
+            <td class="timeline-indicator" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
         </tr>
         <tr>
             <?php for ($i = 0; $i < 420; $i++): ?><td></td><?php endfor; ?>
diff --git a/includes/fragments/member.inc b/includes/fragments/member.inc
index 476b748..9ebb4c2 100644
--- a/includes/fragments/member.inc
+++ b/includes/fragments/member.inc
@@ -152,8 +152,8 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $memberID . ".pn
     <div id="member-page" style="background-color: rgba(26,26,26,0.8);border-radius: 10px;padding:20px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);margin-top:<?= !isset($memberData["banner"]) ? "15vh" : "30vh" ?>;<?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID.html") && !($isLoggedIn && file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID-private.html"))): ?> padding-bottom: 0 !important;<?php endif; ?>">
         <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/fullbanner.inc"; ?>
         <?php $member = $memberData; if (($isLoggedIn || $isLowerLoggedIn) && file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $member["id"] . ".png")): ?>
-        <div style="padding-top: 20px; padding-bottom: 20px;">
-            <div style="background-color: rgba(200, 200, 200, .05); border-radius: 10px; padding: 10px 20px; overflow-x: scroll; display: flex; grid-gap: 20px;">
+        <div style="padding-top: 20px; padding-bottom: 20px;" id="member-designs">
+            <div id="member-designs-inner" style="background-color: rgba(200, 200, 200, .05); border-radius: 10px; padding: 10px 20px; overflow-x: scroll; display: flex; grid-gap: 20px;">
                 <?php foreach ($designs as $id => $design): if (isset($design)): ?>
                 <div style="display: grid; grid-template-rows: 208px 48px; width: max-content;">
                     <div style="display: flex; align-items: center; justify-content: center;">
diff --git a/includes/util/functions.inc b/includes/util/functions.inc
index 8b22709..8a8c4f8 100644
--- a/includes/util/functions.inc
+++ b/includes/util/functions.inc
@@ -336,8 +336,8 @@ if (!function_exists("showMembersFromList")) {
         foreach ($list as $member) { if ($member['name'] !== "unknown" && $member['name'] !== "fusion") {
             echo('<a href="/' . $member['name'] . '" style="text-decoration:none !important;filter:none !important;"><div class="hpd-item-card" style="background-color:rgba(255, 255, 255, .1);border:1px solid ' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';outline-color:' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';border-radius:10px;text-align:center;display:flex;align-items:center;justify-content:center;padding:5px;' . (isset($member["equestria"]) && $member["equestria"] ? 'opacity:.5;' : '') . '"><div>
 <img alt="" src="' . getAsset($member["system"], $member["id"]) . '" style="border-radius:999px;background-color:rgba(0, 0, 0, .25);height:48px;width:48px;display:block;margin-left:auto;margin-right:auto;">
-<div style="text-decoration:none;color:white;margin-top:5px;">' . ($member['display_name'] ?? $member['name']) . '</div>
-<div style="text-decoration:none !important;color:black !important;"><code style="text-decoration:none !important;color:white !important;">' . (isset($member['travelling']) && $member['travelling'] ? "+" . ($member['proxy_tags'][0]['prefix'] ?? "&nbsp;") : ($member['proxy_tags'][0]['prefix'] ?? "&nbsp;")) . '</code></div>
+<div style="text-decoration:none;color:white;margin-top:5px;" class="member-card-name">' . ($member['display_name'] ?? $member['name']) . '</div>
+<div style="text-decoration:none !important;color:black !important;" class="member-card-prefix"><code style="text-decoration:none !important;color:white;">' . (isset($member['travelling']) && $member['travelling'] ? "+" . ($member['proxy_tags'][0]['prefix'] ?? "&nbsp;") : ($member['proxy_tags'][0]['prefix'] ?? "&nbsp;")) . '</code></div>
 </div></div></a>');
         }}
     }
diff --git a/includes/util/homepage.inc b/includes/util/homepage.inc
index 3f4520d..1846cba 100644
--- a/includes/util/homepage.inc
+++ b/includes/util/homepage.inc
@@ -19,7 +19,7 @@ function newHomepage($id, $page, $title) {
 
         <div class="new-homepage-system-list" id="new-homepage-system-<?= $id ?>-list">
             <?php $list = array_values(scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/" . $id . "/members.json"), true), $id), $id)); foreach ($list as $index => $member): ?>
-            <a href="/<?= $member["name"] ?>" class="new-homepage-link <?= $index === count($list) - 1 ? "new-homepage-link-last" : "" ?>" style="color: white !important; text-decoration: none !important; display: block; background-color: #<?= $member["color"] ?>22; padding: 5px 10px;">
+            <a href="/<?= $member["name"] ?>" class="new-homepage-link <?= $index === count($list) - 1 ? "new-homepage-link-last" : "" ?>" style="color: white; text-decoration: none !important; display: block; background-color: #<?= $member["color"] ?>22; padding: 5px 10px;">
                 <img src="<?= getAsset(($travelling[$member["id"]]["travelling"] && !$travelling[$member["id"]]["equestria"]) ? ($id === "gdapd" ? "ynmuc" : "gdapd") : $id, $member["id"]) ?>" style="width: 32px; height: 32px; vertical-align: middle; background-color: rgba(0, 0, 0, .25); border-radius: 999px;">
                 <span style="width: calc(100% - 37px); vertical-align: middle; margin-left: 5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $member["display_name"] ?? $member["name"] ?></span>
                 <span style="vertical-align: middle; float:right;">
diff --git a/pages/home.inc b/pages/home.inc
index 8ea2879..18acaea 100644
--- a/pages/home.inc
+++ b/pages/home.inc
@@ -17,7 +17,7 @@ function banner() { global $isLoggedIn; global $isLowerLoggedIn; $byColor = getM
                 <span style="display: inline-block;background: transparent;position:absolute;width: 0;height: 0;margin-top: 17px;box-shadow: 0 6px 20px 20px #<?= $member["color"] ?>;z-index: 9;margin-left: 8px;opacity: .75;"></span>
                 </div><?php endforeach; ?>
         </div>
-        <div style="padding:5px 10px;background:#3332328a;position:relative;z-index: 999;backdrop-filter: blur(30px);">
+        <div id="banner-lower" style="padding:5px 10px;background:#3332328a;position:relative;z-index: 999;backdrop-filter: blur(30px);">
             <h2 style="margin-top: 20px;">Cold Haze</h2>
             <?php if ($isLoggedIn || $isLowerLoggedIn): ?>
                 <p><?= count($byColor) ?> ponies in 3 plural systems</p>
@@ -40,8 +40,8 @@ function members() { global $isLoggedIn; global $isLowerLoggedIn; global $app; ?
     </div>
 
     <div id="hpd-legacy" style="margin-top: 20px; background:rgba(255, 255, 255, .1);border-radius:10px;padding:10px 10px 10px 20px;display:grid;grid-template-columns: 128px 1fr;margin-bottom:10px;">
-        <a style="display:flex;margin: -10px -20px;align-items:center;justify-content:center;text-align:center;padding: 10px 20px;border-radius: 10px;background: #77777755;width: 148px;text-decoration:none;color:white;filter:none !important;" class="hpd-system">
-            <div style="text-align:center;"><img src="/assets/icons/legacy.svg" style="width:64px;"><br>Pony Legacy</div>
+        <a style="display:flex;margin: -10px -20px;align-items:center;justify-content:center;text-align:center;padding: 10px 20px;border-radius: 10px;background: #77777755;width: 148px;text-decoration:none;color:white;filter:none !important;" class="hpd-system home-legacy">
+            <div style="text-align:center;"><img class="home-legacy-icon" src="/assets/icons/legacy.svg" style="width:64px;"><br>Pony Legacy</div>
         </a>
 
         <div style="display:grid;grid-template-columns:repeat(6, 1fr);padding-left:10px;grid-gap:10px;">
@@ -51,10 +51,10 @@ function members() { global $isLoggedIn; global $isLowerLoggedIn; global $app; ?
                 $id = substr($id, 0, -5);
                 $member = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/legacy/" . $id . ".json"), true);
 
-                echo('<a style="text-decoration:none !important;filter:none !important;"><div class="hpd-item-card" style="background-color:rgba(255, 255, 255, .1);border:1px solid ' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';outline-color:' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';border-radius:10px;text-align:center;display:flex;align-items:center;justify-content:center;padding:5px;opacity:5;"><div>
+                echo('<a class="member-card-container" style="text-decoration:none !important;filter:none !important;"><div class="hpd-item-card" style="background-color:rgba(255, 255, 255, .1);border:1px solid ' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';outline-color:' . (isset($member['color']) ? "#" . $member['color'] . "55" : "transparent") . ';border-radius:10px;text-align:center;display:flex;align-items:center;justify-content:center;padding:5px;opacity:5;"><div>
 <img alt="" src="' . $member["avatar"] . '" style="border-radius:999px;background-color:rgba(0, 0, 0, .25);height:48px;display:block;margin-left:auto;margin-right:auto;">
-<div style="text-decoration:none;color:white;margin-top:5px;">' . ($member['name'] ?? $id) . '</div>
-<div style="text-decoration:none !important;color:white !important;">' . (isset($member['prefix']) ? "<code style='color:white;'>" . $member['prefix'] . "</code> · " : "") . date('j M Y', strtotime($member["date"])) . '</div>
+<div class="member-card-name" style="text-decoration:none;color:white;margin-top:5px;">' . ($member['name'] ?? $id) . '</div>
+<div class="member-card-prefix" style="text-decoration:none !important;color:white;">' . (isset($member['prefix']) ? "<code style='color:white;'>" . $member['prefix'] . "</code> · " : "") . date('j M Y', strtotime($member["date"])) . '</div>
 </div></div></a>');
 
             endforeach; ?>
@@ -85,6 +85,7 @@ function members() { global $isLoggedIn; global $isLowerLoggedIn; global $app; ?
 
     <?php
 
+    //file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/home.json", "{}");
     $cache = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/home.json"), true);
     if (!isset($cache["banner"])) $cache["banner"] = [];
     if (!isset($cache["members"])) $cache["members"] = [];
@@ -156,7 +157,7 @@ function members() { global $isLoggedIn; global $isLowerLoggedIn; global $app; ?
     }
 
     ?>
-    <div style="background: #3332328a;padding: 5px 10px;border-top:1px solid rgba(255,255,255,.1);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
+    <div id="timeline-container" style="background: #3332328a;padding: 5px 10px;border-top:1px solid rgba(255,255,255,.1);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
         <div id="timeline"></div>
         <script>
             async function refreshTimeline() {