From 854d3ccd2f70dbbf53ba15f7e864332bed419c87 Mon Sep 17 00:00:00 2001 From: Knah Tsaeb Date: Fri, 20 Dec 2024 17:25:29 +0100 Subject: [PATCH] Update theme according personal website --- public/templates/default/default.css | 178 +++++++++++---------------- public/templates/default/default.php | 82 +++++++----- 2 files changed, 121 insertions(+), 139 deletions(-) diff --git a/public/templates/default/default.css b/public/templates/default/default.css index a0bed0b..7c16d32 100644 --- a/public/templates/default/default.css +++ b/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; - font-family: Helvetica, Arial, sans-serif; - margin: 0; - padding: 0; - position: relative; - width: 100%; + width: 80vw; + 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; + } + + 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); -} - -h1 { - font-style: italic; - font-family: Georgia, Lucida, serif; - margin: 0; - padding: 0; -} - -h1 a { - color: var(--h1-color); + text-decoration: underline var(--primary); + text-decoration-thickness: var(--default-space); } #logo-border-color { @@ -130,23 +85,32 @@ h1 a { stroke: none !important; } -.logo { - height: 3em; - vertical-align: middle; - stroke: var(--header-text-color) !important; +#logo-background-color { + fill: #fff; + stroke: none; } -#dark-mode { - position: absolute; - right: 1em; - top: 1em; +.logo { + height: 120px; + vertical-align: middle; + 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; diff --git a/public/templates/default/default.php b/public/templates/default/default.php index 2b6fb1f..719edf3 100644 --- a/public/templates/default/default.php +++ b/public/templates/default/default.php @@ -18,6 +18,7 @@ use App\FileAndDir; + @@ -40,44 +41,65 @@ use App\FileAndDir;
-

-

+ -

- - Dark/Light mode icon - - - +
+ +
+ + + + + +
-
- -
+
- +