From d80866d43440e846357851ad5b883705831d34f1 Mon Sep 17 00:00:00 2001 From: WinsDominoes Date: Thu, 9 May 2024 18:36:18 +0700 Subject: [PATCH] update styles --- assets/css/style.css | 36 ++++++++++++++++++++++++++++++++---- index.html | 15 +++++++++++++++ test.html | 17 +++++++++++++++++ 3 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 test.html diff --git a/assets/css/style.css b/assets/css/style.css index 858624d..2307263 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -13,9 +13,9 @@ --light-nav-darker-shade-color: rgba(0, 0, 0, 0.12); --light-card-bg-color: #ffffff; --light-card-fg-color: rgba(0, 0, 0, 0.8); - --light-card-shade-color: rgba(0, 0, 0, 0.07); + --light-card-shade-color: rgba(0, 0, 0, 0.20); - --dark-bg: #242424; + --dark-bg-color: #242424; --dark-fg-color: #ffffff; --dark-nav-bg-color: #303030; --dark-nav-fg-color: #ffffff; @@ -34,7 +34,6 @@ } * { - background-color: light-dark(var(--light-bg-color), var(--dark-bg-color)); color: light-dark(var(--light-fg-color), var(--dark-fg-color)); } @@ -49,6 +48,8 @@ html, body { padding: 0; box-sizing: border-box; + + background-color: light-dark(var(--light-bg-color), var(--dark-bg-color)); } h1, h2, h3, h4, h5, h6, p { @@ -81,6 +82,7 @@ header { width: 100%; height: 50px; display: flex; + background-color: light-dark(var(--light-bg-color), var(--dark-bg-color)); box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color)); align-items: center; } @@ -145,6 +147,7 @@ header { align-items: center; justify-content: center; text-align: center; + row-gap: 1rem; padding: 10px; } @@ -165,7 +168,7 @@ header { } .main-apps > #heading { - margin: 2rem 0 2rem 0; + margin: 2rem 0 1rem 0; } .app-grid { @@ -223,6 +226,25 @@ header { border-radius: 0.75rem; } +footer { + background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color)); + text-align: center; + margin-top: 1rem; + padding: 1rem 0; +} + +footer > .info { + display: flex; +} + +footer > .info a:hover { + text-decoration: underline; +} + +footer > .info > span { + flex: auto; +} + /* Screens smaller than 480 pixels */ @media (max-width: 420px) { .nav { @@ -300,4 +322,10 @@ header { max-width: 100%; height: 64px; } + + footer > .info { + display: flex; + flex-direction: column; + row-gap: 0.5rem; + } } \ No newline at end of file diff --git a/index.html b/index.html index 0d5879d..941d00b 100644 --- a/index.html +++ b/index.html @@ -123,7 +123,22 @@ \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..867c17c --- /dev/null +++ b/test.html @@ -0,0 +1,17 @@ + + + + + + Document + + + + + + + \ No newline at end of file