btclock/OrangeBTClock
3
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Add favicon and logo

Browse source
This commit is contained in:
Djuri 2024-03-19 01:34:21 +01:00
parent bd12ce4362
commit 2e9164fc8f
11 changed files with 176 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app.html
View file

@ -3,6 +3,42 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="/assets/favicon/favicon.icon"
type="image/x-icon"
rel="icon"
media="(prefers-color-scheme: light)"
/>
<link
href="/assets/favicon-dark/favicon.ico"
type="image/x-icon"
rel="icon"
media="(prefers-color-scheme: dark)"
/>
<link
href="/assets/favicon/favicon.png"
type="image/png"
rel="icon"
media="(prefers-color-scheme: light)"
/>
<link
href="/assets/favicon-dark/favicon.png"
type="image/png"
rel="icon"
media="(prefers-color-scheme: dark)"
/>
<link
href="/assets/favicon/favicon.svg"
type="image/svg+xml"
rel="icon"
media="(prefers-color-scheme: light)"
/>
<link
href="/assets/favicon-dark/favicon.svg"
type="image/svg+xml"
rel="icon"
media="(prefers-color-scheme: dark)"
/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

56
src/lib/style/app.scss
View file

@ -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 */
}
}

5
src/routes/+layout.svelte
View file

@ -51,7 +51,10 @@
</script>
<Navbar expand="md">
<NavbarBrand>OrangeBTClock</NavbarBrand>
<NavbarBrand>
<img src="/assets/logo-dark.svg" alt="OrangeClock" class="darkModeLogo" />
<img src="/assets/logo.svg" alt="OrangeClock" class="lightModeLogo" />
</NavbarBrand>
<Collapse navbar expand="md">
<Nav class="me-auto" navbar>
<NavItem>