diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | css/footer.scss | 15 | ||||
| -rw-r--r-- | css/glyph.scss | 16 | ||||
| -rw-r--r-- | css/header.scss | 1 | ||||
| -rw-r--r-- | css/navBar.scss | 4 | ||||
| -rw-r--r-- | css/sideMenu.scss | 9 | ||||
| -rw-r--r-- | include/footer.shtml | 9 | ||||
| -rw-r--r-- | js/main.ts | 13 | ||||
| -rw-r--r-- | js/page.ts (renamed from js/init.ts) | 11 |
9 files changed, 58 insertions, 26 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 471546d..01a1318 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 9.6 + +* Restructure scripts +* Rework Achernar banner +* Add SoMe links + ## 9.5 * Add tool tips diff --git a/css/footer.scss b/css/footer.scss index 8d0787b..9015abd 100644 --- a/css/footer.scss +++ b/css/footer.scss @@ -9,6 +9,7 @@ h1 { font-size: 2em; font-weight: bold; + text-align: center; &::after { background-color: var(--textColour); @@ -24,6 +25,8 @@ #cvrNumber { font-weight: bold; + margin: auto; + width: fit-content; } #emailAddress { @@ -40,4 +43,16 @@ max-width: calc(183em / 8); width: 100%; } + + #socials { + display: flex; + font-weight: bold; + gap: 1rem; + margin: auto; + width: fit-content; + + @media (orientation: portrait) { + flex-direction: column; + } + } } diff --git a/css/glyph.scss b/css/glyph.scss index d2dbce9..d547bc2 100644 --- a/css/glyph.scss +++ b/css/glyph.scss @@ -3,23 +3,27 @@ background-position: center; background-repeat: no-repeat; background-size: contain; - left: 50%; + left: 50vw; position: absolute; - top: 50%; + top: 50vh; transform: translate(-50%, -50%); width: 50vmin; body[data-page = "achernar"] & { $pixelWIdth: calc(100vmax / 256); + --glyphWidth: 154; + --glyphHeight: 42; + background-image: url("/image/achernarPixelated.webp"); - height: floor(calc($pixelWIdth * 42)); - width: floor(calc($pixelWIdth * 154)); + height: calc($pixelWIdth * var(--glyphHeight)); + width: calc($pixelWIdth * var(--glyphWidth)); @media (orientation: portrait) { + --glyphWidth: 90; + --glyphHeight: 74; + background-image: url("/image/achernarVerticalPixelated.webp"); - height: floor(calc($pixelWIdth * 90)); - width: floor(calc($pixelWIdth * 74)); } } diff --git a/css/header.scss b/css/header.scss index f30afb0..61f0ffd 100644 --- a/css/header.scss +++ b/css/header.scss @@ -1,4 +1,5 @@ #header { + $gap: 1rem; $hamburgerHeight: 2rem; $sideMenuToggleDuration: 0.5s; diff --git a/css/navBar.scss b/css/navBar.scss index b057673..32ec7bd 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -3,7 +3,7 @@ display: flex; height: calc(2rem + $hamburgerHeight); justify-content: space-between; - padding: 1rem; + padding: $gap; position: absolute; top: 0; width: 100%; @@ -17,7 +17,7 @@ section { display: flex; flex: 1; - gap: 1rem; + gap: $gap; justify-content: center; &:first-of-type { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index bf2a97a..68e0804 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -5,13 +5,12 @@ flex-direction: column; gap: 1rem; justify-content: space-between; - left: 100%; + left: 100vw; min-height: calc(100vh + 1rem); padding: 1rem; padding-bottom: 2rem; - padding-top: calc($hamburgerHeight + 1rem); + padding-top: calc($hamburgerHeight + $gap * 2); position: relative; - top: 0; width: 100%; z-index: 127; @@ -30,10 +29,10 @@ section.links { display: flex; - gap: 1rem; + gap: $gap; justify-content: end; max-width: $contentWidth; - padding: 1rem; + padding: 0 1rem; width: 100%; @media (orientation: portrait) { diff --git a/include/footer.shtml b/include/footer.shtml index b1156f6..84d0a75 100644 --- a/include/footer.shtml +++ b/include/footer.shtml @@ -1,11 +1,18 @@ <footer id="footer"> <h1>achernar</h1> - <p id="cvrNumber" title="Danish VAT number.">VAT: DK44936429</p> + <p id="cvrNumber" title="Danish VAT number.">vat: DK44936429</p> <br> <p>Communications can be done in English and Danish.</p> <br> <p>This webservice may be cloned from <a href="https://mandelbrot.dk/achernar/" rel="noopener noreferrer" target="_blank"><code>mandelbrot.dk</code></a>.</p> <br> <div class="center" id="emailAddress" title="Obfuscated email address."></div> + <br> + <h1>socials</h1> + + <div id="socials"> + <a href="https://www.instagram.com/primuseridani/" title="primuseridani">instagram</a> + <a href="https://x.com/PrimusEridani/" title="PrimusEridani">x</a> + </div> </footer> @@ -1,8 +1,19 @@ -/// <reference path="init.ts" /> /// <reference path="navigation.ts" /> +/// <reference path="page.ts" /> /// <reference path="theme.ts" /> namespace Ach { + export async function init() { + Ach.loadTheme(); + + Ach.initImages(); + Ach.initLinks(); + + window.addEventListener("popstate", (_e) => { + location.reload(); + }); + } + export function currentPage() { let body = Ach.getFirstElement(document, "body"); let page = body.getAttribute("data-page"); @@ -1,15 +1,4 @@ namespace Ach { - export async function init() { - Ach.loadTheme(); - - Ach.initImages(); - Ach.initLinks(); - - window.addEventListener("popstate", (_e) => { - location.reload(); - }); - } - export async function initImages() { let page = Ach.getOnlyElement(document, "page"); |