diff --git a/dashboard.php b/dashboard.php index b5e630e..e6d23f7 100644 --- a/dashboard.php +++ b/dashboard.php @@ -11,23 +11,33 @@ if (!$_SESSION['auth']) { exit; } -$doc_title = get_display_name($user['id']) . "'s Dashboard" ; +?> -$output = $output . - " + -
-
-
- +
+
+
+ ' />
-
- " . htmlspecialchars(get_display_name($user['id'], false)) . " - " . format_bcid($user['id']) . " +
+ +
-
-

". htmlspecialchars(get_display_name($user['id'], false)) ."'s Dashboard

+
-"; diff --git a/index.php b/index.php index dee8e31..90a06e1 100755 --- a/index.php +++ b/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"], diff --git a/styles/colours.css b/styles/colours.css index aac47e3..fe71ae5 100644 --- a/styles/colours.css +++ b/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; } diff --git a/styles/settings.css b/styles/settings.css index 86ad52f..95d424e 100644 --- a/styles/settings.css +++ b/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; + } +} + diff --git a/styles/types.css b/styles/types.css index 2fec09e..26b27af 100644 --- a/styles/types.css +++ b/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);