diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | css/banner.scss | 30 | ||||
| -rw-r--r-- | css/glyph.scss | 32 | ||||
| -rw-r--r-- | css/header.scss | 1 | ||||
| -rw-r--r-- | css/main.scss | 2 | ||||
| -rw-r--r-- | css/navBar.scss | 35 | ||||
| -rw-r--r-- | css/page.scss | 7 | ||||
| -rw-r--r-- | css/sideMenu.scss | 2 | ||||
| -rw-r--r-- | html/achernar.html | 14 | ||||
| -rw-r--r-- | html/deltaWorld.html | 2 | ||||
| -rw-r--r-- | include/header.shtml | 2 | ||||
| -rw-r--r-- | svg/glyph/deltaWorld.svg | 8 |
12 files changed, 89 insertions, 52 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d6642a..332ee29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 7.2 + +* Elaborate pages +* Update styling +* Add Delta World glyph + ## 7.1 * Fix vertex diff --git a/css/banner.scss b/css/banner.scss index 36154e6..e1256d2 100644 --- a/css/banner.scss +++ b/css/banner.scss @@ -1,6 +1,4 @@ #banner { - --textColour: var(--bannerHighlightColour); - align-items: center; background-size: cover; display: flex; @@ -13,7 +11,7 @@ width: 100%; body[data-page = "achernar"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #007B34; @@ -23,67 +21,67 @@ } body[data-page = "agbsum"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #422984; } body[data-page = "ax"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #422984; } body[data-page = "backspace"] & { - --bannerHighlightColour: var(--textColour); + --textColour: #000000; - background-color: var(--backgroundColour); + background-color: #FFFFFF; } body[data-page = "benoit"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-image: url("/svg/benoit-background.svg"); } body[data-page = "bowshock"] & { - --bannerHighlightColour: #FFEEE0; + --textColour: #FFEEE0; background-color: #B61833; } body[data-page = "bzipper"] & { - --bannerHighlightColour: #B4202D; + --textColour: #B4202D; background-color: #FFFFFF; } body[data-page = "deltaWorld"] & { - --bannerHighlightColour: var(--textColour); + --textColour: #FFFFFF; - background-color: var(--backgroundColour); + background-color: #000000; } body[data-page = "eas"] & { - --bannerHighlightColour: #00291B; + --textColour: #00291B; background-color: #01CD93; } body[data-page = "luma"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #6051B2; } body[data-page = "pollex"] & { - --bannerHighlightColour: #FFFFFF; + --textColour: #FFFFFF; background-color: #4D4084; } body[data-page = "u8c"] & { - --bannerHighlightColour: #A9E13D; + --textColour: #A9E13D; background-color: #444747; } diff --git a/css/glyph.scss b/css/glyph.scss index c1f6235..50297f0 100644 --- a/css/glyph.scss +++ b/css/glyph.scss @@ -1,21 +1,28 @@ #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; + aspect-ratio: 1; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; + 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 not (prefers-reduced-motion) { + background-image: url("/image/achernarPixelated.webp"); + height: floor(calc($pixelWIdth * 42)); + transition-timing-function: steps(4); + transition: transform 0.125s; + width: floor(calc($pixelWIdth * 154)); - @media (aspect-ratio < 1) { - transform: rotate(0.25turn); + @media (aspect-ratio < 1) { + transform: rotate(0.25turn); + } + } + + @media (prefers-reduced-motion) { + background-image: url("/svg/glyph/achernar.svg"); } } @@ -45,6 +52,7 @@ body[data-page = "deltaWorld"] & { background-image: url("/svg/glyph/deltaWorld.svg"); + filter: drop-shadow(0 0 calc(100vmin / 128) var(--textColour)); } body[data-page = "eas"] & { diff --git a/css/header.scss b/css/header.scss index 1b53bb7..c6c0213 100644 --- a/css/header.scss +++ b/css/header.scss @@ -5,7 +5,6 @@ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; - box-shadow: $defaultShadow; height: calc(100vh + 1rem); overflow: hidden; position: relative; diff --git a/css/main.scss b/css/main.scss index 08ed76c..6f4025d 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,8 +2,6 @@ $monospaceFont: "Fira Mono", "monospace"; -$defaultShadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);; - $separatorWidth: 0.25rem; :root { diff --git a/css/navBar.scss b/css/navBar.scss index 9c4338e..9eba669 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -12,8 +12,17 @@ section { display: flex; + flex: 1; gap: $gap; + &:first-of-type { + justify-content: start; + } + + &:last-of-type { + justify-content: end; + } + a { text-decoration-color: #00000000; transition: opacity $slideDuration, text-decoration-color 0.125s; @@ -31,20 +40,22 @@ pointer-events: none; } } - } - #hamburger { - aspect-ratio: 1; - background-color: var(--textColour); - cursor: pointer; - mask-image: url("/svg/hamburger.svg"); - mask-size: cover; - width: var(--hamburgerWidth); - } + #hamburger { + aspect-ratio: 1; + background-color: var(--textColour); + cursor: pointer; + mask-image: url("/svg/hamburger.svg"); + mask-size: cover; + width: var(--hamburgerWidth); + } - body[data-page = "achernar"] & { - section a, #hamburger { - mix-blend-mode: difference; + body[data-page = "achernar"] & { + a, div { + @media not (prefers-reduced-motion) { + mix-blend-mode: difference; + } + } } } } diff --git a/css/page.scss b/css/page.scss index c850071..13c0aa2 100644 --- a/css/page.scss +++ b/css/page.scss @@ -80,6 +80,13 @@ font-style: normal; font-weight: bold; } + + ul { + background-color: var(--foregroundColour); + border-radius: 1rem; + padding: 1rem; + width: 100%; + } } x-image { diff --git a/css/sideMenu.scss b/css/sideMenu.scss index 9f57eab..b9c0614 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -2,7 +2,7 @@ backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); - box-shadow: $defaultShadow; + box-shadow: 0 0 1rem color-mix(in srgb, black, transparent 50%);; display: flex; flex-direction: column; gap: 1rem; diff --git a/html/achernar.html b/html/achernar.html index 5ed376b..09711d6 100644 --- a/html/achernar.html +++ b/html/achernar.html @@ -24,17 +24,19 @@ <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> + <p><em>Achernar</em> is a european indie development studio based in the Capital Region of Denmark. 🇩🇰</p> <br> - <p>We develop open-source software, including video games and more productive software. We work with embedded systems as well as hosted ones.</p> + <p>We aim to develop high-quality video games and software alike, and we believe that all technologies should be for humanity as a whole. We therefore publish all relavent source code for our products.</p> + + <p class="note">See footer for contact information.</p> </section> <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> + <p>The goal of <em>Achernar</em> is to promote modern and robust software for everyone. In other words, our vision is to develop a human and clean industry and community for technology.</p> <br> - <p>In other words, our vision is to develop a human and clean industry and community for technology.</p> + <p>We believe in a society free of patents, and as such we release our scientific software in open-source form. For our games, we try to keep the base engine as open as possible whilst still keeping in mind that they yield our main income.</p> <br> <p>Currently, our roadmap is as follows:</p> <br> @@ -43,7 +45,7 @@ <p>Complete the webservice before <em>autumn, 2024</em></p> </li> <li> - <p>Release our first game by <em>2024</em></p> + <p>Release our first game by <em>2024</em>, including basic merchandise in some form</p> </li> <li> <p>Release early-access for Bowshock on Steam by <em>2025</em></p> @@ -63,7 +65,7 @@ <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> + <p><em>Achernar</em> was incorporated on the first july of 2024 by current sole proprietor <em>Gabriel Bjørnager Jensen</em>.</p> <br> <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> diff --git a/html/deltaWorld.html b/html/deltaWorld.html index d63597b..10bcf5f 100644 --- a/html/deltaWorld.html +++ b/html/deltaWorld.html @@ -7,7 +7,7 @@ <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>Delta World | Achernar</title> + <title>Delta·World | Achernar</title> <link href="/css/main.css" rel="stylesheet"> <noscript> diff --git a/include/header.shtml b/include/header.shtml index 0d90402..77168d4 100644 --- a/include/header.shtml +++ b/include/header.shtml @@ -2,7 +2,7 @@ <div id="banner"> <div id="navBar"> <section> - <a onclick="loadPage('achernar');">ACHERNAR</a> + <a id="home" onclick="loadPage('achernar');">ACHERNAR</a> </section> <section> diff --git a/svg/glyph/deltaWorld.svg b/svg/glyph/deltaWorld.svg new file mode 100644 index 0000000..cf40682 --- /dev/null +++ b/svg/glyph/deltaWorld.svg @@ -0,0 +1,8 @@ +<svg height="96" width="96" xmlns="http://www.w3.org/2000/svg"> + <mask id="glyph"> + <polygon fill="white" points="48,0 6.430780618,72 89.569219382,72" /> + <polygon fill="black" points="48,32 34.143593539,56 61.856406461,56" /> + </mask> + + <rect fill="#FFFFFF" height="100%" mask="url(#glyph)" width="100%" x="0" y="0" /> +</svg> |
