diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | css/content.scss | 35 | ||||
| -rw-r--r-- | css/frontPage.scss | 26 | ||||
| -rw-r--r-- | css/main.scss | 70 | ||||
| -rw-r--r-- | css/navigationBar.scss | 64 | ||||
| -rw-r--r-- | css/noScript.scss | 3 | ||||
| -rw-r--r-- | html/about.html | 7 | ||||
| -rw-r--r-- | html/ax.html | 7 | ||||
| -rw-r--r-- | html/backspace.html | 7 | ||||
| -rw-r--r-- | html/benoit.html | 7 | ||||
| -rw-r--r-- | html/bowshock.html | 7 | ||||
| -rw-r--r-- | html/bzipper.html | 7 | ||||
| -rw-r--r-- | html/deltaWorld.html | 7 | ||||
| -rw-r--r-- | html/eas.html | 7 | ||||
| -rw-r--r-- | html/luma.html | 7 | ||||
| -rw-r--r-- | html/pollex.html | 7 | ||||
| -rw-r--r-- | html/u8c.html | 7 | ||||
| -rw-r--r-- | js/setTheme.ts | 8 | ||||
| -rw-r--r-- | js/toggleTheme.ts | 18 | ||||
| -rwxr-xr-x | make.sh | 5 | ||||
| -rw-r--r-- | shtml/footnote.shtml | 2 | ||||
| -rw-r--r-- | shtml/initScripts.shtml | 14 | ||||
| -rw-r--r-- | shtml/navigationBar.shtml | 4 |
23 files changed, 223 insertions, 109 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index aad4ec0..25fcd9a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 4.0 + +* Add light theme (and toggler button) +* Update titles +* Adjust styles + ## 3.3 * Make and install icons diff --git a/css/content.scss b/css/content.scss index 147bf20..515044f 100644 --- a/css/content.scss +++ b/css/content.scss @@ -8,7 +8,7 @@ } a, a:visited { - color: $textColour; + color: var(--textColour); } em { @@ -18,7 +18,7 @@ span { &.code { - background-color: $foregroundColour; + background-color: var(--foregroundColour); border-radius: 0.25rem; font-family: "Fira Mono", "monospace"; padding: 0.25rem; @@ -38,7 +38,7 @@ } #contentHeading { - background-color: $foregroundColour; + background-color: var(--foregroundColour); border-radius: 1rem; display: block; font-size: 4em; @@ -68,7 +68,7 @@ width: 100%; &::after { - background-color: $textColour; + background-color: var(--textColour); border-radius: 0.125rem; content: ""; display: block; @@ -96,11 +96,14 @@ img.blur { filter: blur(1rem); position: absolute; - z-index: -1; - width: 100%; + z-index: 1; + width: 100%; } a { + position: relative; + z-index: 1; + img { border-radius: 1rem; display: block; @@ -111,7 +114,7 @@ } #footnote { - background-color: $foregroundColour; + background-color: var(--foregroundColour); border-radius: 1rem; font-family: "Martian Mono", "monospace"; font-size: 0.75em; @@ -119,8 +122,9 @@ padding: 1rem; .separator { - background-color: $textColour; - height: 0.125rem; + background-color: var(--textColour); + border-radius: 0.125rem; + height: 0.25rem; margin: 1rem auto; width: 100%; } @@ -130,13 +134,18 @@ font-weight: bold; } + .obfuscatedText { + background-color: var(--textColour); + height: 1rem; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + width: 100%; + } + img { display: block; margin: auto; - - &.obfuscatedText { - height: 1rem; - } } table { diff --git a/css/frontPage.scss b/css/frontPage.scss index fe34a92..0c6247a 100644 --- a/css/frontPage.scss +++ b/css/frontPage.scss @@ -9,48 +9,48 @@ pointer-events: none; width: 100%; - body.about & { + body[data-page = "about"] & { background-color: $achernarColour; } - body.ax & { + body[data-page = "ax"] & { background-color: #422984; } - body.backspace & { - background-color: $backgroundColour; + body[data-page = "backspace"] & { + background-color: var(--backgroundColour); } - body.benoit & { + body[data-page = "benoit"] & { background-image: url("/svg/benoit-background.svg"); background-size: cover; } - body.bowshock & { + body[data-page = "bowshock"] & { background-color: #B61833; } - body.bzipper & { + body[data-page = "bzipper"] & { background-color: #FFFFFF; } - body.deltaWorld & { - background-color: $backgroundColour; + body[data-page = "deltaWorld"] & { + background-color: var(--backgroundColour); } - body.eas & { + body[data-page = "eas"] & { background-color: #01CD93; } - body.luma & { + body[data-page = "luma"] & { background-color: #6051B2; } - body.pollex & { + body[data-page = "pollex"] & { background-color: #4D4084; } - body.u8c & { + body[data-page = "u8c"] & { background-color: #444747; } diff --git a/css/main.scss b/css/main.scss index 46e22fc..3d0a211 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,17 +1,9 @@ @import "fonts"; -$backgroundColour: oklch(20% 0.041075 270); -$foregroundColour: oklch(25% 0.041075 270); -$textColour: oklch(100% 0 0); -$highlightColour: oklch(75% 0.292700 149.34); - $achernarColour: #007B34; :root { font-family: "Raleway", "sans-serif"; - - background-color: $backgroundColour; - color: $textColour; } * { @@ -21,6 +13,68 @@ $achernarColour: #007B34; box-sizing: border-box; } +#body { + background-color: var(--backgroundColour); + color: var(--textColour); + z-index: -1; + + &[data-theme = "light"] { + --backgroundColour: oklch(100% 0 0); + --foregroundColour: oklch( 96.875% 0 0); + --textColour: oklch( 25% 0 0); + } + + &[data-theme = "dark"] { + --backgroundColour: oklch( 20% 0.041075 270); + --foregroundColour: oklch( 25% 0.041075 270); + --textColour: oklch(100% 0 0); + } + + &[data-page = "about"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "ax"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "backspace"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "benoit"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "bowshock"] { + --pageHighlightColour: #FFEEE0; + } + + &[data-page = "bzipper"] { + --pageHighlightColour: #B4202D; + } + + &[data-page = "deltaWorld"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "eas"] { + --pageHighlightColour: #00291B; + } + + &[data-page = "luma"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "pollex"] { + --pageHighlightColour: #FFFFFF; + } + + &[data-page = "u8c"] { + --pageHighlightColour: #A9E13D; + } +} + ol, ul { list-style-type: none; } diff --git a/css/navigationBar.scss b/css/navigationBar.scss index 75541ff..6b17412 100644 --- a/css/navigationBar.scss +++ b/css/navigationBar.scss @@ -4,71 +4,35 @@ display: flex; gap: 1rem; justify-content: center; - padding: 1rem 0; position: absolute; - top: 0; + top: 1rem; user-select: none; width: 100%; z-index: 1; - body.about & { - --foregroundColour: #FFFFFF; - } - - body.ax & { - --foregroundColour: #FFFFFF; - } - - body.backspace & { - --foregroundColour: #FFFFFF; - } - - body.benoit & { - --foregroundColour: #FFFFFF; - } - - body.bowshock & { - --foregroundColour: #FFEEE0; - } - - body.bzipper & { - --foregroundColour: #B4202D; - } - - body.deltaWorld & { - --foregroundColour: #FFFFFF; - } - - body.eas & { - --foregroundColour: #00291B; - } - - body.luma & { - --foregroundColour: #FFFFFF; - } - - body.pollex & { - --foregroundColour: #FFFFFF; - } - - body.u8c & { - --foregroundColour: #A9E13D; - } - - a { - color: var(--foregroundColour); + a, p { + color: var(--pageHighlightColour); + cursor: pointer; font-weight: bold; + text-decoration: underline; text-decoration-color: #00000000; transition: text-decoration-color 0.125s; + width: fit-content; &:hover { - text-decoration-color: var(--foregroundColour); + text-decoration-color: var(--pageHighlightColour); transition: text-decoration-color 0.125s; } } + #themeToggler { + display: block; + left: 1rem; + position: absolute; + } + .separator { - background-color: var(--foregroundColour); + background-color: var(--pageHighlightColour); border-radius: 0.125rem; height: 0.25rem; width: 1rem; diff --git a/css/noScript.scss b/css/noScript.scss new file mode 100644 index 0000000..4cc630c --- /dev/null +++ b/css/noScript.scss @@ -0,0 +1,3 @@ +#themeToggler { + display: none; +} diff --git a/html/about.html b/html/about.html index 7ae64c4..988431e 100644 --- a/html/about.html +++ b/html/about.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Achernar</title> + <title id="title">About | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="about" id="body"> + <body data-page="about" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/ax.html b/html/ax.html index 643c84f..c1ed62a 100644 --- a/html/ax.html +++ b/html/ax.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">AX</title> + <title id="title">AX | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="ax" id="body"> + <body data-page="ax" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/backspace.html b/html/backspace.html index 3caea3c..d715ee9 100644 --- a/html/backspace.html +++ b/html/backspace.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Backspace</title> + <title id="title">Backspace | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="backspace" id="body"> + <body data-page="backspace" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/benoit.html b/html/benoit.html index e7c065d..41bdb79 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Benoit</title> + <title id="title">Benoit | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="benoit" id="body"> + <body data-page="benoit" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/bowshock.html b/html/bowshock.html index d0088b9..655fec3 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Bowshock</title> + <title id="title">Bowshock | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="bowshock" id="body"> + <body data-page="bowshock" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/bzipper.html b/html/bzipper.html index 6b7a35f..f359946 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">bzipper</title> + <title id="title">bzipper | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="bzipper" id="body"> + <body data-page="bzipper" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/deltaWorld.html b/html/deltaWorld.html index c05a577..ede638a 100644 --- a/html/deltaWorld.html +++ b/html/deltaWorld.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Delta World</title> + <title id="title">Delta World | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="deltaWorld" id="body"> + <body data-page="deltaWorld" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/eas.html b/html/eas.html index 761d1a0..a3a4d06 100644 --- a/html/eas.html +++ b/html/eas.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">eAS</title> + <title id="title">eAS | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="eas" id="body"> + <body data-page="eas" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/luma.html b/html/luma.html index b1b92cb..68a34d7 100644 --- a/html/luma.html +++ b/html/luma.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Luma</title> + <title id="title">Luma | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="luma" id="body"> + <body data-page="luma" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/pollex.html b/html/pollex.html index 3a32321..6d7e8bd 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">Pollex</title> + <title id="title">Pollex | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="pollex" id="body"> + <body data-page="pollex" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/u8c.html b/html/u8c.html index 0a8d1fd..0219eb7 100644 --- a/html/u8c.html +++ b/html/u8c.html @@ -6,12 +6,15 @@ <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png"> - <title id="title">u8c</title> + <title id="title">u8c | Achernar</title> <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> </head> - <body class="u8c" id="body"> + <body data-page="u8c" data-theme="dark" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/js/setTheme.ts b/js/setTheme.ts new file mode 100644 index 0000000..d9a6cf8 --- /dev/null +++ b/js/setTheme.ts @@ -0,0 +1,8 @@ +function setTheme(theme: string) { + console.log("setting theme to `" + theme + "`"); + + let body = document.getElementById("body")!; + body.setAttribute("data-theme", theme); + + localStorage.setItem("theme", theme); +} diff --git a/js/toggleTheme.ts b/js/toggleTheme.ts new file mode 100644 index 0000000..fd15dae --- /dev/null +++ b/js/toggleTheme.ts @@ -0,0 +1,18 @@ +/// <reference path="setTheme.ts" /> + +function toggleTheme() { + let theme = localStorage.getItem("theme"); + + if (theme == "light") { + theme = "dark"; + } else if (theme == "dark") { + theme = "light"; + } else { + console.log!("invalid theme `" + theme + "`"); + + // Use default: + theme = "dark"; + } + + setTheme(theme); +} @@ -24,7 +24,7 @@ make_icon() { render_icon "${input}" 192 "${directory}/192x192.png" render_icon "${input}" 256 "${directory}/256x256.png" - echo combining renders in \"${directory}\" into \"${output}\" + echo combining renders in \"${directory}\" to \"${output}\" icotool -co "favicon.ico" "${directory}/"*".png" render_icon "${input}" 180 "apple-touch-icon.png" @@ -49,5 +49,8 @@ make_script() { make_icon "svg/achernar-icon.svg" make_stylesheet "main" +make_stylesheet "noScript" make_script "initImages" +make_script "setTheme" +make_script "toggleTheme" diff --git a/shtml/footnote.shtml b/shtml/footnote.shtml index e31b2ce..c1d8561 100644 --- a/shtml/footnote.shtml +++ b/shtml/footnote.shtml @@ -18,5 +18,5 @@ <div class="separator"></div> - <img alt="\"Obfuscated e-mail address.\"" class="obfuscatedText" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA/UlEQVRYw+1XQQ7EIAiExv9/2T01IQQJDNZ0rdyEFmEcBJmIqPfe6ciRzYRvYjMzS4Mk/Mim9RXbbY/YkGLM5BDdI4PZKAe5zuJi+fDWmTPK5F3hS2RPNPdLK/RHnk1ulLFJnbWWOsuGEhuNJetT27I5eP95WFskqJ5fJM4oX1Cso3FqXUNvrZHTWSNO5Zb+i5bpkGhmh/rMCGJwsEWJ6oEmq4mZefRftkpXEmq1T3Q0QPGMFNNul8kVBRYdD9CW94TMGHFW+ETx9OLw4nzTGVVw0cXa5INlxq2APEisNow8cN8EtMYzE2clP+9humIUqHKpwjOd+9Zz7ZFvyw87v+eHE6E5DAAAAABJRU5ErkJggg" /> + <div class="obfuscatedText" style="mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA/UlEQVRYw+1XQQ7EIAiExv9/2T01IQQJDNZ0rdyEFmEcBJmIqPfe6ciRzYRvYjMzS4Mk/Mim9RXbbY/YkGLM5BDdI4PZKAe5zuJi+fDWmTPK5F3hS2RPNPdLK/RHnk1ulLFJnbWWOsuGEhuNJetT27I5eP95WFskqJ5fJM4oX1Cso3FqXUNvrZHTWSNO5Zb+i5bpkGhmh/rMCGJwsEWJ6oEmq4mZefRftkpXEmq1T3Q0QPGMFNNul8kVBRYdD9CW94TMGHFW+ETx9OLw4nzTGVVw0cXa5INlxq2APEisNow8cN8EtMYzE2clP+9humIUqHKpwjOd+9Zz7ZFvyw87v+eHE6E5DAAAAABJRU5ErkJggg);"></div> </section> diff --git a/shtml/initScripts.shtml b/shtml/initScripts.shtml index 77f8afd..d4955f3 100644 --- a/shtml/initScripts.shtml +++ b/shtml/initScripts.shtml @@ -1,5 +1,17 @@ <script src="/js/initImages.js" type="text/javascript"></script> +<script src="/js/setTheme.js" type="text/javascript"></script> +<script src="/js/toggleTheme.js" type="text/javascript"></script> <script type="text/javascript"> - initImages(); + (function() { + initImages(); + + let theme = localStorage.getItem("theme"); + + if (!theme) { + theme = "dark"; + } + + setTheme(theme); + })(); </script> diff --git a/shtml/navigationBar.shtml b/shtml/navigationBar.shtml index 5aeaa15..0609ece 100644 --- a/shtml/navigationBar.shtml +++ b/shtml/navigationBar.shtml @@ -1,6 +1,10 @@ <div id="navigationBar"> + <p id="themeToggler" onclick="toggleTheme();">TOGGLE THEME</p> + <a href="/html/about.html">ABOUT</a> + <div class="separator"></div> + <a href="/html/ax.html">AX</a> <a href="/html/backspace.html">BACKSPACE</a> <a href="/html/benoit.html">BENOIT</a> |