Update CSS according personal website

app/FileAndDir.php

@@ -67,7 +67,8 @@ class FileAndDir {
      */
     public function makeBreadcrumb(): string {
         if ($this->requestedDir !== '' && $this->requestedDir !== 'photos') {
-            $breadcrumb_navigation = '<a href="?dir=">Home</a> > ';
+            $breadcrumb_navigation = '<ul>
+            <li><a href="?dir=">Home</a></li>';
 
             $navitems = explode("/", htmlspecialchars($this->requestedDir));
             $path = '';
@@ -78,13 +79,13 @@ class FileAndDir {
                 $path .= $item;
 
                 if ($index === count($navitems) - 1) {
-                    $breadcrumb_navigation .= htmlspecialchars($item);
+                    $breadcrumb_navigation .= '<li>'.htmlspecialchars($item).'</li>';
                 } else {
-                    $breadcrumb_navigation .= '<a href="?dir=/' . htmlspecialchars($path) . '">' . htmlspecialchars($item) . '</a> > ';
+                    $breadcrumb_navigation .= '<li><a href="?dir=/' . htmlspecialchars($path) . '">' . htmlspecialchars($item) . '</a></li>';
                     $path .= '/';
                 }
             }
-            return $breadcrumb_navigation;
+            return $breadcrumb_navigation.'</ul>';
         } else {
             return '';
         }

public/templates/default/default.css

@@ -1,13 +1,3 @@
-[data-theme="dark"] {
-    --background-color: #171414;
-    --text-color: #fffbfb;
-}
-
-[data-theme="light"] {
-    --background-color: #fffbfb;
-    --text-color: #171414;
-}
-
 * {
     box-sizing: border-box;
 }
@@ -17,11 +7,8 @@ html {
 }
 
 body {
-    background: var(--background-color);
-    color: var(--text-color);
     width: 80vw;
     margin: 0 auto;
-    min-height: 100vh;
     min-height: 100dvh;
     text-rendering: optimizeSpeed;
     font-size: var(--font-size);
@@ -29,6 +16,8 @@ body {
 }
 
 header {
+    background-color: transparent;
+
     h1 {
         font-size: calc(var(--font-size) * 1.6);
         margin: 0;
@@ -37,6 +26,7 @@ header {
     h1 a {
         color: var(--primary);
         text-decoration: underline transparent;
+        text-decoration-thickness: var(--default-space);
         transition: 0.4s;
     }
 
@@ -45,6 +35,7 @@ header {
         text-decoration: underline var(--primary);
         text-decoration-thickness: var(--default-space);
     }
+}
 
 nav {
     width: 100%;
@@ -52,18 +43,51 @@ header {
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
+    padding: 0;
+}
 
-        ul {
+nav ul {
+    display: flex;
+    gap: calc(var(--default-space) * 2);
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+
+    a {
+        color: var(--primary-lighten);
+        font-weight: normal;
+        padding: 0;
+    }
+}
+
+nav li {
+    margin: var(--default-space);
+    list-style: none;
     font-size: calc(var(--font-size) * 1.2);
 }
-    }
+
+.breadcrumb {
+    li {
+        margin: auto 0;
     }
 
-/**/
+    & li:not(:last-child)::after {
+        content: " > ";
+    }
+
+    ul {
+        gap: 0;
+    }
+}
 
 #toggleDarkMode {
     fill: var(--primary);
-    height: calc(var(--font-size) * 1.6);
+    height: var(--font-size);
+    transition: 0.4s;
+}
+
+#toggleDarkMode:hover {
+    fill: var(--primary-lighten);
 }
 
 a {
@@ -71,6 +95,7 @@ a {
     font-weight: bold;
     text-decoration: none;
     text-decoration: underline transparent;
+    text-decoration-thickness: var(--default-space);
     transition: 0.4s;
 }
 
@@ -96,13 +121,6 @@ a:not(.card-content):hover {
     stroke: #000 !important;
 }
 
-body>header {
-    background-color: transparent;
-    color: var(--header-text-color);
-    padding: 0 .5em;
-}
-
-.breadcrumb,
 aside {
     color: var(--light-text-color);
     background-color: var(--light-background-color);
@@ -151,11 +169,18 @@ aside * {
     margin: .2em 0;
 }
 
-main {
+section {
     display: flex;
     flex-wrap: wrap;
-    gap: .5em;
+    justify-content: space-around;
-    justify-content: center;
+    gap: var(--default-space);
+    color: var(--light-text-color);
+    background-color: var(--light-background-color);
+    padding: calc(var(--default-space) * 2);
+    border: 1px solid var(--background-color-darken);
+    border-radius: calc(var(--default-space) * 1.2);
+    margin: calc(var(--default-space) *5) 0;
+    box-shadow: var(--box-shadow-light);
 }
 
 article {

public/templates/default/default.php

@@ -39,8 +39,8 @@ use App\FileAndDir;
 	<?= $userCss; ?>
 </head>
 
-<body>
+<body id="top">
-	<header id="top">
+	<header>
 		<nav>
 			<h1>
 				<svg class="logo" viewBox="0 0 135.467 135.467" xmlns="http://www.w3.org/2000/svg">
@@ -65,7 +65,7 @@ use App\FileAndDir;
 			</h1>
 
 			<ul>
-				<li><a href="">Site</a></li>
+				<li><a href="<?= $config['website']; ?>">Site</a></li>
 			</ul>
 			<ul>
 				<li><a href="#" onclick="switchTheme();"><svg version="1.1" id="toggleDarkMode" viewBox="0 0 512 512">
@@ -81,7 +81,7 @@ use App\FileAndDir;
 			</ul>
 		</nav>
 	</header>
-
+	<main>
 		<section>
 			<?php if ($breadcrumb_navigation): ?>
 				<nav aria-label="breadcrumb" class="breadcrumb">
@@ -101,7 +101,7 @@ use App\FileAndDir;
 			<?php endif; ?>
 		</section>
 
-	<main>
+		<section>
 			<?php foreach ($listDir as $value) : ?>
 				<?php foreach ($value as $entry) : ?>
 					<article>
@@ -115,6 +115,7 @@ use App\FileAndDir;
 					</article>
 				<?php endforeach; ?>
 			<?php endforeach; ?>
+		</section>
 	</main>
 
 	<a href="#top" id="backtop">Top</a>