diff options
40 files changed, 868 insertions, 699 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 24d974a..d7a158c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # Changelog +## 7.0 + +* Fix internal links +* Improve script logging +* Rework pages +* Rework page layout +* Rework navigation +* Rewrite styles +* Rewrite scripts +* Elaborate pages +* Add roadmap +* Update readme + ## 6.3 * Fix images @@ -1,6 +1,6 @@ # achernar -This repository contains the source code for Achernar's webservice at `https://achernar.dk`. +This repository contains the source code for [Achernar's webservice](https://achernar.dk) at `https://achernar.dk`. ## Testing @@ -14,7 +14,7 @@ server { server_name localhost; location = / { - return 307 /html/about.html; + return 307 /html/achernar.html; } location = /apple-touch-icon.png { diff --git a/css/banner.scss b/css/banner.scss new file mode 100644 index 0000000..fc14f9f --- /dev/null +++ b/css/banner.scss @@ -0,0 +1,93 @@ +#banner { + --textColour: var(--bannerHighlightColour); + + align-items: center; + background-size: cover; + display: flex; + height: 100%; + image-rendering: pixelated; + justify-content: center; + padding-bottom: 1rem; + position: absolute; + top: 0; + width: 100%; + + body[data-page = "achernar"] & { + --bannerHighlightColour: #FFFFFF; + + background-color: #007B34; + + @media not (prefers-reduced-motion) { + background-image: url("/image/vertexAnimated.webp"); + } + } + + body[data-page = "agbsum"] & { + --bannerHighlightColour: #FFFFFF; + + background-color: #422984; + } + + body[data-page = "ax"] & { + --bannerHighlightColour: #FFFFFF; + + background-color: #422984; + } + + body[data-page = "backspace"] & { + --bannerHighlightColour: var(--textColour); + + background-color: var(--backgroundColour); + } + + body[data-page = "benoit"] & { + --bannerHighlightColour: #FFFFFF; + + background-image: url("/svg/benoit-background.svg"); + } + + body[data-page = "bowshock"] & { + --bannerHighlightColour: #FFEEE0; + + background-color: #B61833; + } + + body[data-page = "bzipper"] & { + --bannerHighlightColour: #B4202D; + + background-color: #FFFFFF; + } + + body[data-page = "deltaWorld"] & { + --bannerHighlightColour: var(--textColour); + + background-color: var(--backgroundColour); + } + + body[data-page = "eas"] & { + --bannerHighlightColour: #00291B; + + background-color: #01CD93; + } + + body[data-page = "luma"] & { + --bannerHighlightColour: #FFFFFF; + + background-color: #6051B2; + } + + body[data-page = "pollex"] & { + --bannerHighlightColour: #FFFFFF; + + background-color: #4D4084; + } + + body[data-page = "u8c"] & { + --bannerHighlightColour: #A9E13D; + + background-color: #444747; + } + + @import "navBar"; + @import "glyph"; +} diff --git a/css/footer.scss b/css/footer.scss index 36a2752..06243b0 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -1,45 +1,26 @@ #footer { background-color: var(--foregroundColour); border-radius: 1rem; - font-family: "Martian Mono", "monospace"; - font-size: 0.75em; + font-family: $monospaceFont; margin-top: 1rem; padding: 1rem; - #emailAddress { - background-color: var(--textColour); - display: inline-block; - height: 1em; - image-rendering: pixelated; - mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA/UlEQVRYw+1XQQ7EIAiExv9/2T01IQQJDNZ0rdyEFmEcBJmIqPfe6ciRzYRvYjMzS4Mk/Mim9RXbbY/YkGLM5BDdI4PZKAe5zuJi+fDWmTPK5F3hS2RPNPdLK/RHnk1ulLFJnbWWOsuGEhuNJetT27I5eP95WFskqJ5fJM4oX1Cso3FqXUNvrZHTWSNO5Zb+i5bpkGhmh/rMCGJwsEWJ6oEmq4mZefRftkpXEmq1T3Q0QPGMFNNul8kVBRYdD9CW94TMGHFW+ETx9OLw4nzTGVVw0cXa5INlxq2APEisNow8cN8EtMYzE2clP+9humIUqHKpwjOd+9Zz7ZFvyw87v+eHE6E5DAAAAABJRU5ErkJggg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: cover; - vertical-align: middle; - width: calc(183em / 8); - } - - #footerHeading { + h1 { font-size: 2em; font-weight: bold; &::after { background-color: var(--textColour); - border-radius: 0.25rem; + border-radius: $separatorWidth; content: ""; display: block; - height: 0.25rem; + height: $separatorWidth; margin-bottom: 1rem; - margin-top: 0.25rem; + margin-top: $separatorWidth; width: 100%; } } - img { - display: block; - margin: auto; - } - table { border-collapse: collapse; @@ -61,4 +42,17 @@ } } } + + #emailAddress { + background-color: var(--textColour); + display: inline-block; + height: 1em; + image-rendering: pixelated; + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAYAAAC78m4/AAAA/UlEQVRYw+1XQQ7EIAiExv9/2T01IQQJDNZ0rdyEFmEcBJmIqPfe6ciRzYRvYjMzS4Mk/Mim9RXbbY/YkGLM5BDdI4PZKAe5zuJi+fDWmTPK5F3hS2RPNPdLK/RHnk1ulLFJnbWWOsuGEhuNJetT27I5eP95WFskqJ5fJM4oX1Cso3FqXUNvrZHTWSNO5Zb+i5bpkGhmh/rMCGJwsEWJ6oEmq4mZefRftkpXEmq1T3Q0QPGMFNNul8kVBRYdD9CW94TMGHFW+ETx9OLw4nzTGVVw0cXa5INlxq2APEisNow8cN8EtMYzE2clP+9humIUqHKpwjOd+9Zz7ZFvyw87v+eHE6E5DAAAAABJRU5ErkJggg"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: cover; + vertical-align: middle; + width: calc(183em / 8); + } } diff --git a/css/glyph.scss b/css/glyph.scss new file mode 100644 index 0000000..c1f6235 --- /dev/null +++ b/css/glyph.scss @@ -0,0 +1,65 @@ +#glyph { + aspect-ratio: 1; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + transition: transform 0.125s; + transition-timing-function: steps(4); + width: 50vmin; + + body[data-page = "achernar"] & { + $pixelWIdth: calc(100vmax / 256); + + background-image: url("/image/achernar.webp"); + height: floor(calc($pixelWIdth * 42)); + width: floor(calc($pixelWIdth * 154)); + + @media (aspect-ratio < 1) { + transform: rotate(0.25turn); + } + } + + body[data-page = "agbsum"] & { + background-image: url("/svg/glyph/ax.svg"); + } + + body[data-page = "ax"] & { + background-image: url("/svg/glyph/ax.svg"); + } + + body[data-page = "backspace"] & { + background-image: url("/svg/glyph/backspace.svg"); + } + + body[data-page = "benoit"] & { + background-image: url("/svg/glyph/benoit.svg"); + } + + body[data-page = "bowshock"] & { + background-image: url("/svg/glyph/bowshock.svg"); + } + + body[data-page = "bzipper"] & { + background-image: url("/svg/glyph/bzipper.svg"); + } + + body[data-page = "deltaWorld"] & { + background-image: url("/svg/glyph/deltaWorld.svg"); + } + + body[data-page = "eas"] & { + background-image: url("/svg/glyph/eas.svg"); + } + + body[data-page = "luma"] & { + background-image: url("/svg/glyph/luma.svg"); + } + + body[data-page = "pollex"] & { + background-image: url("/svg/glyph/pollex.svg"); + } + + body[data-page = "u8c"] & { + background-image: url("/svg/glyph/u8c.svg"); + } +} diff --git a/css/header.scss b/css/header.scss index 44b18a0..1b53bb7 100644 --- a/css/header.scss +++ b/css/header.scss @@ -1,210 +1,33 @@ #header { + $slideDuration: 0.5s; + + --hamburgerWidth: 2rem; + border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; - box-shadow: $shadow; - color: var(--pageHighlightColour); + box-shadow: $defaultShadow; height: calc(100vh + 1rem); - padding-bottom: 1rem; - position: absolute; - top: 0; - user-select: none; + overflow: hidden; + position: relative; 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; - mask-image: url("/svg/hamburger.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: cover; - position: absolute; - top: 1rem; - transition: background-color $navBarSlideDuration; - z-index: 255; - - &[data-navBarState = "Visible"] { - background-color: var(--textColour); - } - } - - #clickMe { - background-color: var(--pageHighlightColour); - height: 2rem; - mask-image: url("/image/clickMe.webp"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: cover; - position: absolute; - width: 16rem; - } - - @import "navBar"; - - #glyph { - 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; + @media (pointer: coarse) { + --hamburgerWidth: 4rem; } - @media (pointer: fine) { - #hamburger { - left: 1rem; - width: 2rem; - } + a { + cursor: pointer; + font-weight: bold; + text-decoration: underline; + text-decoration-color: #00000000; + transition: text-decoration-color 0.125s; + user-select: none; - #clickMe { - left: 4rem; - top: 1rem; + &:hover { + text-decoration-color: var(--textColour); } } - @media (pointer: coarse) { - #hamburger { - left: 50%; - transform: translateX(-50%); - width: 4rem; - } - - #clickMe { - left: calc(50% + 3rem); - top: 2rem; - } - } + @import "banner"; + @import "sideMenu"; } diff --git a/css/main.scss b/css/main.scss index 31312e4..08ed76c 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,11 +1,10 @@ @import "fonts"; -$achernarColour: #007B34; +$monospaceFont: "Fira Mono", "monospace"; -$headerHeight: calc(100vh + 1rem); -$navBarSlideDuration: 0.5s; +$defaultShadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);; -$shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);; +$separatorWidth: 0.25rem; :root { font-family: "Raleway", "sans-serif"; @@ -18,31 +17,39 @@ $shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);; box-sizing: border-box; } -#body { +body { + --backgroundColour: oklch( 20% 0.014800 253.71); + --foregroundColour: oklch( 25% 0.014800 253.71); + --textColour: oklch(100% 0 0); + background-color: var(--backgroundColour); color: var(--textColour); + font-size: 1.25em; z-index: -1; - &[data-theme = "Light"] { - --backgroundColour: oklch(100% 0 0); - --foregroundColour: oklch( 96.875% 0 0); - --textColour: oklch( 25% 0 0); + &.light { + --backgroundColour: oklch(96.875% 0 0); + --foregroundColour: oklch(93.750% 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); - } +a, a:visited { + color: var(--textColour); } -ol, ul { - list-style-type: none; +code { + font-family: $monospaceFont; } -li p::before { - content: "\2014\0020"; +ul { + list-style: none; + + li p::before { + content: "\2014\0020"; + } } @import "header.scss"; @import "page.scss"; +@import "footer.scss"; diff --git a/css/navBar.scss b/css/navBar.scss index 1ab49bd..9c4338e 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,97 +1,50 @@ #navBar { - box-shadow: $shadow; - color: var(--textColour); - display: flex; - gap: 1rem; - left: 0; - min-height: calc(100vh + 1rem); - padding: 1rem; - position: absolute; - transform: translateX(-100%); - transition: transform $navBarSlideDuration; - z-index: 127; + $gap: 1rem; - &[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); - } - } + align-items: center; + display: flex; + height: calc($gap * 2 + var(--hamburgerWidth)); + justify-content: space-between; + padding: $gap; + position: absolute; + top: 0; + width: 100%; section { - display: flex; - flex-direction: column; - gap: 0.5em; + display: flex; + gap: $gap; - p.heading { - text-align: center; + a { + text-decoration-color: #00000000; + transition: opacity $slideDuration, text-decoration-color 0.125s; - &::after { - background-color: var(--textColour); - border-radius: 0.25rem; - content: ""; - display: block; - height: 0.25rem; - margin-top: 0.5rem; - width: 100%; + @media (orientation: portrait) or (pointer: coarse) { + display: none; } - } - } - - #themeToggler { - bottom: 2rem; - position: absolute; - left: 50%; - transform: translateX(-50%); - } - @media (pointer: fine) { - backdrop-filter: blur(1rem); - background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); - padding-top: 4rem; - - @media (orientation: landscape) { - border-bottom-right-radius: 1rem; - border-top-right-radius: 1rem; - width: 50%; - } + &:hover { + text-decoration-color: var(--textColour); + } - @media (orientation: portrait) { - width: 100%; + &.hidden:not(#home) { + opacity: 0; + pointer-events: none; + } } } - @media (pointer: coarse) { - background-color: var(--backgroundColour); - flex-direction: column; - font-size: 4rem; - padding-top: 6rem; - width: 100%; - - - p.clickable, a { - text-align: center; - } + #hamburger { + aspect-ratio: 1; + background-color: var(--textColour); + cursor: pointer; + mask-image: url("/svg/hamburger.svg"); + mask-size: cover; + width: var(--hamburgerWidth); + } - p.heading::before { - background-color: var(--textColour); - border-radius: 0.25rem; - content: ""; - display: block; - height: 0.25rem; - margin-bottom: 0.5rem; - width: 100%; + body[data-page = "achernar"] & { + section a, #hamburger { + mix-blend-mode: difference; } } } diff --git a/css/page.scss b/css/page.scss index c0c26c9..c850071 100644 --- a/css/page.scss +++ b/css/page.scss @@ -1,92 +1,91 @@ #page { - margin: auto; - max-width: 72rem; - padding: 1rem; - padding-top: calc($headerHeight + 1rem); + $padding: 1rem; - p:not(.heading, #pageHeading, #footer p) { - line-height: 2em; - } + margin: auto; + max-width: 72rem; + padding: $padding; - p.link, a, a:visited { - color: var(--textColour); + a, a:visited { + cursor: pointer; + text-decoration: underline; } - em { - font-style: normal; - font-weight: bold; + h1 { + font-size: 2em; + font-weight: bold; + margin-bottom: 1rem; + width: 100%; + + &:nth-of-type(even) { + text-align: right; + } + + &::after { + background-color: var(--textColour); + border-radius: $separatorWidth; + content: ""; + display: block; + height: $separatorWidth; + margin-bottom: 1rem; + margin-top: $separatorWidth; + width: 100%; + }; } - span { - &.code { - background-color: var(--foregroundColour); - border-radius: 0.25rem; - font-family: "Fira Mono", "monospace"; - padding: 0.25rem; + section { + line-height: 2em; + max-width: calc(36rem - $padding); + width: 100%; - a { - font-weight: normal; + &:nth-of-type(odd) { + p.note { + text-align: right; } } - &.small { - font-size: 0.75em; - } - } + &:nth-of-type(even) { + margin-left: auto; - p.heading, #pageHeading { - font-family: "Martian Mono", "monospace"; - } + ol, ul { + margin-left: auto; + text-align: left + } + } - #pageHeading { - background-color: var(--foregroundColour); - border-radius: 1rem; - display: block; - font-size: 4em; - font-weight: bold; - margin: auto; - margin-bottom: 1rem; - padding: 1rem; - text-align: center; - - span.small { - font-size: 0.5em; + &.fullWidth { + max-width: 100%; } - } - section { - & + section { + & + h1 { margin-top: 1rem; } - &:nth-of-type(even) p.heading { - text-align: right; + p.note { + font-weight: bold; + + &::before { + content: "Note:\0020"; + } } - } - p.heading { - font-size: 2em; - font-weight: bold; - width: 100%; + code { + $padding: 0.25rem; - &::after { - background-color: var(--textColour); - border-radius: 0.25rem; - content: ""; - display: block; - height: 0.25rem; - margin-bottom: 1rem; - margin-top: 0.25rem; - width: 100%; + background-color: var(--foregroundColour); + border-radius: $padding; + padding: $padding; + } + + em { + font-style: normal; + font-weight: bold; } } x-image { - background-position: center; - background-repeat: no-repeat; - display: block; - position: relative; - width: 100%; + display: block; + position:relative; + width: 100%; &:nth-of-type(odd) { margin-right: auto; @@ -97,15 +96,13 @@ } img.blur { - filter: blur(1rem); + filter: blur(1rem) saturate(200%); position: absolute; - z-index: 1; width: 100%; } a { position: relative; - z-index: 1; img { border-radius: 1rem; @@ -117,4 +114,4 @@ } @import "footer"; -}
\ No newline at end of file +} diff --git a/css/sideMenu.scss b/css/sideMenu.scss new file mode 100644 index 0000000..9f57eab --- /dev/null +++ b/css/sideMenu.scss @@ -0,0 +1,86 @@ +#sideMenu { + backdrop-filter: blur(1rem); + -webkit-backdrop-filter: blur(1rem); + background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); + box-shadow: $defaultShadow; + display: flex; + flex-direction: column; + gap: 1rem; + height: calc(100vh - var(--hamburgerWidth) - 3rem); + justify-content: space-between; + left: 100%; + overflow: scroll; + padding: 1rem; + position: absolute; + top: calc(var(--hamburgerWidth) + 2rem); + transition: left $slideDuration; + width: 100vw; + z-index: 255; + + &.visible { + left: 0; + } + + @media (orientation: landscape) and (pointer: fine) { + border-bottom-left-radius: 1rem; + border-top-left-radius: 1rem; + width: 50vw; + + &.visible { + left: 50%; + } + } + + @media (pointer: coarse) { + border-style: solid; + border-width: $separatorWidth; + font-size: 2em; + } + + div.links { + display: flex; + gap: 1rem; + + @media (pointer: coarse) { + flex-direction: column; + } + + section { + $gap: 0.25rem; + + display: flex; + flex-direction: column; + gap: $gap; + + p { + text-align: center; + + &::after { + background-color: var(--textColour); + border-radius: calc($separatorWidth / 2); + content: ""; + display: block; + height: $separatorWidth; + margin-top: $gap; + width: 100%; + } + + @media (pointer: coarse) { + &::before { + background-color: var(--textColour); + border-radius: calc($separatorWidth / 2); + content: ""; + display: block; + height: $separatorWidth; + margin-top: $gap; + width: 100%; + } + } + } + } + } + + #themeToggler { + align-self: center; + } +} diff --git a/html/about.html b/html/achernar.html index c6d76a9..5ed376b 100644 --- a/html/about.html +++ b/html/achernar.html @@ -3,22 +3,25 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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">About | Achernar</title> + <title>Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="about" data-theme="Dark" id="body"> + <body data-page="achernar"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">About</p> + <h1 id="anchor.about">the future is now</h1> <section> <p><em>Achernar</em> is a small, indie development studio based in the Capital Region of Denmark. 🇩🇰</p> @@ -26,29 +29,52 @@ <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> + <h1 id="anchor.vision">vision</h1> + <section> <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> + <br> + <p>Currently, our roadmap is as follows:</p> + <br> + <ul> + <li> + <p>Complete the webservice before <em>autumn, 2024</em></p> + </li> + <li> + <p>Release our first game by <em>2024</em></p> + </li> + <li> + <p>Release early-access for Bowshock on Steam by <em>2025</em></p> + </li> + <li> + <p>Restructure to a normal sole proprietorship</p> + </li> + </ul> </section> + <h1 id="anchor.team">team</h1> + <section> - <p class="heading">Inception</p> + <p>As <em>Achernar</em> is currently registered as a <em>PMV</em> (lesser sole proprietorship), <em>Gabriel Bjørnager Jensen</em> is currently our only member.</p> + </section> + <h1 id="anchor.inception">inception</h1> + + <section> <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> + <p>Our domain – <code>achernar.dk</code> – 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 <code><a href="https://mandelbrot.dk">mandelbrot.dk</a></code> after I had managed to secure that domain.</p> <br> - <p><span class="code">achernar.dk</span> was then, in the mean time, used for hosting a few look-up references. This mostly served as my own notes for school – mainly mathematics, physics, and chemistry – but quickly grew unorganised and umaintained, although I did have plans to expand the lexicon.</p> + <p><code>achernar.dk</code> was then, in the mean time, used for hosting a few look-up references. This mostly served as my own notes for school – mainly mathematics, physics, and chemistry – but quickly grew unorganised and umaintained, although I did have plans to expand the lexicon.</p> <br> - <p>The idea of a company had started in the spring of 2020. At that time it would've been named after the binary system <em>Sheliak</em> (Bayer: <span class="code">β Lyræ</span>). But it was this idea that evolved into <em>Achernar</em>.</p> + <p>The idea of a company had started in the spring of 2020. At that time it would've been named after the binary system <em>Sheliak</em> (Bayer: <code>β Lyræ</code>). But it was this idea that evolved into <em>Achernar</em>.</p> </section> - <section> - <p class="heading">Credits</p> + <h1 id="anchor.credits">credits</h1> + <section class="fullWidth"> <p>Thanks to the following projects which make our webservice possible:</p> <br> <ul> @@ -92,7 +118,9 @@ <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/agbsum.html b/html/agbsum.html index ee9830f..f9503a3 100644 --- a/html/agbsum.html +++ b/html/agbsum.html @@ -3,22 +3,25 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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> + <title>agbsum | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="agbsum" data-theme="Dark" id="body"> + <body data-page="agbsum"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">agbsum</p> + <h1 id="anchor.about">agbsum</h1> <section> <p><em>agbsum</em> is a utility for patching AGB images.</p> @@ -26,7 +29,9 @@ <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/ax.html b/html/ax.html index 9a98eab..56a9a1a 100644 --- a/html/ax.html +++ b/html/ax.html @@ -3,36 +3,41 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>AX | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="ax" data-theme="Dark" id="body"> + <body data-page="ax"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Advanced X</p> + <h1 id ="anchor.about">Advanced X</h1> <section> <p><em>Advanced X</em> (or just <em>AX</em>) is a C library for developing applications for the <em>AGB</em> line of hardware.</p> </section> - <section> - <p class="heading">Status</p> + <h1 id="anchor.status">docs</h1> - <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> + <p>The development of <em>AX</em> is currently on hold to prioritise <a onclick="loadPage('luma');"><em>Luma</em></a> and <a onclick="loadpage('eas');"><em>eAS</em></a>.</p> </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/backspace.html b/html/backspace.html index de8e07a..5d777cc 100644 --- a/html/backspace.html +++ b/html/backspace.html @@ -3,26 +3,33 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Backspace | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="backspace" data-theme="Dark" id="body"> + <body data-page="backspace"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Comming Soon</p> + <section class="fullWidth"> + <p class="note">coming soon</p> + </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/benoit.html b/html/benoit.html index 0e90e9d..e3a611d 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -3,56 +3,61 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Benoit | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="benoit" data-theme="Dark" id="body"> + <body data-page="benoit"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Benoit</p> + <h1 id="anchor.about">benoit</h1> <section> <p><em>Benoit</em> is a Rust-written programme for visualising complex functions, e.g. <em>the Mandelbrot Set</em> and similar fractals.</p> <br> <x-image data-file="benoit_screenshot0"></x-image> <br> - <p>The project consists of the core <a href="https://crates.io/crates/benoit/"><span class="code">benoit</span></a> crate, from which the frontends <span class="code">benoit-cli</span> and (in the future) <span class="code">benoit-gui</span> derive.</p> + <p>The project consists of the core <a href="https://crates.io/crates/benoit/"><code>benoit</code></a> crate, from which the frontends <code>benoit-cli</code> and (in the future) <code>benoit-gui</code> derive.</p> </section> - <section> - <p class="heading">benoit-cli</p> + <h1 id="anchor.benoitCli">benoit-cli</h1> - <p>The <span class="code">benoit-cli</span> executable can render and animate using <a href="https://en.wikipedia.org/wiki/TOML/">TOML</a> files right from the commandline.</p> + <section> + <p>The <code>benoit-cli</code> executable can render and animate using <a href="https://en.wikipedia.org/wiki/TOML/">TOML</a> files right from the commandline.</p> <br> <x-image data-file="benoit_screenshot1"></x-image> </section> - <section> - <p class="heading">benoit-gui</p> + <h1 id="anchor.benoitGui">benoit-gui</h1> - <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> + <section> + <p>The <code>benoit-gui</code> 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> + <h1 id="anchor.docs">docs</h1> - <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> + <p>Documentation for the main library can be found on <a href="https://docs.rs/benoit/latest/benoit/"><code>docs.rs</code></a>.</p> </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/bowshock.html b/html/bowshock.html index d733129..4b71e5d 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -3,26 +3,33 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Bowshock | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="bowshock" data-theme="Dark" id="body"> + <body data-page="bowshock"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Coming Soon</p> + <section class="fullWidth"> + <p class="note">coming soon</p> + </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/bzipper.html b/html/bzipper.html index 1ff4daf..f67b6ef 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -3,38 +3,43 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>bzipper | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="bzipper" data-theme="Dark" id="body"> + <body data-page="bzipper"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">bzipper</p> + <h1 id ="anchor.about">bzipper</h1> <section> <p><em>bzipper</em> is a Rust crate for serialisation and deserialisation of binary streams.</p> <br> - <p>See more at <span class="code"><a href="https://crates.io/crates/bzipper/">crates.io</a></span>.</p> + <p>See more at <code><a href="https://crates.io/crates/bzipper/">crates.io</a></code>.</p> </section> - <section> - <p class="heading">Docs</p> + <h1 id="anchor.docs">docs</h1> - <p>See <a href="https://docs.rs/pollex/latest/pollex/"><span class="code">docs.rs</span></a> for documentation.</p> + <section> + <p>See <a href="https://docs.rs/pollex/latest/pollex/"><code>docs.rs</code></a> for documentation.</p> </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/deltaWorld.html b/html/deltaWorld.html index 26ba50f..d63597b 100644 --- a/html/deltaWorld.html +++ b/html/deltaWorld.html @@ -3,26 +3,33 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Delta World | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="deltaWorld" data-theme="Dark" id="body"> + <body data-page="deltaWorld"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Comming Soon</p> + <section class="fullWidth"> + <p class="note">coming soon</p> + </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/eas.html b/html/eas.html index b0f5317..f4f8518 100644 --- a/html/eas.html +++ b/html/eas.html @@ -3,36 +3,40 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>eAS | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="eas" data-theme="Dark" id="body"> + <body data-page="eas"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading"><span class="small">the </span>Embedded Assembler</p> + <h1 id ="anchor.about">the embedded assembler</h1> <section> - <p>The <em>Embedded Assembler</em> (or simply <em>eAS</em>) is an assembler for cross-compiling to embedded Arm</p> + <p>The <em>Embedded Assembler</em> (or simply <em>eAS</em>) is an assembler for cross-compiling to Arm ISAs.</p> </section> - <section> - <p class="heading">Status</p> + <h1 id="anchor.status">docs</h1> - <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> + <p>Like <a onclick="loadPage('luma');"><em>Luma</em></a>, the development of <em>eAS</em> is currently on hold in favour of the <a onclick="loadPage('pollex');"><em>Pollex</em></a> library, which will be used as a backend.</p> </section> - <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/luma.html b/html/luma.html index 2de6643..7eaef12 100644 --- a/html/luma.html +++ b/html/luma.html @@ -3,36 +3,43 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Luma | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="luma" data-theme="Dark" id="body"> + <body data-page="luma"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Luma</p> + <h1 id ="anchor.about">kuma</h1> <section> - <p><em>Luma</em> is an emulator for the <em>AGB</em> line of game consoles by Nintendo Co.</p> + <p><em>bzipper</em> is a Rust crate for serialisation and deserialisation of binary streams.</p> + <br> + <p>See more at <code><a href="https://crates.io/crates/bzipper/">crates.io</a></code>.</p> </section> - <section> - <p class="heading">Status</p> + <h1 id="anchor.docs">docs</h1> - <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> + <p>See <a href="https://docs.rs/pollex/latest/pollex/"><code>docs.rs</code></a> for documentation.</p> </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/pollex.html b/html/pollex.html index e8730f6..5e6b15b 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -3,38 +3,43 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>Pollex | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="pollex" data-theme="Dark" id="body"> + <body data-page="pollex"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">Pollex</p> + <h1 id ="anchor.about">pollex</h1> <section> <p><em>Pollex</em> is a Rust library for manipulating Arm ISA instructions.</p> <br> - <p>See more at <span class="code"><a href="https://crates.io/crates/pollex/">crates.io</a></span>.</p> + <p>See more at <code><a href="https://crates.io/crates/pollex/">crates.io</a></code>.</p> </section> - <section> - <p class="heading">Docs</p> + <h1 id="anchor.docs">docs</h1> - <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> + <p>As per usual, documentation for <em>Pollex</em> can be found on <a href="https://docs.rs/pollex/latest/pollex/"><code>docs.rs</code></a>.</p> </section> <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/html/u8c.html b/html/u8c.html index c703781..4d08a44 100644 --- a/html/u8c.html +++ b/html/u8c.html @@ -3,22 +3,25 @@ <head> <meta charset="UTF-8"> <meta name="darkreader-lock"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <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 | Achernar</title> + <title>u8c | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> <link href="/css/noScript.css" rel="stylesheet"> </noscript> + + <script src="/js/init.js" type="text/javascript"></script> </head> - <body data-page="u8c" data-theme="Dark" id="body"> + <body data-page="u8c"> <!--#include virtual="/include/header.shtml"--> <div id="page"> - <p id="pageHeading">u8c</p> + <h1 id ="anchor.about">u8c</h1> <section> <p><em>u8c</em> is a library for handling Unicode sequences in C.</p> @@ -26,7 +29,9 @@ <!--#include virtual="/include/footer.shtml"--> </div> - - <!--#include virtual="/include/initScripts.shtml"--> </body> + + <script type="text/javascript"> + init(); + </script> </html> diff --git a/include/footer.shtml b/include/footer.shtml index 328ecd3..878f228 100644 --- a/include/footer.shtml +++ b/include/footer.shtml @@ -1,14 +1,14 @@ <footer id="footer"> - <p id="footerHeading">Achernar</p> + <h1>achernar</h1> <table> <tbody> <tr> - <th>CVR</th> + <th>cvr</th> <td>44936429</td> </tr> <tr> - <th>E-mail</th> + <th>e-mail</th> <td><div id="emailAddress"></div></td> </tr> </tbody> @@ -16,5 +16,5 @@ <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/" rel="noopener noreferrer" target="_blank"><span class="code">mandelbrot.dk</span></a>.</p> + <p>This webservice can be cloned from <a href="https://mandelbrot.dk/achernar/" rel="noopener noreferrer" target="_blank"><code>mandelbrot.dk</code></a>.</p> </footer> diff --git a/include/header.shtml b/include/header.shtml index e291d9e..0d90402 100644 --- a/include/header.shtml +++ b/include/header.shtml @@ -1,38 +1,58 @@ <header id="header"> - <div id="hamburger" onclick="toggleNavBar();"></div> - <div id="clickMe"></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 id="banner"> + <div id="navBar"> + <section> + <a onclick="loadPage('achernar');">ACHERNAR</a> + </section> + + <section> + <a onclick="loadPage('benoit');">BENOIT</a> + <a onclick="loadPage('bowshock');">BOWSHOCK</a> + <a onclick="loadPage('deltaWorld');">DELTA·WORLD</a> + <a onclick="loadPage('eas');">eAS</a> + </section> + + <section> + <div id="hamburger" onclick="toggleSideMenu();"></div> + </section> + </div> + + <div id="glyph"></div> </div> - <div id="glyph"></div> + <div id="sideMenu"> + <div class="links"> + <section> + <p>ACHERNAR</p> + + <a onclick="loadPage('achernar', 'about');">ABOUT</a> + <a onclick="loadPage('achernar', 'vision');">VISION</a> + <a onclick="loadPage('achernar', 'team');">TEAM</a> + <a href="https://mandelbrot.dk" rel="noopener noreferrer" target="_blank">SOURCES</a> + </section> + + <section> + <p>GAMES</p> + + <a onclick="loadPage('bowshock');">BOWSHOCK</a> + <a onclick="loadPage('deltaWorld');">DELTA·WORLD</a> + </section> + + <section> + <p>PROJECTS</p> + + <a onclick="loadPage('agbsum');">AGBSUM</a> + <a onclick="loadPage('ax');">AX</a> + <a onclick="loadPage('backspace');">BACKSPACE</a> + <a onclick="loadPage('benoit');">BENOIT</a> + <a onclick="loadPage('bzipper');">BZIPPER</a> + <a onclick="loadPage('eas');">eAS</a> + <a onclick="loadPage('luma');">LUMA</a> + <a onclick="loadPage('pollex');">POLLEX</a> + <a onclick="loadPage('u8c');">U8C</a> + </section> + </div> + + <a id="themeToggler" onclick="toggleTheme();">TOGGLE THEME</a> + </div> </header> diff --git a/include/initScripts.shtml b/include/initScripts.shtml deleted file mode 100644 index d39597c..0000000 --- a/include/initScripts.shtml +++ /dev/null @@ -1,15 +0,0 @@ -<script src="/js/getTheme.js" type="text/javascript"></script> -<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() { - setTheme(getTheme()); - - initImages(); - })(); -</script> diff --git a/js/getTheme.ts b/js/getTheme.ts deleted file mode 100644 index 769ea3c..0000000 --- a/js/getTheme.ts +++ /dev/null @@ -1,13 +0,0 @@ -/// <reference path="setTheme.ts" /> - -function getTheme(): Theme { - let theme = Theme.Dark; - - try { - theme = JSON.parse(localStorage.getItem("theme")!); - } catch (e: any) { - console.log("invalid theme, using dark"); - } - - return theme; -} diff --git a/js/init.ts b/js/init.ts new file mode 100644 index 0000000..c306191 --- /dev/null +++ b/js/init.ts @@ -0,0 +1,13 @@ +/// <reference path="navigation.ts" /> +/// <reference path="page.ts" /> +/// <reference path="theme.ts" /> + +function init() { + window.addEventListener("popstate", (_e) => { + location.reload(); + }); + + loadTheme(); + + initImages(); +} diff --git a/js/initImages.ts b/js/initImages.ts deleted file mode 100644 index 3e6a175..0000000 --- a/js/initImages.ts +++ /dev/null @@ -1,29 +0,0 @@ -function initImages() { - let page = document.getElementById("page")!; - - let image_list = Array.from(page.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 = "/image/source/" + file + ".webp"; - let thumbnail_url = "/image/thumbnail/" + file + ".avif"; - - let blur_element = document.createElement("img"); - blur_element.setAttribute("class", "blur"); - blur_element.setAttribute("src", thumbnail_url); - - image.appendChild(blur_element); - - let image_element = document.createElement("img"); - image_element.setAttribute("src", thumbnail_url); - - let hyperlink_element = document.createElement("a"); - hyperlink_element.setAttribute("href", source_url); - hyperlink_element.setAttribute("rel", "noopener noreferrer"); - hyperlink_element.setAttribute("target", "_blank"); - hyperlink_element.appendChild(image_element); - - image.appendChild(hyperlink_element); - } -} diff --git a/js/loadPage.ts b/js/loadPage.ts deleted file mode 100644 index ebf1f62..0000000 --- a/js/loadPage.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// <reference path="initImages.ts" /> - -async function loadPage(name: string) { - console.log("loading page `" + name + "`") - - let url = `/html/${name}.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 page = document.getElementById("page")!; - - let new_title = dom.getElementById("title")!; - let new_page = dom.getElementById("page")!; - - title.replaceWith(new_title); - body.setAttribute("data-page", name); - page.replaceWith(new_page); - - initImages(); -} diff --git a/js/navigation.ts b/js/navigation.ts new file mode 100644 index 0000000..1e9ec81 --- /dev/null +++ b/js/navigation.ts @@ -0,0 +1,18 @@ +function toggleSideMenu() { + let navBar = document.getElementById("navBar"); + let sideMenu = document.getElementById("sideMenu"); + + if (!navBar) { + throw new Error("unable to find navigation bar"); + } + + if (!sideMenu) { + throw new Error("unable to find side menu"); + } + + sideMenu.classList.toggle("visible"); + + for (let link of navBar.getElementsByTagName("a")) { + link.classList.toggle("hidden"); + } +} diff --git a/js/page.ts b/js/page.ts new file mode 100644 index 0000000..5a98d13 --- /dev/null +++ b/js/page.ts @@ -0,0 +1,116 @@ +async function loadPage(page_name: string, anchor?: string) { + window.scroll({ + top: 0, + left: 0, + behavior: "smooth", + }); + + console.log(`loading page \`${page_name}\``); + + let url = `/html/${page_name}.html`; + console.log(`note: page is at "${url}"`); + + window.history.pushState(page_name, "", 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 titles = document.getElementsByTagName("title"); + let bodies = document.getElementsByTagName("body"); + let page = document.getElementById("page")!; + + if (titles.length < 0x1) { + throw new Error("unable to find title"); + } + + if (bodies.length < 0x1) { + throw new Error("unable to find body"); + } + + if (!page) { + throw new Error("unable to find page element"); + } + + let newTitles = dom.getElementsByTagName("title"); + let newPage = dom.getElementById("page"); + + if (newTitles.length < 0x1) { + throw new Error("unable to find new title"); + } + + if (!newPage) { + throw new Error("unable to find new page element"); + } + + titles[0x0].replaceWith(newTitles[0x0]); + bodies[0x0].setAttribute("data-page", page_name); + page.replaceWith(newPage); + + initImages(); + + if (anchor) { + console.log(`going to anchor \`${anchor}\``); + + anchor = `anchor.${anchor}`; + + console.log(`note: anchor has id "${anchor}"`); + + let anchor_element = document.getElementById(anchor); + + if (!anchor_element) { + throw new Error(`unable to find anchor "${anchor}"`); + } + + anchor_element.scrollIntoView({ + behavior: "smooth", + }); + } +} + +function initImages() { + let page = document.getElementById("page"); + + if (!page) { + throw new Error("unable to find page"); + } + + let imageList = Array.from(page.getElementsByTagName("x-image")); + + for (let image of imageList) { + let file = image.getAttribute("data-file"); + + if (!file) { + throw new Error("file not set for image element") + } + + console.log("initialising image that links to \"" + file + "\""); + + let sourceUrl = "/image/source/" + file + ".webp"; + let thumbnailUrl = "/image/thumbnail/" + file + ".avif"; + + let blurElement = document.createElement("img"); + blurElement.setAttribute("class", "blur"); + blurElement.setAttribute("src", thumbnailUrl); + + let hyperlinkElement = document.createElement("a"); + hyperlinkElement.setAttribute("href", sourceUrl); + hyperlinkElement.setAttribute("rel", "noopener noreferrer"); + hyperlinkElement.setAttribute("target", "_blank"); + + let image_element = document.createElement("img"); + image_element.setAttribute("src", thumbnailUrl); + + hyperlinkElement.appendChild(image_element); + + image.appendChild(blurElement); + image.appendChild(hyperlinkElement); + } +} diff --git a/js/setNavBarState.ts b/js/setNavBarState.ts deleted file mode 100644 index cfcc509..0000000 --- a/js/setNavBarState.ts +++ /dev/null @@ -1,14 +0,0 @@ -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 deleted file mode 100644 index 25debba..0000000 --- a/js/setTheme.ts +++ /dev/null @@ -1,24 +0,0 @@ -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[theme]); - - localStorage.setItem("theme", JSON.stringify(theme)); -} diff --git a/js/theme.ts b/js/theme.ts new file mode 100644 index 0000000..36959bc --- /dev/null +++ b/js/theme.ts @@ -0,0 +1,51 @@ +const DEFAULT_THEME = "dark"; + +function toggleTheme() { + let bodies = document.getElementsByTagName("body"); + + if (!bodies) { + throw new Error("unable to find body"); + } + + let theme = "light"; + + if (bodies[0x0].classList.contains("light")) { + theme = "dark"; + } + + console.log("setting theme to `" + theme + "`"); + + bodies[0x0].classList.toggle("light"); + localStorage.setItem("theme", theme); +} + +function loadTheme() { + let theme = localStorage.getItem("theme"); + + if (!theme) { + console.log("theme not set, using default"); + theme = DEFAULT_THEME; + } + + switch (theme) { + case "dark": + // We assume this theme in our stylesheets. + break; + + case "light": + let bodies = document.getElementsByTagName("body"); + + if (!bodies) { + throw new Error("unable to find body"); + } + + bodies[0x0].classList.add("light"); + break; + + default: + console.log(`invalid theme \"${theme}\", using default`); + //theme = DEFAULT_THEME; // Redundant now. + + break; + } +} diff --git a/js/toggleNavBar.ts b/js/toggleNavBar.ts deleted file mode 100644 index 329a223..0000000 --- a/js/toggleNavBar.ts +++ /dev/null @@ -1,15 +0,0 @@ -/// <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 deleted file mode 100644 index b5514d2..0000000 --- a/js/toggleTheme.ts +++ /dev/null @@ -1,14 +0,0 @@ -/// <reference path="getTheme.ts" /> -/// <reference path="setTheme.ts" /> - -function toggleTheme() { - let theme = getTheme(); - - if (theme == Theme.Light) { - theme = Theme.Dark; - } else if (Theme.Dark) { - theme = Theme.Light; - } - - setTheme(theme); -} @@ -51,10 +51,4 @@ make_icon "svg/achernar-icon.svg" make_stylesheet "main" make_stylesheet "noScript" -make_script "getTheme" -make_script "initImages" -make_script "loadPage" -make_script "setNavBarState" -make_script "setTheme" -make_script "toggleNavBar" -make_script "toggleTheme" +make_script "init" diff --git a/svg/achernar.svg b/svg/achernar.svg index 238dd6f..f31bcab 100644 --- a/svg/achernar.svg +++ b/svg/achernar.svg @@ -1,8 +1,4 @@ <svg height="112" width="336" xmlns="http://www.w3.org/2000/svg"> - <clipPath id="clip0"> - <polygon points="68,64 80,64 80,96 68,96" /> - </clipPath> - <mask id="wordmark"> <polygon fill="white" points="24,16 72,16 80,24 80,48 64,48 64,40 32,40 32,48 16,48 16,24" /> <circle cx="24" cy="24" fill="white" r="8" /> diff --git a/svg/glyph/achernar.svg b/svg/glyph/achernar.svg index bc59aa5..abdc855 100644 --- a/svg/glyph/achernar.svg +++ b/svg/glyph/achernar.svg @@ -1,8 +1,4 @@ <svg height="80" width="304" xmlns="http://www.w3.org/2000/svg"> - <clipPath id="clip0"> - <polygon points="52,48 64,48 64,80 52,80" /> - </clipPath> - <mask id="glyph"> <polygon fill="white" points="8,0 56,0 64,8 64,32 48,32 48,24 16,24 16,32 0,32 0,8" /> <circle cx="8" cy="8" fill="white" r="8" /> diff --git a/svg/hamburger.svg b/svg/hamburger.svg index bb187d5..41b1c34 100644 --- a/svg/hamburger.svg +++ b/svg/hamburger.svg @@ -1,9 +1,9 @@ <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg"> - <mask id="wordmark"> + <mask id="glyph"> <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" /> + <rect fill="#FFFFFF" mask="url(#glyph)" height="100%" width="100%" x="0" y="0" /> </svg> |
