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-23-gd82d From a77079baae6b00fcd447441e4fcb10a3b76849ec Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 14:17:26 +0200 Subject: Moved theme-changer script to right after theme changer tag --- src/_footer.html | 1 - src/_header.html | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/_footer.html b/src/_footer.html index 2131175..df63dea 100644 --- a/src/_footer.html +++ b/src/_footer.html @@ -23,7 +23,6 @@ - diff --git a/src/_header.html b/src/_header.html index 37a28c5..9e019b3 100644 --- a/src/_header.html +++ b/src/_header.html @@ -37,6 +37,7 @@ Light + -- cgit v1.3.1-23-gd82d From 78c6b328a6f1c393ad0f8aeabd8ff72d00e20165 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 14:23:30 +0200 Subject: Integrated changeTheme function in themeBtn onclick event function --- src/scripts/theme-changer.js | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js index 5fd5f7c..e840f8c 100644 --- a/src/scripts/theme-changer.js +++ b/src/scripts/theme-changer.js @@ -5,24 +5,15 @@ if (darkThemeStyle.disabled) 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() { + darkThemeStyle.disabled != darkThemeStyle.disabled; + if (localStorage.getItem('theme') !== 'light') { - changeTheme('light'); + themeBtn.src = '/img/moon-tabler.svg'; localStorage.setItem('theme', 'light'); } else { - changeTheme('dark'); + themeBtn.src = '/img/sun-tabler.svg'; localStorage.setItem('theme', 'dark'); } } -- cgit v1.3.1-23-gd82d From 4803350c7591e3d2b28b1643383b80f9e3a9d64a Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 14:24:05 +0200 Subject: Reorganized styles css --- src/styles.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/styles.css b/src/styles.css index 8aa539d..78bd8e8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -62,10 +62,6 @@ img { image-rendering: pixelated; } -.btn:hover { - cursor: pointer; -} - img, hr { border: 1px solid black; } @@ -159,13 +155,6 @@ 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); } -#changeThemeBtn { - vertical-align: middle; - margin-top: -0.2em; - border: none !important; - display: none; -} - /* Index page styling */ #index-contents-img { @@ -377,6 +366,10 @@ code span { /* Script specific styling */ +.btn:hover { + cursor: pointer; +} + .clicked-image { position: absolute; width: 100vw; @@ -404,6 +397,15 @@ code span { border: 1px solid; transition-duration: 0.5s; padding: 0.3em; +} + +#changeThemeBtn { + vertical-align: middle; + margin-top: -0.2em; + border: none !important; +} + +#scrollBtn, #changeThemeBtn { display: none; } -- cgit v1.3.1-23-gd82d From 849c168e77d26c8f2fb8ccd032105c01db1bbc56 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 14:26:39 +0200 Subject: Fixed darkTheme not being changed properly --- src/scripts/theme-changer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js index e840f8c..4b5ca1b 100644 --- a/src/scripts/theme-changer.js +++ b/src/scripts/theme-changer.js @@ -6,7 +6,7 @@ if (darkThemeStyle.disabled) themeBtn.style.display = 'initial'; themeBtn.onclick = function() { - darkThemeStyle.disabled != darkThemeStyle.disabled; + darkThemeStyle.disabled = !darkThemeStyle.disabled; if (localStorage.getItem('theme') !== 'light') { themeBtn.src = '/img/moon-tabler.svg'; -- cgit v1.3.1-23-gd82d From 77038e06e7be96986a1e07d51bc1c43e2ba74bb5 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 15:41:20 +0200 Subject: Moved most coloring in light and dark theme to root variables --- src/darkmode.css | 87 +++++++++------------------------------- src/styles.css | 118 ++++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 105 insertions(+), 100 deletions(-) (limited to 'src') diff --git a/src/darkmode.css b/src/darkmode.css index e1b0a72..8e6583a 100644 --- a/src/darkmode.css +++ b/src/darkmode.css @@ -1,41 +1,25 @@ :root { + --fg-color: #ffeede; + --bg-color: #262626; + --fg-selection-color: #001121; + --bg-selection-color: #81949f; + --border-color: #777; + --blockquote-color: #919191; + --blockquote-border-color: #919191; + --header-color: #d49408; + --link-tab-fg-color: #ffeede; --link-tab-bg-color: #464646; --link-tab-bg-hover-color: #d47408; - --bold-color: #d49408; -} - - -::-moz-selection { - color: #001121; - background: #81949f; -} - -::selection { - color: #001121; - background: #81949f; -} - -*, -hr, -article > table tr, -article > table td, -article > table th { - color: #ffeede; - border-color: #777; - background-color: #262626; -} - -blockquote { - border-color: #919191; -} - -blockquote * { - color: #919191; -} - -h1, h2, h3, h4, h5, h6, b { - color: var(--bold-color); - border-color: #777; + --strong-color: #c35b5b; + --a-color: #b47494; + --a-hover-color: #da8db3; + --code-bg-color: #414141; + --pre-bg-color: #414141; + --em-color: #999908; + --td-border-color: #777; + --tr-bg-color: #262626; + --tr-border-color: #777; + --alternating-row-color: #323232; } /* This selects the link images, next to headings */ @@ -43,36 +27,3 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img { /* Refer to styles.css on why this is necessary */ filter: none; } - -strong { - color: #c35b5b; -} - -body > :not(nav) a, a strong { - color: #b47494; - border-bottom: 1px dashed; -} - -body > :not(nav) a:hover, a strong:hover { - color: #da8db3; -} - -pre, code { - background-color: #414141 !important; -} - -i, em { - color: #999908; -} - -table * { - background-color: inherit; -} - -article > table tr:nth-child(2n) td { - background-color: #323232; -} - -.link-tab { - color: #ffeede; -} diff --git a/src/styles.css b/src/styles.css index 78bd8e8..c5629ae 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,6 +1,25 @@ :root { + --fg-color: black; + --bg-color: white; + --fg-selection-color: white; + --bg-selection-color: #338fff; + --border-color: black; + --blockquote-color: #6a737d; + --blockquote-border-color: #dfe2e5; + --header-color: black; + --link-tab-fg-color: white; --link-tab-bg-color: #303030; --link-tab-bg-hover-color: #004080; + --strong-color: black; + --a-color: #004080; + --a-hover-color: #004080; + --code-bg-color: #e2e4e6; + --pre-bg-color: #f6f8fa; + --em-color: black; + --td-border-color: #dfe2e5; + --tr-bg-color: #fff; + --tr-border-color: #c6cbd1; + --alternating-row-color: #f6f8fa; } /* Custom scrollbar style */ @@ -21,10 +40,25 @@ background: #555; } +/* Custom mouse text selection colors */ + +::-moz-selection { + color: var(--fg-selection-color); + background: var(--bg-selection-color); +} + +::selection { + color: var(--fg-selection-color); + background: var(--bg-selection-color); +} + /* Global */ body { min-height: calc(100vh - 16px); + color: var(--fg-color); + background-color: var(--bg-color); + border-color: var(--border-color); } body, td, th { @@ -32,6 +66,11 @@ body, td, th { line-height: 1.5em; } +h1, h2, h3, h4, h5, h6, b { + color: var(--header-color); + border-color: var(--border-color); +} + h1 { font-size: 1.7em; line-height: 1.2em; @@ -45,7 +84,7 @@ h1 ~ h1 { h2 { font-size: 1.35em; padding-bottom: 0.25em; - border-bottom: 2px solid black; + border-bottom: 2px solid var(--border-color); } h3 { @@ -63,12 +102,32 @@ img { } img, hr { - border: 1px solid black; + border: 1px solid var(--border-color); +} + +strong { + color: var(--strong-color); } a { text-decoration: none; - color: var(--link-tab-bg-hover-color); +} + +a * { + color: var(--fg-color); +} + +body > :not(nav) a, a strong { + color: var(--a-color); + border-bottom: 1px dashed; +} + +body > :not(nav) a:hover, a strong:hover { + color: var(--a-hover-color); +} + +i, em { + color: var(--em-color); } article { @@ -147,7 +206,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img { .link-tab { font-weight: normal; padding: 10px; - color: white; + color: var(--link-tab-fg-color); background-color: var(--link-tab-bg-color); } @@ -165,7 +224,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img { #index-contents { display: flex; align-items: center; - justify-content: center; + justify-content: center; } #index-contents-text { @@ -183,8 +242,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img { /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ -code, -pre { +code, pre { font-family: monospace; font-size: 1em; } @@ -193,20 +251,10 @@ code { padding: .2em .4em; margin: 0; font-size: 85%; - background-color: rgba(40,46,52,.5); + background-color: var(--code-bg-color); border-radius: 3px; } -pre > code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; -} - pre code { display: inline; max-width: auto; @@ -215,7 +263,17 @@ pre code { overflow: visible; line-height: inherit; word-wrap: normal; - background-color: initial; + background-color: var(--code-bg-color); + border: 0; +} + +pre > code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background-color: inherit; border: 0; } @@ -224,7 +282,7 @@ pre { overflow: auto; font-size: 85%; line-height: 1.45; - background-color: #f6f8fa; + background-color: var(--pre-bg-color); border-radius: 3px; margin: 0; word-break: normal; @@ -262,16 +320,16 @@ article > table th { article > table td, article > table th { padding: 6px 13px; - border: 1px solid #dfe2e5; + border: 1px solid var(--td-border-color); } article > table tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; + background-color: var(--tr-bg-color); + border-top: 1px solid var(--tr-border-color); } article > table tr:nth-child(2n) { - background-color: #f6f8fa; + background-color: var(--alternating-row-color); } blockquote { @@ -279,8 +337,8 @@ blockquote { margin-top: 0; margin-bottom: 16px; padding: 0 1em; - color: #6a737d; - border-left: .25em solid #dfe2e5; + color: var(--blockquote-color); + border-left: .25em solid var(--blockquote-border-color); } blockquote > :first-child { @@ -304,7 +362,7 @@ blockquote > :last-child { } .contact-card-title, .contact-card-content { - background-color: #343434; + background-color: var(--alternating-row-color); padding: 0.7rem; line-height: 1.5rem; } @@ -317,7 +375,7 @@ blockquote > :last-child { .contact-card-title { font-size: 1.2em; margin: 0em 0.4em; - color: var(--bold-color); + color: var(--header-color); } .contact-card-content { @@ -328,10 +386,6 @@ blockquote > :last-child { /* Syntax highlighting (colours are inspired from gruvbox) */ -code span { - background-color: inherit; -} - .cst, .chr { /* Constant, Chars */ color: #d787af; } -- cgit v1.3.1-23-gd82d From 7a2ff20e6ac78371264934f8dd30a134e9658db9 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 16:05:08 +0200 Subject: Updated header margins --- src/styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/styles.css b/src/styles.css index c5629ae..a996be2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -149,10 +149,14 @@ table code { h2, h3, h4, h5, h6, .about-header { display: inline-block; margin-block-start: 0.4em; - margin-block-end: 0.5em; /* Account for it being an inline block, as opposed to a normal block */ + margin-block-end: 0.16em; line-height: 1.25em; } +.about-header:first-child { + margin-block-start: 0.83em; +} + h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .about-p { display: inline; } -- cgit v1.3.1-23-gd82d From 8597d2432efde50be6b9b60f6e1e68e52086e5b0 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 16:06:39 +0200 Subject: Fixed clicked image background color --- src/styles.css | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/styles.css b/src/styles.css index a996be2..f8a7dcf 100644 --- a/src/styles.css +++ b/src/styles.css @@ -440,6 +440,7 @@ blockquote > :last-child { top: 0; padding: 1em; z-index: 2; + background-color: var(--bg-color); } .body-on-clicked-image { -- cgit v1.3.1-23-gd82d From b6da520aecbadbc2962961af4e21e60767ebc72a Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 16:10:54 +0200 Subject: Added integrity checks for theme-changer script(s) --- src/_header.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/_header.html b/src/_header.html index 9e019b3..f00f341 100644 --- a/src/_header.html +++ b/src/_header.html @@ -11,7 +11,7 @@ - + @@ -37,7 +37,7 @@ Light - + -- cgit v1.3.1-23-gd82d From aeb64b5313e46bd7235bd546d4d215aecd00911b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 9 Mar 2022 16:28:01 +0200 Subject: Added information about new scripts in regarding js page --- src/regarding-js.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/regarding-js.md b/src/regarding-js.md index 8253fd4..0bc6afb 100644 --- a/src/regarding-js.md +++ b/src/regarding-js.md @@ -3,9 +3,11 @@ --- --- -On 20.02.2022 I decided to lift the "ban" on usage of JavaScript in this website. This gives me the freedom to implement some useful features for those that have it enabled. **Any content that doesn't depend on JavaScript will be perfectly consumable without it! There isn't and never will be anything that violates a user's privacy!** +On 20.02.2022 I decided to lift the "ban" on usage of JavaScript in this website. This gives me the freedom to implement some useful features for those that have it enabled. **Any content that doesn't depend on JavaScript will be perfectly consumable without it!** -To keep everything transparent, all pages on [Web Apps]() will require JavaScript to run and for everything else I will list information here. +Any user data that might be saved isn't, and never will be, used for purposes not listed here. There isn't, and won't ever be, any form of tracking or data collection that isn't required for some feature (listed here). + +All pages on [Web Apps](/web-apps) will require JavaScript to run and for everything else I will list information here. ## Implemented features [![🔗](/img/link-tabler.svg)](#Implemented%20features) @@ -14,4 +16,18 @@ To keep everything transparent, all pages on [Web Apps]() will require JavaScrip |---|---|---| |Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|[Link](/scripts/image-show.js)| |Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|[Link](/scripts/back-to-top.js)| +|Change theme between light and dark (split in two files)|[Link F1](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer-preload.js) [Link F2](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|[Link F1](/scripts/theme-changer-preload.js) [Link F2](/scripts/theme-changer.js)| + +## Data in browser storage +[![🔗](/img/link-tabler.svg)](#Data%20in%20browser%20storage) + +

+ +### Local storage +[![🔗](/img/link-tabler.svg)](#Local%20storage) + +|Description|Key|Values| +|---|---|---| +|Saves which theme should be loaded|`theme`|`dark`\|`light`| +

-- cgit v1.3.1-23-gd82d