janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Early dark mode support

Browse Source
This commit is contained in:
Admin
2025-02-17 15:19:56 +01:00
parent ac51699689
commit b393b3cc55
6 changed files with 120 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
site/src/css/colors.css Normal file
View File

@@ -0,0 +1,15 @@
#theme-switcher-icon {
font-size: 1rem;
margin-right: 5px;
}
.theme-selector {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.slider-controls {
background-color: var( --color-background-accent ) !important;
}

17
site/src/css/footer.css
View File

@@ -1,6 +1,6 @@
footer {
border-top: solid black 1px;
background-color: rgb(226, 226, 226);
background-color: var( --color-background-accent );
width: 100vw;
margin-top: 40px;
}
@@ -32,14 +32,14 @@ footer .logo {
}
.footer-category a {
color: black;
color: var( --color-text-primary );
text-decoration: none;
transition: all 0.5s;
font-size: 1rem;
}
.footer-category a:hover {
color: rgb(21, 43, 92);
color: var( --color-button-hover );
font-size: 1.1rem;
}
@@ -54,7 +54,7 @@ footer .logo {
width: 300px;
height: 400px;
position: fixed;
background-color: rgb(193, 193, 223);
background-color: var( --color-background-analytics );
border-radius: 20px;
padding: 10px;
text-align: center;
@@ -70,6 +70,7 @@ footer .logo {
}
.analytics-button {
color: var( --color-text-primary );
position: absolute;
top: 10px;
right: 10px;
@@ -79,12 +80,16 @@ footer .logo {
cursor: pointer;
}
#matomo-opt-out {
color: var( --color-text-primary ) !important;
}
.analytics-notice .small-symbol {
position: fixed;
bottom: -3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgb(193, 193, 223);
background-color: var( --color-background-analytics );
border: solid black 1px;
cursor: pointer;
transition: all 1s;
@@ -100,4 +105,4 @@ footer .logo {
.analytics-notice.show .small-symbol {
bottom: -100px;
transition-delay: 0s;
}
}

20
site/src/css/nav.css
View File

@@ -23,7 +23,7 @@ nav {
nav a {
/* TODO: Update colours */
color: black;
color: var( --color-text-primary );
text-decoration: none;
}
@@ -48,7 +48,7 @@ nav a {
display: flex;
flex-direction: column;
z-index: 100;
background-color: rgb(226, 226, 226);
background-color: var( --color-background-accent );
transition: all 0.5s;
}
@@ -58,7 +58,7 @@ nav a {
left: 0;
width: 100vw;
height: 20vh;
background-color: rgb(226, 226, 226);
background-color: var( --color-background-accent );
display: flex;
align-items: center;
z-index: 100;
@@ -102,7 +102,7 @@ nav a {
margin-left: auto;
margin-right: 20px;
text-decoration: none;
color: black;
color: var( --color-text-primary );
font-size: 5vh;
cursor: pointer;
width: 35px;
@@ -118,7 +118,7 @@ nav a {
display: block;
width: 100%;
height: 2px;
background-color: black;
background-color: var( --color-text-primary );
}
#line1 {
@@ -166,7 +166,7 @@ nav a {
flex-direction: row;
top: 0;
left: 0;
border-bottom: black 1px solid;
border-bottom: var( --color-text-primary ) 1px solid;
}
.nav-menu.slide-up {
@@ -183,7 +183,7 @@ nav a {
width: max-content;
transform-origin: top;
transition: transform 0.5s;
background-color: white;
background-color: var( --color-background-primary );
border-radius: 10px;
padding: 15px;
z-index: 2;
@@ -212,7 +212,7 @@ nav a {
.nav-link-header::before, .nav-link-header::after {
opacity: 0;
border: white 15px solid;
border: var( --color-background-primary ) 15px solid;
border-top-color: transparent;
width: 20px;
height: 20px;
@@ -240,7 +240,7 @@ nav a {
}
.nav-link-wrapper:hover .nav-link-header {
background-color: white;
background-color: var( --color-background-primary );
}
.nav-link-wrapper:hover .nav-link-dropdown {
@@ -255,4 +255,4 @@ nav a {
.nav-toggle {
display: none;
}
}
}

47
site/src/css/style.css
View File

@@ -1,9 +1,48 @@
@import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' );
@import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' );
@import url( '/css/nav.css' );
@import url( '/css/colors.css' );
@import url( '/css/footer.css' );
/* Color Theme */
:root, :root.light {
--color-text-primary: black;
--color-text-accent: #303030;
--color-link: rgb(10, 10, 100);
--color-background-primary: white;
--color-background-accent: rgb(226, 226, 226);
--color-background-analytics: rgb(193, 193, 223);
--color-button: rgb(21, 43, 92);
--color-button-hover: rgb(2, 10, 27);
}
:root.dark {
--color-text-primary: white;
--color-text-accent: #b5b5b5;
--color-link: rgb(0, 70, 150);
--color-background-primary: #151515;
--color-background-accent: black;
--color-background-analytics: #303030;
--color-button: rgb(20, 150, 200);
--color-button-hover: rgb(15, 125, 175);
}
@media (prefers-color-scheme: dark) {
:root {
--color-text-primary: white;
--color-text-accent: #b5b5b5;
--color-link: rgb(0, 70, 150);
--color-background-primary: #151515;
--color-background-accent: black;
--color-background-analytics: #303030;
--color-button: rgb(20, 150, 200);
--color-button-hover: rgb(15, 125, 175);
}
}
/*
* MAIN
*/
body {
height: 100%;
width: 100%;
@@ -14,6 +53,8 @@ body {
justify-content: center;
align-items: center;
flex-direction: column;
background-color: var( --color-background-primary );
color: var( --color-text-primary );
}
.material-symbols-outlined {
@@ -39,7 +80,7 @@ body {
.button {
padding: 20px;
background-color: rgb(21, 43, 92);
background-color: var( --color-button );
color: white;
text-decoration: none;
border-radius: 10px;
@@ -48,13 +89,13 @@ body {
.button:hover {
border-radius: 5px;
background-color: rgb(2, 10, 27);
background-color: var( --color-button-hover );
}
.pullquote-lines {
border-color: black;
border-color: var( --color-text-primary );
margin-bottom: 2%;
margin-top: 2%;
width: 100%;

38
site/src/footer.html
View File

@@ -14,6 +14,14 @@
<h3>Info</h3>
<a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a>
<div class="theme-selector">
<span class="material-symbols-outlined" id="theme-switcher-icon">light_mode</span>
<select id="theme-select" onchange="changeTheme()">
<option value="auto">Auto</option>
<option value="light_mode">Light</option>
<option value="dark_mode">Dark</option>
</select>
</div>
</div>
<div class="footer-category">
<h3>Support</h3>
@@ -59,5 +67,35 @@
if ( !localStorage.getItem( 'analytics-dismissed' ) ) {
document.getElementById( 'analytics' ).classList.add( 'show' );
}
// Themeing
let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
var theme = loadedTheme;
let loadTheme = () => {
loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
if ( loadedTheme === 'auto' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
theme = 'dark_mode';
} else {
theme = 'light_mode';
}
}
if ( theme === 'dark_mode' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
document.documentElement.classList.remove( 'dark' );
theme === 'light_mode';
}
}
loadTheme();
document.getElementById( 'theme-select' ).value = loadedTheme;
function changeTheme () {
theme = document.getElementById( 'theme-select' ).value;
localStorage.setItem( 'theme', theme );
loadTheme();
}
</script>
</div>

3
site/src/nav.html
View File

@@ -20,6 +20,7 @@
<a href="/projects/storagemanager">StorageManager</a>
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/conductorcalc">ConductorCalc</a>
</div>
</div>
@@ -102,4 +103,4 @@
} );
// TODO: Hide menu on when scrolling down
</script>
</script>