From 3745cf1f03c9553e90926267efe33dc0c8b30441 Mon Sep 17 00:00:00 2001
From: Knah Tsaeb <Knah-Tsaeb_nanogal@knah-tsaeb.org>
Date: Tue, 31 Dec 2024 12:17:43 +0100
Subject: [PATCH] Update CSS according personal website
---
app/FileAndDir.php | 9 +--
public/templates/default/default.css | 93 ++++++++++++++++++----------
public/templates/default/default.php | 89 +++++++++++++-------------
3 files changed, 109 insertions(+), 82 deletions(-)
diff --git a/app/FileAndDir.php b/app/FileAndDir.php
index b6e0e41..cd24b09 100644
--- a/app/FileAndDir.php
+++ b/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 '';
}
diff --git a/public/templates/default/default.css b/public/templates/default/default.css
index 7c16d32..75d92bb 100644
--- a/public/templates/default/default.css
+++ b/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,25 +35,59 @@ header {
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;
+nav {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 0;
+}
- ul {
- font-size: calc(var(--font-size) * 1.2);
- }
+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: center;
+ justify-content: space-around;
+ 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 {
diff --git a/public/templates/default/default.php b/public/templates/default/default.php
index 719edf3..389cf06 100644
--- a/public/templates/default/default.php
+++ b/public/templates/default/default.php
@@ -39,8 +39,8 @@ use App\FileAndDir;
<?= $userCss; ?>
</head>
-<body>
- <header id="top">
+<body id="top">
+ <header>
<nav>
<h1>
<svg class="logo" viewBox="0 0 135.467 135.467" xmlns="http://www.w3.org/2000/svg">
@@ -65,56 +65,57 @@ 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">
- <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>
+ <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">
- <?= $messages; ?>
- </div>
- <?php endif; ?>
- </section>
-
<main>
- <?php foreach ($listDir as $value) : ?>
- <?php foreach ($value as $entry) : ?>
- <article>
- <a href="<?= $entry['link']; ?>" class="<?= FileAndDir::addToLightBox($entry['type']); ?> card-content" data-gallery="gallery" data-glightbox="<?= $entry['dataAttr']; ?>">
- <img src="<?= $entry['thumb']; ?>" loading="lazy" alt="" width="<?= $config['thumbSize']; ?>" height="<?= $config['thumbSize']; ?>">
- </a>
- <p class="card-footer">
- <?= $entry['name']; ?>
- </p>
- <?= $entry['imgCaption']; ?>
- </article>
+ <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">
+ <?= $messages; ?>
+ </div>
+ <?php endif; ?>
+ </section>
+
+ <section>
+ <?php foreach ($listDir as $value) : ?>
+ <?php foreach ($value as $entry) : ?>
+ <article>
+ <a href="<?= $entry['link']; ?>" class="<?= FileAndDir::addToLightBox($entry['type']); ?> card-content" data-gallery="gallery" data-glightbox="<?= $entry['dataAttr']; ?>">
+ <img src="<?= $entry['thumb']; ?>" loading="lazy" alt="" width="<?= $config['thumbSize']; ?>" height="<?= $config['thumbSize']; ?>">
+ </a>
+ <p class="card-footer">
+ <?= $entry['name']; ?>
+ </p>
+ <?= $entry['imgCaption']; ?>
+ </article>
+ <?php endforeach; ?>
<?php endforeach; ?>
- <?php endforeach; ?>
+ </section>
</main>
<a href="#top" id="backtop">Top</a>