diff options
34 files changed, 493 insertions, 263 deletions
@@ -1,5 +1,6 @@ /apple-touch-icon.png /favicon.ico +*.avif *.css *.js *.ttf diff --git a/CHANGELOG.md b/CHANGELOG.md index d4e5282..efadf46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog +## 5.0 + +* Elaborate pages +* Rework navigation bar and theme toggler +* Use Dart Sass instead of SassC +* Rework front pages +* Add new page *agbsum* +* Specify language +* Load pages with scripts +* Use AVIF thumbnails instead of WebP +* Update gitignore + ## 4.2 * Remove and add some fonts diff --git a/css/content.scss b/css/content.scss index 515044f..c80c7c7 100644 --- a/css/content.scss +++ b/css/content.scss @@ -1,7 +1,8 @@ #content { - margin: auto; - max-width: 72rem; - padding: 2rem; + margin: auto; + max-width: 72rem; + padding: 1rem; + padding-top: calc($frontPageHeight + 1rem); p:not(.heading, #contentHeading, #cloneNotice p) { line-height: 2em; @@ -53,12 +54,14 @@ } } - section:nth-of-type(even) p.heading { - text-align: right; - } + section { + & + section { + margin-top: 1rem; + } - section + section { - margin-top: 1rem; + &:nth-of-type(even) p.heading { + text-align: right; + } } p.heading { @@ -119,6 +122,7 @@ font-family: "Martian Mono", "monospace"; font-size: 0.75em; image-rendering: pixelated; + margin-top: 1rem; padding: 1rem; .separator { diff --git a/css/frontPage.scss b/css/frontPage.scss index 0c6247a..9ed00f4 100644 --- a/css/frontPage.scss +++ b/css/frontPage.scss @@ -1,65 +1,176 @@ #frontPage { - align-items: center; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; - display: flex; - justify-content: center; + box-shadow: $shadow; + color: var(--pageHighlightColour); height: calc(100vh + 1rem); padding-bottom: 1rem; - pointer-events: none; + position: absolute; + top: 0; + user-select: none; width: 100%; body[data-page = "about"] & { + --pageHighlightColour: #FFFFFF; + background-color: $achernarColour; + + div#glyph { + background-image: url("/svg/glyph/achernar.svg"); + } + } + + body[data-page = "agbsum"] & { + --pageHighlightColour: #FFFFFF; + + background-color: #422984; + + div#glyph { + background-image: url("/svg/glyph/ax.svg"); + } } body[data-page = "ax"] & { + --pageHighlightColour: #FFFFFF; + background-color: #422984; + + div#glyph { + background-image: url("/svg/glyph/ax.svg"); + } } body[data-page = "backspace"] & { + --pageHighlightColour: var(--textColour); + background-color: var(--backgroundColour); + + div#glyph { + background-image: url("/svg/glyph/backspace.svg"); + } } body[data-page = "benoit"] & { + --pageHighlightColour: #FFFFFF; + background-image: url("/svg/benoit-background.svg"); background-size: cover; + + div#glyph { + background-image: url("/svg/glyph/benoit.svg"); + } } body[data-page = "bowshock"] & { + --pageHighlightColour: #FFEEE0; + background-color: #B61833; + + div#glyph { + background-image: url("/svg/glyph/bowshock.svg"); + } } body[data-page = "bzipper"] & { + --pageHighlightColour: #B4202D; + background-color: #FFFFFF; + + div#glyph { + background-image: url("/svg/glyph/bzipper.svg"); + } } body[data-page = "deltaWorld"] & { + --pageHighlightColour: var(--textColour); + background-color: var(--backgroundColour); + + div#glyph { + background-image: url("/svg/glyph/deltaWorld.svg"); + } } body[data-page = "eas"] & { + --pageHighlightColour: #00291B; + background-color: #01CD93; + + div#glyph { + background-image: url("/svg/glyph/eas.svg"); + } } body[data-page = "luma"] & { + --pageHighlightColour: #FFFFFF; + background-color: #6051B2; + + div#glyph { + background-image: url("/svg/glyph/luma.svg"); + } } body[data-page = "pollex"] & { + --pageHighlightColour: #FFFFFF; + background-color: #4D4084; + + div#glyph { + background-image: url("/svg/glyph/pollex.svg"); + } } body[data-page = "u8c"] & { + --pageHighlightColour: #A9E13D; + background-color: #444747; + + div#glyph { + background-image: url("/svg/glyph/u8c.svg"); + } } + #hamburger { + aspect-ratio: 1; + background-color: var(--pageHighlightColour); + cursor: pointer; + left: 1rem; + mask-image: url("/svg/hamburger.svg"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: cover; + position: absolute; + top: 1rem; + transition: background-color $navBarSlideDuration; + width: 2rem; + z-index: 255; + + &[data-navBarState = "Visible"] { + background-color: var(--textColour); + } + } + + @import "navBar"; + #glyph { - display: block; - font-size: 4rem; + display: block; + left: 50vw; + position: absolute; + top: 50vh; + transform: translate(-50%, -50%); + } + + div#glyph { + aspect-ratio: 1; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + width: calc(100vmin / 2); + } + + p#glyph { + font-size: 4em; font-weight: bold; - height: fit-content; - width: calc(100vmin / 2); - text-align: center; } } diff --git a/css/main.scss b/css/main.scss index 8dd53c3..983c4ad 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,6 +2,11 @@ $achernarColour: #007B34; +$frontPageHeight: calc(100vh + 1rem); +$navBarSlideDuration: 0.5s; + +$shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);; + :root { font-family: "Raleway", "sans-serif"; } @@ -18,61 +23,17 @@ $achernarColour: #007B34; color: var(--textColour); z-index: -1; - &[data-theme = "light"] { + &[data-theme = "Light"] { --backgroundColour: oklch(100% 0 0); --foregroundColour: oklch( 96.875% 0 0); --textColour: oklch( 25% 0 0); } - &[data-theme = "dark"] { + &[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: var(--textColour); - } - - &[data-page = "benoit"] { - --pageHighlightColour: #FFFFFF; - } - - &[data-page = "bowshock"] { - --pageHighlightColour: #FFEEE0; - } - - &[data-page = "bzipper"] { - --pageHighlightColour: #B4202D; - } - - &[data-page = "deltaWorld"] { - --pageHighlightColour: var(--textColour); - } - - &[data-page = "eas"] { - --pageHighlightColour: #00291B; - } - - &[data-page = "luma"] { - --pageHighlightColour: #FFFFFF; - } - - &[data-page = "pollex"] { - --pageHighlightColour: #FFFFFF; - } - - &[data-page = "u8c"] { - --pageHighlightColour: #A9E13D; - } } ol, ul { @@ -83,6 +44,5 @@ li p::before { content: "\2014\0020"; } -@import "navigationBar.scss"; @import "frontPage.scss"; @import "content.scss"; diff --git a/css/navBar.scss b/css/navBar.scss new file mode 100644 index 0000000..a915415 --- /dev/null +++ b/css/navBar.scss @@ -0,0 +1,71 @@ +#navBar { + backdrop-filter: blur(1rem); + background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); + box-shadow: $shadow; + color: var(--textColour); + display: flex; + gap: 1rem; + left: 0; + min-height: calc(100vh + 1rem); + padding: 1rem; + padding-top: 4rem; + position: absolute; + transform: translateX(-100%); + transition: transform $navBarSlideDuration; + width: 50%; + z-index: 127; + + &[data-state = "Visible"] { + transform: translateX(0); + } + + p.clickable, a { + color: var(--textColour); + cursor: pointer; + display: block; + font-weight: bold; + text-decoration: underline; + text-decoration-color: #00000000; + transition: text-decoration-color 0.125s; + + &:hover { + text-decoration-color: var(--textColour); + } + } + + section { + display: flex; + flex-direction: column; + gap: 0.5em; + + p.heading { + text-align: center; + + &::after { + background-color: var(--textColour); + border-radius: 0.25rem; + content: ""; + display: block; + height: 0.25rem; + margin-top: 0.5rem; + width: 100%; + } + } + } + + #themeToggler { + bottom: 2rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + @media (orientation: landscape) { + border-bottom-right-radius: 1rem; + border-top-right-radius: 1rem; + } + + @media (orientation: portrait) { + width: 100%; + } +} diff --git a/css/navigationBar.scss b/css/navigationBar.scss deleted file mode 100644 index 6b17412..0000000 --- a/css/navigationBar.scss +++ /dev/null @@ -1,40 +0,0 @@ -#navigationBar { - align-items: center; - background-color: #00000000; - display: flex; - gap: 1rem; - justify-content: center; - position: absolute; - top: 1rem; - user-select: none; - width: 100%; - z-index: 1; - - 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(--pageHighlightColour); - transition: text-decoration-color 0.125s; - } - } - - #themeToggler { - display: block; - left: 1rem; - position: absolute; - } - - .separator { - background-color: var(--pageHighlightColour); - border-radius: 0.125rem; - height: 0.25rem; - width: 1rem; - } -}
\ No newline at end of file diff --git a/css/noScript.scss b/css/noScript.scss index 4cc630c..c76d9e2 100644 --- a/css/noScript.scss +++ b/css/noScript.scss @@ -1,3 +1,7 @@ +#navBar { + display: none; +} + #themeToggler { display: none; } diff --git a/html/about.html b/html/about.html index 893ebaa..a0d39a8 100644 --- a/html/about.html +++ b/html/about.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,22 +14,22 @@ </noscript> </head> - <body data-page="about" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/achernar.svg"> - </div> + <body data-page="about" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">About</p> - <p><b>Achernar</b> is a small indie development studio based in the Capital Region of Denmark. 🇩🇰</p> + <section> + <p><em>Achernar</em> is a small indie development studio based in the Capital Region of Denmark. 🇩🇰</p> + + <p>We develop open-source software, including video games and more productive software. We work with embedded systems as well as hosted ones.</p> + </section> <section> <p class="heading">Vision</p> - <p>The goal of <b>Achernar</b> is to promote modern and robustly written open-source projects and alike.</p> + <p>The goal of <em>Achernar</em> is to promote modern and robustly written open-source projects and alike.</p> <br> <p>In other words, our vision is to develop a human and clean industry and community for technology.</p> </section> @@ -37,7 +37,7 @@ <section> <p class="heading">Inception</p> - <p><b>Achernar</b> was founded in the summer of 2024 by I, <em>Gabriel Bjørnager Jensen</em>.</p> + <p><em>Achernar</em> was founded in the summer of 2024 by I, <em>Gabriel Bjørnager Jensen</em>.</p> <br> <p>Our domain – <span class="code">achernar.dk</span> – was already registered in the winter of 2021, at that time being used for hosting on-line source code repositories. This was, however, quickly outsourced to <span class="code"><a href="https://mandelbrot.dk">mandelbrot.dk</a></span> after I had managed to secure that domain.</p> <br> @@ -93,9 +93,9 @@ </ul> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/agbsum.html b/html/agbsum.html new file mode 100644 index 0000000..36a4fcd --- /dev/null +++ b/html/agbsum.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="darkreader-lock"> + + <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">agbsum | Achernar</title> + + <link href="/css/main.css" rel="stylesheet"> + <noscript> + <link href="/css/noScript.css" rel="stylesheet"> + </noscript> + </head> + + <body data-page="agbsum" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> + + <div id="content"> + <p id="contentHeading">agbsum</p> + + <section> + <p><em>agbsum</em> is a utility for patching AGB images.</p> + </section> + + <!--#include virtual="/include/footnote.shtml"--> + </div> + + <!--#include virtual="/include/initScripts.shtml"--> + </body> +</html> diff --git a/html/ax.html b/html/ax.html index c1ed62a..f6a3218 100644 --- a/html/ax.html +++ b/html/ax.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="ax" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/ax.svg"> - </div> + <body data-page="ax" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">Advanced X</p> @@ -34,9 +30,9 @@ <p>The development of <em>AX</em> is currently on hold to prioritise <a href="/html/luma.html"><em>Luma</em></a> and <a href="/html/eas.html"><em>eAS</em></a>.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/backspace.html b/html/backspace.html index d715ee9..0fc020b 100644 --- a/html/backspace.html +++ b/html/backspace.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,17 +14,15 @@ </noscript> </head> - <body data-page="backspace" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <p id="glyph">COMING SOON</p> - </div> + <body data-page="backspace" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> - <!--#include virtual="/shtml/footnote.shtml"--> + <p id="contentHeading">Comming Soon</p> + + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/benoit.html b/html/benoit.html index 41bdb79..bf04e4c 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="benoit" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/benoit.svg"> - </div> + <body data-page="benoit" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">Benoit</p> @@ -41,14 +37,22 @@ </section> <section> + <p class="heading">benoit-gui</p> + + <p>The <span class="code">benoit-gui</span> executable, on the other hand, allows viewing fractals in realtime. Do note, however, that this frontend is currently unimplemented.</p> + <br> + <x-image data-file="benoit_screenshot2"></x-image> + </section> + + <section> <p class="heading">Docs</p> <p>Documentation for the main library can be found on <a href="https://docs.rs/benoit/latest/benoit/"><span class="code">docs.rs</span></a>.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/bowshock.html b/html/bowshock.html index 655fec3..fd046c1 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,19 +14,15 @@ </noscript> </head> - <body data-page="bowshock" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/bowshock.svg"> - </div> + <body data-page="bowshock" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> - <p id="contentHeading">COMING SOON</p> + <p id="contentHeading">Coming Soon</p> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/bzipper.html b/html/bzipper.html index f359946..898a959 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="bzipper" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/bzipper.svg"> - </div> + <body data-page="bzipper" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">bzipper</p> @@ -36,9 +32,9 @@ <p>See <a href="https://docs.rs/pollex/latest/pollex/"><span class="code">docs.rs</span></a> for documentation.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/deltaWorld.html b/html/deltaWorld.html index ede638a..ef07bc1 100644 --- a/html/deltaWorld.html +++ b/html/deltaWorld.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,17 +14,15 @@ </noscript> </head> - <body data-page="deltaWorld" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <p id="glyph">COMING SOON</p> - </div> + <body data-page="deltaWorld" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> - <!--#include virtual="/shtml/footnote.shtml"--> + <p id="contentHeading">Comming Soon</p> + + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/eas.html b/html/eas.html index a3a4d06..4970363 100644 --- a/html/eas.html +++ b/html/eas.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="eas" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/eas.svg"> - </div> + <body data-page="eas" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading"><span class="small">the </span>Embedded Assembler</p> @@ -34,9 +30,9 @@ <p>Like <a href="/html/pollex.html"><em>Luma</em></a>, the development of <em>eAS</em> is currently on hold in favour of the <a href="/html/pollex.html"><em>Pollex</em></a> library, which will be used as a backend.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/luma.html b/html/luma.html index 68a34d7..27085e6 100644 --- a/html/luma.html +++ b/html/luma.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="luma" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/luma.svg"> - </div> + <body data-page="luma" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">Luma</p> @@ -34,9 +30,9 @@ <p>The development of <em>Luma</em> is currently on hold in favour of <a href="/html/pollex.html"><em>Pollex</em></a>, which is to be used as a backend.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/pollex.html b/html/pollex.html index 6d7e8bd..c710acf 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="pollex" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/pollex.svg"> - </div> + <body data-page="pollex" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">Pollex</p> @@ -36,9 +32,9 @@ <p>As per usual, documentation for <em>Pollex</em> can be found on <a href="https://docs.rs/pollex/latest/pollex/"><span class="code">docs.rs</span></a>.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/html/u8c.html b/html/u8c.html index 0219eb7..de558cc 100644 --- a/html/u8c.html +++ b/html/u8c.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> @@ -14,12 +14,8 @@ </noscript> </head> - <body data-page="u8c" data-theme="dark" id="body"> - <!--#include virtual="/shtml/navigationBar.shtml"--> - - <div id="frontPage"> - <img id="glyph" src="/svg/glyph/u8c.svg"> - </div> + <body data-page="u8c" data-theme="Dark" id="body"> + <!--#include virtual="/include/frontPage.shtml"--> <div id="content"> <p id="contentHeading">u8c</p> @@ -28,9 +24,9 @@ <p><em>u8c</em> is a library for handling Unicode sequences in C.</p> </section> - <!--#include virtual="/shtml/footnote.shtml"--> + <!--#include virtual="/include/footnote.shtml"--> </div> - <!--#include virtual="/shtml/initScripts.shtml"--> + <!--#include virtual="/include/initScripts.shtml"--> </body> </html> diff --git a/include/comingSoon.shtml b/include/comingSoon.shtml new file mode 100644 index 0000000..c1687eb --- /dev/null +++ b/include/comingSoon.shtml @@ -0,0 +1,7 @@ +<div id="frontPage"> + <div id="hamburger" onclick="toggleNavBar();"></div> + + <p id="glyph">COMING SOON</p> +</div> + +<div id="content"></div> diff --git a/shtml/footnote.shtml b/include/footnote.shtml index c1d8561..2abd2ed 100644 --- a/shtml/footnote.shtml +++ b/include/footnote.shtml @@ -1,4 +1,4 @@ -<section id="footnote"> +<footer id="footnote"> <p id="footnoteHeading">Achernar</p> <br> <table> @@ -14,9 +14,11 @@ </tbody> </table> <br> + <p>Communications can be done in English and Danish.</p> + <br> <p>This webservice can be cloned from <a href="https://mandelbrot.dk/achernar/"><span class="code">mandelbrot.dk</span></a>.</p> <div class="separator"></div> <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> +</footer> diff --git a/include/frontPage.shtml b/include/frontPage.shtml new file mode 100644 index 0000000..0915cda --- /dev/null +++ b/include/frontPage.shtml @@ -0,0 +1,37 @@ +<div id="frontPage"> + <div id="hamburger" onclick="toggleNavBar();"></div> + + <div data-state="Hidden" id="navBar"> + <section> + <p class="heading">ACHERNAR</p> + + <p class="clickable" onclick="loadPage('about');">ABOUT</p> + <a href="https://mandelbrot.dk" rel="noopener noreferrer" target="_blank">SOURCES</a> + </section> + + <section> + <p class="heading">PRODUCTS</p> + + <p class="clickable" onclick="loadPage('bowshock');">BOWSHOCK</p> + <p class="clickable" onclick="loadPage('deltaWorld');">DELTA·WORLD</p> + </section> + + <section> + <p class="heading">PROJECTS</p> + + <p class="clickable" onclick="loadPage('agbsum');">AGBSUM</p> + <p class="clickable" onclick="loadPage('ax');">AX</p> + <p class="clickable" onclick="loadPage('backspace');">BACKSPACE</p> + <p class="clickable" onclick="loadPage('benoit');">BENOIT</p> + <p class="clickable" onclick="loadPage('bzipper');">BZIPPER</p> + <p class="clickable" onclick="loadPage('eas');">eAS</p> + <p class="clickable" onclick="loadPage('luma');">LUMA</p> + <p class="clickable" onclick="loadPage('pollex');">POLLEX</p> + <p class="clickable" onclick="loadPage('u8c');">U8C</p> + </section> + + <p class="clickable" id="themeToggler" onclick="toggleTheme();">TOGGLE THEME</p> + </div> + + <div id="glyph"></div> +</div> diff --git a/shtml/initScripts.shtml b/include/initScripts.shtml index d4955f3..86feb76 100644 --- a/shtml/initScripts.shtml +++ b/include/initScripts.shtml @@ -1,17 +1,15 @@ <script src="/js/initImages.js" type="text/javascript"></script> +<script src="/js/loadPage.js" type="text/javascript"></script> +<script src="/js/setNavBarState.js" type="text/javascript"></script> <script src="/js/setTheme.js" type="text/javascript"></script> +<script src="/js/toggleNavBar.js" type="text/javascript"></script> <script src="/js/toggleTheme.js" type="text/javascript"></script> <script type="text/javascript"> (function() { - initImages(); - - let theme = localStorage.getItem("theme"); - - if (!theme) { - theme = "dark"; - } - + let theme = JSON.parse(localStorage.getItem("theme")); setTheme(theme); + + initImages(); })(); </script> @@ -12,11 +12,11 @@ mkdir -p "${DESTINATION}" cp "apple-touch-icon.png" "${DESTINATION}" cp "favicon.ico" "${DESTINATION}" +cp -r "font" "${DESTINATION}" cp -r "html" "${DESTINATION}" -cp -r "shtml" "${DESTINATION}" +cp -r "image" "${DESTINATION}" +cp -r "include" "${DESTINATION}" cp -r "svg" "${DESTINATION}" -cp -r "ttf" "${DESTINATION}" -cp -r "webp" "${DESTINATION}" mkdir -p "${DESTINATION}/css" mkdir -p "${DESTINATION}/js" diff --git a/js/initImages.ts b/js/initImages.ts index db81c2c..7bff4b5 100644 --- a/js/initImages.ts +++ b/js/initImages.ts @@ -1,14 +1,13 @@ function initImages() { let content = document.getElementById("content")!; - let image_count = 0x0; let image_list = Array.from(content.getElementsByTagName("x-image")); for (let image of image_list) { let file = image.getAttribute("data-file")!; console.log("initialising image that links to \"" + file + "\""); - let source_url = "/webp/source/" + file + ".webp"; - let thumbnail_url = "/webp/thumbnail/" + file + ".webp"; + let source_url = "/image/source/" + file + ".webp"; + let thumbnail_url = "/image/thumbnail/" + file + ".avif"; let blur_element = document.createElement("img"); blur_element.setAttribute("class", "blur"); @@ -26,9 +25,5 @@ function initImages() { hyperlink_element.appendChild(image_element); image.appendChild(hyperlink_element); - - ++image_count; } - - console.log("initialised (" + image_count + ") image(s)"); } diff --git a/js/loadPage.ts b/js/loadPage.ts new file mode 100644 index 0000000..72bb124 --- /dev/null +++ b/js/loadPage.ts @@ -0,0 +1,32 @@ +/// <reference path="initImages.ts" /> + +async function loadPage(page: string) { + console.log("loading page `" + page + "`") + + let url = `/html/${page}.html`; + window.history.pushState("", "", url); + + let response = await fetch(url); + + if (!response.ok) { + throw new Error(`unable to load page: \"${response.status}\"`); + } + + let markup = await response.text(); + + let parser = new DOMParser(); + let dom = parser.parseFromString(markup, "text/html"); + + let title = document.getElementById("title")!; + let body = document.getElementById("body")!; + let content = document.getElementById("content")!; + + let new_title = dom.getElementById("title")!; + let new_content = dom.getElementById("content")!; + + title.replaceWith(new_title); + body.setAttribute("data-page", page); + content.replaceWith(new_content); + + initImages(); +} diff --git a/js/setNavBarState.ts b/js/setNavBarState.ts new file mode 100644 index 0000000..04058f7 --- /dev/null +++ b/js/setNavBarState.ts @@ -0,0 +1,14 @@ +enum NavBarState { + Visible, + Hidden, +} + +function setNavBarState(state: NavBarState) { + console.log("setting navigation bar to `" + NavBarState[state] + "`"); + + let nav_bar = document.getElementById("navBar")!; + let hamburger = document.getElementById("hamburger")! + + nav_bar.setAttribute("data-state", NavBarState[state]); + hamburger.setAttribute("data-navBarState", NavBarState[state]); +} diff --git a/js/setTheme.ts b/js/setTheme.ts index d9a6cf8..25debba 100644 --- a/js/setTheme.ts +++ b/js/setTheme.ts @@ -1,8 +1,24 @@ -function setTheme(theme: string) { - console.log("setting theme to `" + theme + "`"); +enum Theme { + Light, + Dark, +} + +function setTheme(theme: Theme) { + let is_valid_theme = + theme == Theme.Light + || theme == Theme.Dark; + + if (!is_valid_theme) { + console.log("invalid theme \"" + theme + "\""); + + // Use default: + theme = Theme.Dark; + } + + console.log("setting theme to `" + Theme[theme] + "`"); let body = document.getElementById("body")!; - body.setAttribute("data-theme", theme); + body.setAttribute("data-theme", Theme[theme]); - localStorage.setItem("theme", theme); + localStorage.setItem("theme", JSON.stringify(theme)); } diff --git a/js/toggleNavBar.ts b/js/toggleNavBar.ts new file mode 100644 index 0000000..329a223 --- /dev/null +++ b/js/toggleNavBar.ts @@ -0,0 +1,15 @@ +/// <reference path="setNavBarState.ts" /> + +function toggleNavBar() { + let nav_bar = document.getElementById("navBar")!; + + let state = NavBarState[nav_bar?.getAttribute("data-state")!]; + + if (state == NavBarState.Visible) { + state = NavBarState.Hidden; + } else if (state == NavBarState.Hidden) { + state = NavBarState.Visible; + }; + + setNavBarState(state); +} diff --git a/js/toggleTheme.ts b/js/toggleTheme.ts index fd15dae..733a0f3 100644 --- a/js/toggleTheme.ts +++ b/js/toggleTheme.ts @@ -1,17 +1,12 @@ /// <reference path="setTheme.ts" /> function toggleTheme() { - let theme = localStorage.getItem("theme"); + let theme: Theme = JSON.parse(localStorage.getItem("theme")!); - if (theme == "light") { - theme = "dark"; - } else if (theme == "dark") { - theme = "light"; - } else { - console.log!("invalid theme `" + theme + "`"); - - // Use default: - theme = "dark"; + if (theme == Theme.Light) { + theme = Theme.Dark; + } else if (Theme.Dark) { + theme = Theme.Light; } setTheme(theme); @@ -35,7 +35,7 @@ make_stylesheet() { output="css/${1}.css" echo making stylesheet at \"${output}\"... - sassc --style compressed "${input}" > "${output}" + sass --no-source-map --style=compressed "${input}" "${output}" } make_script() { @@ -46,11 +46,14 @@ make_script() { tsc --outFile "${output}" --target ES2022 "${input}" } -make_icon "svg/achernar-icon.svg" +#make_icon "svg/achernar-icon.svg" make_stylesheet "main" make_stylesheet "noScript" make_script "initImages" +make_script "loadPage" +make_script "setNavBarState" make_script "setTheme" +make_script "toggleNavBar" make_script "toggleTheme" diff --git a/shtml/navigationBar.shtml b/shtml/navigationBar.shtml deleted file mode 100644 index 0609ece..0000000 --- a/shtml/navigationBar.shtml +++ /dev/null @@ -1,20 +0,0 @@ -<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> - <a href="/html/bowshock.html">BOWSHOCK</a> - <a href="/html/bzipper.html">BZIPPER</a> - <a href="/html/deltaWorld.html">DELTA·WORLD</a> - <a href="/html/eas.html">eAS</a> - <a href="/html/luma.html">LUMA</a> - <a href="/html/pollex.html">POLLEX</a> - <a href="/html/u8c.html">U8C</a> - <div class="separator"></div> - <a href="https://mandelbrot.dk/">SOURCES</a> -</div> diff --git a/svg/hamburger.svg b/svg/hamburger.svg new file mode 100644 index 0000000..bb187d5 --- /dev/null +++ b/svg/hamburger.svg @@ -0,0 +1,9 @@ +<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg"> + <mask id="wordmark"> + <rect fill="white" height="3" rx="1" width="15" x="0" y="0" /> + <rect fill="white" height="3" rx="1" width="15" x="0" y="6" /> + <rect fill="white" height="3" rx="1" width="15" x="0" y="12" /> + </mask> + + <rect fill="#FFFFFF" mask="url(#wordmark)" height="100%" width="100%" x="0" y="0" /> +</svg> |
