From 2e9164fc8f2756ef55520978cf70214bde17364d Mon Sep 17 00:00:00 2001 From: Djuri Baars Date: Tue, 19 Mar 2024 01:34:21 +0100 Subject: [PATCH] Add favicon and logo --- src/app.html | 36 ++++++++++++++++ src/lib/style/app.scss | 56 ++++++++++++++++++++++--- src/routes/+layout.svelte | 5 ++- static/assets/favicon-dark/favicon.ico | Bin 0 -> 4286 bytes static/assets/favicon-dark/favicon.png | Bin 0 -> 1047 bytes static/assets/favicon-dark/favicon.svg | 16 +++++++ static/assets/favicon/favicon.ico | Bin 0 -> 4286 bytes static/assets/favicon/favicon.png | Bin 0 -> 996 bytes static/assets/favicon/favicon.svg | 16 +++++++ static/assets/logo-dark.svg | 27 ++++++++++++ static/assets/logo.svg | 27 ++++++++++++ 11 files changed, 176 insertions(+), 7 deletions(-) create mode 100644 static/assets/favicon-dark/favicon.ico create mode 100644 static/assets/favicon-dark/favicon.png create mode 100644 static/assets/favicon-dark/favicon.svg create mode 100644 static/assets/favicon/favicon.ico create mode 100644 static/assets/favicon/favicon.png create mode 100644 static/assets/favicon/favicon.svg create mode 100644 static/assets/logo-dark.svg create mode 100644 static/assets/logo.svg diff --git a/src/app.html b/src/app.html index f273cc5..5c2cc5b 100644 --- a/src/app.html +++ b/src/app.html @@ -3,6 +3,42 @@ + + + + + + %sveltekit.head% diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss index 657ce7f..4953b3b 100644 --- a/src/lib/style/app.scss +++ b/src/lib/style/app.scss @@ -95,9 +95,12 @@ nav { #screen-wrapper { margin: 0 auto; display: flex; - width: 75%; /* Container takes up full width */ - max-width: 75%; /* Ensure it doesn't exceed the available width */ - position: relative; /* Establishes the containing block for absolute positioning */ + width: 75%; + /* Container takes up full width */ + max-width: 75%; + /* Ensure it doesn't exceed the available width */ + position: relative; + /* Establishes the containing block for absolute positioning */ // background-color: lightgray; /* Optional: Just for visualization */ } @@ -105,13 +108,16 @@ nav { // padding-top: calc(122 / 250 * 100%); /* Aspect ratio: height / width * 100% */ // position: relative; // width: 100%; /* Ensure the wrapper takes up full width */ - padding-top: calc(122 / 250 * 100%); /* Aspect ratio: height / width * 100% */ + padding-top: calc(122 / 250 * 100%); + /* Aspect ratio: height / width * 100% */ position: relative; - width: 100%; /* Ensure the wrapper takes up full width */ + width: 100%; + /* Ensure the wrapper takes up full width */ } .oc-screen { - position: absolute; /* Position content absolutely within the wrapper */ + position: absolute; + /* Position content absolutely within the wrapper */ top: 0; left: 0; right: 0; @@ -136,6 +142,7 @@ nav { // align-content: center; font-family: 'Libre Franklin'; font-weight: 600; + .oc-row .icon { display: inline-block; font-weight: normal; @@ -177,6 +184,7 @@ nav { #customText { text-transform: uppercase; } + .system_info { padding: 0; @@ -189,7 +197,43 @@ nav { margin-bottom: 0; } +.navbar { + // display: flex; + // align-items: center; + // height: 60px; +} + +@include color-mode(light) { + .darkModeLogo { + display: none; + } +} + +@include color-mode(dark) { + .lightModeLogo { + display: none; + } +} + .navbar-brand { font-style: italic; font-weight: 600; + + img { + max-height: $navbar-brand-height; + // position: absolute; + // top: 50%; + // transform: translateY(-50%); + // max-height: calc(100% - 1rem); /* Adjust the padding as per your navbar */ + // max-width: calc(100% - 3rem); /* Adjust the padding as per your navbar */ + // max-height: 100%; + // max-width: 100%; + // height: auto; + // width: auto; + } + + .navbar-nav { + margin-left: auto; + /* Push the navbar items to the right */ + } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e84ee6c..7768e5c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,7 +51,10 @@ - OrangeBTClock + + + +