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 = ''; } 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; - -
+ +
- -
- - - - - - - - -
- -
- -
-
- - - +
+ + + + + + + + +
+ +
+ +
+ +
+ + + + - +
Top