From 7fdcdc6557d29678aedf936829f3169e006987b7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 14:07:44 +0200 Subject: Added simple functionality --- src/_footer.html | 5 ++-- src/_header.html | 6 +++- src/img/moon-tabler.svg | 49 ++++++++++++++++++++++++++++++++ src/img/sun-tabler.svg | 55 ++++++++++++++++++++++++++++++++++++ src/scripts/image-show.js | 2 +- src/scripts/theme-changer-preload.js | 4 +++ src/scripts/theme-changer.js | 28 ++++++++++++++++++ src/styles.css | 11 ++++---- 8 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 src/img/moon-tabler.svg create mode 100644 src/img/sun-tabler.svg create mode 100644 src/scripts/theme-changer-preload.js create mode 100644 src/scripts/theme-changer.js (limited to 'src') diff --git a/src/_footer.html b/src/_footer.html index c242d2f..2131175 100644 --- a/src/_footer.html +++ b/src/_footer.html @@ -1,6 +1,6 @@ - ^ + ^ - + + diff --git a/src/_header.html b/src/_header.html index 911b6d5..37a28c5 100644 --- a/src/_header.html +++ b/src/_header.html @@ -11,6 +11,7 @@ + @@ -30,10 +31,13 @@ Courses Blog || - + About Contact + + Light +
diff --git a/src/img/moon-tabler.svg b/src/img/moon-tabler.svg new file mode 100644 index 0000000..376f924 --- /dev/null +++ b/src/img/moon-tabler.svg @@ -0,0 +1,49 @@ + + + + + + + diff --git a/src/img/sun-tabler.svg b/src/img/sun-tabler.svg new file mode 100644 index 0000000..3c1c587 --- /dev/null +++ b/src/img/sun-tabler.svg @@ -0,0 +1,55 @@ + + + + + + + + diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js index 961242e..8664ef4 100644 --- a/src/scripts/image-show.js +++ b/src/scripts/image-show.js @@ -18,7 +18,7 @@ function clickToView() { const images = document.getElementsByTagName('img'); for (const image of images) { - if (image.alt !== '🔗' && image.id !== 'scrollBtn') { + if (image.alt !== '🔗' && !image.classList.contains('unzoomable')) { image.onclick = clickToView; } } diff --git a/src/scripts/theme-changer-preload.js b/src/scripts/theme-changer-preload.js new file mode 100644 index 0000000..bb53b6c --- /dev/null +++ b/src/scripts/theme-changer-preload.js @@ -0,0 +1,4 @@ +const darkThemeStyle = document.styleSheets[1]; + +if (localStorage.getItem('theme') === 'light') + darkThemeStyle.disabled = true; diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js new file mode 100644 index 0000000..5fd5f7c --- /dev/null +++ b/src/scripts/theme-changer.js @@ -0,0 +1,28 @@ +const themeBtn = document.getElementById('changeThemeBtn'); + +if (darkThemeStyle.disabled) + themeBtn.src = '/img/moon-tabler.svg'; + +themeBtn.style.display = 'initial'; + +function changeTheme(theme) { + if (theme === 'light') { + darkThemeStyle.disabled = true; + themeBtn.src = '/img/moon-tabler.svg'; + } + else { + darkThemeStyle.disabled = false; + themeBtn.src = '/img/sun-tabler.svg'; + } +} + +themeBtn.onclick = function() { + if (localStorage.getItem('theme') !== 'light') { + changeTheme('light'); + localStorage.setItem('theme', 'light'); + } + else { + changeTheme('dark'); + localStorage.setItem('theme', 'dark'); + } +} diff --git a/src/styles.css b/src/styles.css index 6f464fc..8aa539d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -62,6 +62,10 @@ img { image-rendering: pixelated; } +.btn:hover { + cursor: pointer; +} + img, hr { border: 1px solid black; } @@ -155,10 +159,11 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img { background-color: var(--link-tab-bg-hover-color); } -#changeThemeButton { +#changeThemeBtn { vertical-align: middle; margin-top: -0.2em; border: none !important; + display: none; } /* Index page styling */ @@ -402,10 +407,6 @@ code span { display: none; } -#scrollBtn:hover { - cursor: pointer; -} - /* OpenSans font */ @font-face { -- cgit v1.3.1-26-gb76a