Update theme according personal website

public/templates/default/default.css

@@ -1,79 +1,3 @@
-:root {
-    color-scheme: dark light;
-
-    --primary: #cc2027;
-    --primary-darken: #8E161B;
-    --primary-lighten: #D64C52;
-    --primary-text-contrast: #FFF;
-
-    --secondary: #20ccc5;
-    --secondary-darken: #168E89;
-    --secondary-lighten: #4CD6D0;
-    --secondary-text-contrast: #000;
-
-    --error: #c43933;
-    --error-darken: #892723;
-    --error-lighten: #CF605B;
-    --error-text-contrast: #FFF;
-
-    --info: #206ccc;
-    --info-darken: #164B8E;
-    --info-lighten: #4C89D6;
-    --info-text-contrast: #FFF;
-
-    --success: #7dcc20;
-    --success-darken: #578E16;
-    --success-lighten: #97D64C;
-    --success-text-contrast: #000;
-
-    --warning: #cc5e20;
-    --warning-darken: #8E4116;
-    --warning-lighten: #D67E4C;
-    --warning-text-contrast: #FFF;
-
-    --divider: light-dark(#B2AFAF, #454343);
-
-    --background-color: light-dark(#fffbfb, #171414);
-    --background-color-darken: light-dark(#B2AFAF, #100E0E);
-    --background-color-lighten: light-dark(#FFFBFB, #454343);
-
-    --light-background-color: #fffbfb;
-    --dark-background-color: #171414;
-
-    --header-background-color: light-dark(#171414, #fffbfb);
-    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
-    --header-background-color-lighten: light-dark(#454343, #FFFBFB);
-
-    --header-text-color: light-dark(#fffbfb, #171414);
-    --header-text-color-secondary: #ffffffb3;
-    --header-text-color-disable: var(--divider);
-
-    --text-color: light-dark(#171414, #fffbfb);
-    --text-color-secondary: #ffffffb3;
-    --text-color-disable: light-dark(#454343, #B2AFAF);
-
-    --light-text-color: #171414;
-    --dark-text-color: #fffbfb;
-
-    --text-color-inverse: light-dark(#fffbfb, #171414);
-    --text-color-secondary-inverse: #ffffffb3;
-    --text-color-disable-inverse: var(--divider);
-
-    --box-shadow-light: .4rem .4rem 0px .1rem #B2AFAF;
-    --box-shadow-dark: .4rem .4rem 0px .1rem #454343;
-    --box-shadow-auto: .4rem .4rem 0px .1rem var(--divider);
-
-    --h1-color: var(--primary);
-    --h2-color: #c33d35;
-    --h3-color: #b94f44;
-    --h4-color: #ae5e52;
-    --h5-color: #a16a61;
-    --h6-color: #927671;
-
-    --font-size: 1.1em;
-    --default-space: .2em;
-}
-
 [data-theme="dark"] {
     --background-color: #171414;
     --text-color: #fffbfb;
@@ -89,40 +13,71 @@
 }
 
 html {
-    font-size: 62.5%;
     scroll-behavior: smooth;
 }
 
 body {
     background: var(--background-color);
     color: var(--text-color);
-    font-size: 1.5rem;
+    width: 80vw;
-    font-family: Helvetica, Arial, sans-serif;
+    margin: 0 auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    text-rendering: optimizeSpeed;
+    font-size: var(--font-size);
+    line-height: 1.5;
+}
+
+header {
+    h1 {
+        font-size: calc(var(--font-size) * 1.6);
         margin: 0;
-    padding: 0;
+    }
-    position: relative;
+
+    h1 a {
+        color: var(--primary);
+        text-decoration: underline transparent;
+        transition: 0.4s;
+    }
+
+    h1 a:hover {
+        color: var(--primary-lighten);
+        text-decoration: underline var(--primary);
+        text-decoration-thickness: var(--default-space);
+    }
+
+    nav {
         width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        ul {
+            font-size: calc(var(--font-size) * 1.2);
+        }
+    }
+}
+
+/**/
+
+#toggleDarkMode {
+    fill: var(--primary);
+    height: calc(var(--font-size) * 1.6);
 }
 
 a {
     color: var(--primary);
     font-weight: bold;
     text-decoration: none;
+    text-decoration: underline transparent;
+    transition: 0.4s;
 }
 
 a:not(.card-content):hover {
     color: var(--primary-lighten);
-}
+    text-decoration: underline var(--primary);
-
+    text-decoration-thickness: var(--default-space);
-h1 {
-    font-style: italic;
-    font-family: Georgia, Lucida, serif;
-    margin: 0;
-    padding: 0;
-}
-
-h1 a {
-    color: var(--h1-color);
 }
 
 #logo-border-color {
@@ -130,23 +85,32 @@ h1 a {
     stroke: none !important;
 }
 
-.logo {
+#logo-background-color {
-    height: 3em;
+    fill: #fff;
-    vertical-align: middle;
+    stroke: none;
-    stroke: var(--header-text-color) !important;
 }
 
-#dark-mode {
+.logo {
-    position: absolute;
+    height: 120px;
-    right: 1em;
+    vertical-align: middle;
-    top: 1em;
+    stroke: #000 !important;
 }
 
 body>header {
-    background-color: var(--header-background-color);
+    background-color: transparent;
     color: var(--header-text-color);
     padding: 0 .5em;
-    margin: 0 0 .5em 0;
+}
+
+.breadcrumb,
+aside {
+    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: 0 0 calc(var(--default-space) *5) 0;
+    box-shadow: var(--box-shadow-light);
 }
 
 main,
@@ -170,10 +134,6 @@ img {
     border: none;
 }
 
-nav {
-    font-size: 2.2rem;
-}
-
 body>nav {
     text-align: center;
 }
@@ -199,7 +159,7 @@ main {
 }
 
 article {
-    background-color: var(--header-background-color);
+    background-color: var(--light-background-color);
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     margin: 0;

public/templates/default/default.php

@@ -18,6 +18,7 @@ use App\FileAndDir;
 	<meta name="msapplication-TileColor" content="#ffffff">
 	<meta name="theme-color" content="#ffffff">
 
+	<link rel="stylesheet" href="https://theme.knah-tsaeb.org/kt-scheme.css">
 	<link href="assets/css/glightbox.min.css" rel="stylesheet">
 	<link href="templates/default/default.css" rel="stylesheet">
 	<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-icon-57x57.png">
@@ -40,8 +41,10 @@ use App\FileAndDir;
 
 <body>
 	<header id="top">
+		<nav>
 			<h1>
 				<svg class="logo" viewBox="0 0 135.467 135.467" xmlns="http://www.w3.org/2000/svg">
+					<rect width="85.486" height="85.339" x="25.225" y="25.302" ry="6.619" id="logo-background-color" />
 					<g transform="translate(-37.267 -74.664)">
 						<path d="M105 110.248l32.15 32.15L105 174.546l-32.15-32.15z" fill="none" stroke-width="2.377" />
 						<path
@@ -60,24 +63,43 @@ use App\FileAndDir;
 					</g>
 				</svg><a href="/"><?= $config['title']; ?></a>
 			</h1>
-		<a href="#" id="dark-mode" onclick="switchTheme();">
+
-			<img height="24" src="/assets/images/moon.svg" alt="Dark/Light mode icon">
+			<ul>
-		</a>
+				<li><a href="">Site</a></li>
+			</ul>
+			<ul>
+				<li><a href="#" onclick="switchTheme();"><svg version="1.1" id="toggleDarkMode" viewBox="0 0 512 512">
+					<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+					<g id="SVGRepo_iconCarrier">
+						<path
+							d="M256,0C114.842,0,0,114.84,0,256s114.842,256,256,256s256-114.84,256-256S397.158,0,256,0z M322.225,451.558 c-20.797,7.062-43.071,10.894-66.225,10.894c-113.837,0-206.452-92.614-206.452-206.452S142.163,49.548,256,49.548 c23.154,0,45.429,3.832,66.226,10.894C266.612,107.439,231.226,177.657,231.226,256S266.612,404.561,322.225,451.558z">
+						</path>
+					</g>
+				</svg>
+			</a></li>
+			</ul>
+		</nav>
+	</header>
+
+	<section>
+		<?php if ($breadcrumb_navigation): ?>
 			<nav aria-label="breadcrumb" class="breadcrumb">
 				<?= $breadcrumb_navigation; ?>
 			</nav>
+		<?php endif; ?>
+		<?php if ($folderNote): ?>
 			<aside>
 				<?= $folderNote; ?>
 			</aside>
+		<?php endif; ?>
 
 		<?php if (!empty($messages)) : ?>
 			<div id="message" class="message">
-				<div>
 				<?= $messages; ?>
 			</div>
-			</div>
 		<?php endif; ?>
-	</header>
+	</section>
 
 	<main>
 		<?php foreach ($listDir as $value) : ?>