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 = 'Home > ';
+ $breadcrumb_navigation = '
+ - Home
';
$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 .= '- '.htmlspecialchars($item).'
';
} else {
- $breadcrumb_navigation .= '' . htmlspecialchars($item) . ' > ';
+ $breadcrumb_navigation .= '- ' . htmlspecialchars($item) . '
';
$path .= '/';
}
}
- return $breadcrumb_navigation;
+ return $breadcrumb_navigation.'
';
} 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; ?>
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
- = $messages; ?>
-
-
-
-
-
-
-
-
-
-
-
- = $entry['imgCaption']; ?>
-
+
+
+
+
+
+
+
+
+
+
+ = $messages; ?>
+
+
+
+
+
+
+
+
+
+
+
+
+ = $entry['imgCaption']; ?>
+
+
-
+
Top