i don't render what this changed this might be a terrible idea

dashboard.php

@@ -11,23 +11,33 @@ if (!$_SESSION['auth']) {
     exit;
 }
 
-$doc_title = get_display_name($user['id']) . "'s Dashboard" ;
+?>
 
-$output = $output .
-    "<link rel='stylesheet' href='/styles/settings.css' />
+<link rel='stylesheet' href='/styles/settings.css' />
 
-<div id=\"settings_split\">
-    <div id=\"mini_profile\" class=\"left\">
-        <div class=\"image_container\" data-backgroundcolour=\"white\">
-            <img src='" . get_avatar_url($user['id']) . "' />
+<div id="settings_split">
+    <div id="mini_profile" class="left">
+        <div class="image_container" data-backgroundcolour="white">
+            <img src='<?= get_avatar_url($user['id']) ?>' />
         </div>
-        <div class=\"texts\">
-            <span class=\"displayname\">" . htmlspecialchars(get_display_name($user['id'], false)) . "</span>
-            <span class=\"id bcid\">" .  format_bcid($user['id']) . "</span>
+        <div class="texts">
+            <span class="displayname"><?= htmlspecialchars(get_display_name($user['id'], false)) ?></span>
+            <span class="id bcid"><?= format_bcid($user['id']) ?></span>
         </div>
     </div>
-    <div class='right'>
-        <h1>". htmlspecialchars(get_display_name($user['id'], false)) ."'s Dashboard</h1>
+    <div class='right tiles'>
+        <a href="/settings" class="tile double-height">
+            <div class="wrapper"> <!-- SUPERIMPORTANTBECAUSE IM BAD AT CSS -->
+                <span class="fa-solid fa-cog icon"></span>
+                <span class="text">Settings</span>
+            </div>
+
+        </a>
+        <a href="/profile" class="tile">
+            <div class="wrapper"> <!-- SUPERIMPORTANTBECAUSE IM BAD AT CSS -->
+                <span class="fa-solid fa-id-card-clip icon"></span>
+                <span class="text">Profile</span>
+            </div>
+        </a>
     </div>
 </div>
-";

index.php

@@ -124,7 +124,7 @@ $paths = array(
     "/admin/purge" => ["admin_purge.php"],
 
     // Settings
-    "/dashboard" => ["dashboard.php", "Dashboard", true],
+    "/dashboard" => ["dashboard.php", "Dashboard"],
     "/settings" => ["settings.php", "Settings"],
 
     "/account" => ["account.php", "Your account"],

styles/colours.css

@@ -30,6 +30,8 @@
     --foreground: black;
     --foreground-dark: white;
 
+    --chip-background: var(--grey-0);
+
     color-scheme: light dark;
 }
 
@@ -114,6 +116,8 @@ input[data-com-onepassword-filled="dark"] {
         --background: #121212;
         --foreground: white;
 
+        --chip-background: var(--grey-9);
+
         color-scheme: light dark;
     }
 

styles/settings.css

@@ -1,8 +1,12 @@
 
+main {
+    display: flex;
+}
+
 #settings_split {
     display: grid;
-
-    grid-template-columns: 1fr 4fr;
+    grid-template-columns: 1fr 3fr;
+    gap: 1rem;
 }
 
 #mini_profile {
@@ -11,17 +15,20 @@
 
     border-radius: 1.5rem;
     overflow: clip;
+
+    padding-bottom: 1.5rem;
+
+    background: var(--background);
 }
 
 #mini_profile .image_container {
     display: flex;
-    background: linear-gradient(to bottom, white, var(--background) 90%);
+    background: linear-gradient(to bottom, white, var(--background) 95%);
 }
 
 #mini_profile .image_container img {
     width: 50%;
-    margin: 0.5rem auto auto;
-    padding-top: 0.5rem;
+    margin: 0.5rem auto 0.5rem;
     border-radius: 1rem;
 }
 
@@ -29,8 +36,6 @@
     text-align: center;
     display: flex;
     flex-direction: column;
-
-    padding-top: 1rem;
 }
 
 #mini_profile .texts .displayname {
@@ -67,3 +72,69 @@
 #settings_list li > a:hover {
     color: var(--flax)
 }
+
+.tiles {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 150px;
+    grid-auto-flow: dense;
+}
+
+.tiles .tile {
+    background: #343a40;
+    text-align: center;
+    display: flex;
+    text-decoration: none;
+
+    font-size: 1.2rem;
+    font-weight: 500;
+
+    border-radius: 1.5rem;
+
+    transition: scale 0.2s ease-in-out;
+}
+
+.tiles .tile:hover {
+    scale: 1.05;
+}
+
+.tiles .tile div {
+    margin: auto;
+}
+
+.tiles .tile span {
+    display: block;
+}
+
+.tile.double-height {
+    grid-row: span 2;
+}
+
+@media screen and (max-width: 960px) {
+    #settings_split {
+        grid-template-columns: none;
+    }
+
+    #mini_profile {
+        flex-direction: row;
+        padding-bottom: 0;
+    }
+
+    #mini_profile .image_container {
+        width: 40%;
+        background: linear-gradient(to right, white, var(--chip-background) 95%);
+    }
+
+    #mini_profile .image_container img {
+        margin: 1rem;
+        border-radius: 1rem;
+    }
+
+    #mini_profile .texts {
+        flex: 1;
+        margin: auto auto auto 0;
+        text-align: left;
+    }
+}
+

styles/types.css

@@ -1,6 +1,6 @@
 /* This file deals with font types and font families. */
 
-@import url(https://fonts.bunny.net/css?family=montserrat:400,400i,600,600i,700,700i,900,900i);
+@import url(https://fonts.bunny.net/css?family=montserrat:400,400i,500,600,600i,700,700i,900,900i);
 @import url(https://fonts.bunny.net/css2?family=Space+Mono:wght@400;700&display=swap); /* for BCIDs */
 
 @import url(/fontawesome/css/all.css);