diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | css/content.scss | 19 | ||||
| -rw-r--r-- | css/navigationBar.scss | 92 | ||||
| -rw-r--r-- | html/about.html | 6 | ||||
| -rw-r--r-- | html/benoit.html | 4 | ||||
| -rw-r--r-- | html/bowshock.html | 10 | ||||
| -rw-r--r-- | html/bzipper.html | 6 | ||||
| -rw-r--r-- | html/eas.html | 6 | ||||
| -rw-r--r-- | html/luma.html | 4 | ||||
| -rw-r--r-- | html/pollex.html | 6 | ||||
| -rw-r--r-- | shtml/navigationBar.shtml | 7 | ||||
| -rw-r--r-- | svg/glyph/bzipper.svg | 4 |
12 files changed, 98 insertions, 72 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index d69f207..cbf2f80 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 1.0 + +* Rework navigation bar +* Fix `bzipper` glyph +* Fix `"initScripts.shtml"` not always being loaded + ## 0.0 * Add gitingore diff --git a/css/content.scss b/css/content.scss index bdac41c..03904a5 100644 --- a/css/content.scss +++ b/css/content.scss @@ -36,16 +36,15 @@ } #contentHeading { - background-color: $foregroundColour; - border-radius: 1rem; - display: block; - font-family: "Martian Mono", "monospace"; - font-size: 4rem; - font-weight: bold; - margin: auto; - margin-bottom: 1rem; - padding: 1rem; - text-align: center; + background-color: $foregroundColour; + border-radius: 1rem; + display: block; + font-size: 4rem; + font-weight: bold; + margin: auto; + margin-bottom: 1rem; + padding: 1rem; + text-align: center; span.small { font-size: 0.5em; diff --git a/css/navigationBar.scss b/css/navigationBar.scss index a8d6c10..4600437 100644 --- a/css/navigationBar.scss +++ b/css/navigationBar.scss @@ -1,52 +1,66 @@ #navigationBar { - align-items: center; - backdrop-filter: blur(1rem); - background-color: $textColour; - background-color: color-mix(in srgb, $textColour, transparent 75%); - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; - color: $backgroundColour; - display: flex; - gap: 0.25rem; - justify-content: center; - left: 50vw; - padding: 1rem; - position: fixed; - top: 100vh; - transform: translate(-50%, -1rem); - transition: 0.25s; - z-index: 1; - - &:hover { - background-color: $textColour; - transition: 0.25s; - transform: translate(-50%, -100%); + align-items: center; + background-color: #00000000; + display: flex; + gap: 1rem; + justify-content: center; + left: 50vw; + padding: 1rem; + position: absolute; + top: 0; + transform: translateX(-50%); + user-select: none; + width: 100vw; + z-index: 1; + + body.about & { + --foregroundColour: #FFFFFF; + } + + body.benoit & { + --foregroundColour: #FFFFFF; + } + + body.bowshock & { + --foregroundColour: #FFFFFF; + } + + body.bzipper & { + --foregroundColour: #B4202D; + } + + body.eas & { + --foregroundColour: #00291B; + } + + body.luma & { + --foregroundColour: #FFFFFF; + } + + body.pollex & { + --foregroundColour: #FFFFFF; } a { - font-weight: bold; - text-decoration: none; + color: var(--foregroundColour); + font-weight: bold; + text-decoration-color: #00000000; + transition: text-decoration-color 0.125s; - &, &:visited { - color: $backgroundColour; + &:hover { + cursor: pointer; + } - &:first-of-type { - color: $achernarColour; - } + &:hover { + text-decoration-color: var(--foregroundColour); + transition: text-decoration-color 0.125s; } } - .groupSeparator { - background-color: $backgroundColour; + .separator { + background-color: var(--foregroundColour); border-radius: 0.25rem; height: 0.25rem; - width: 0.75rem; - } - - .elementSeparator { - background-color: $backgroundColour; - border-radius: 100%; - height: 0.25rem; - width: 0.25rem; + width: 1rem; } }
\ No newline at end of file diff --git a/html/about.html b/html/about.html index e00d98d..6968cd3 100644 --- a/html/about.html +++ b/html/about.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>Achernar</title> + <title id="title">Achernar</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="about"> + <body class="about" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> @@ -45,5 +45,7 @@ <p>The idea of a company had started in the spring of 2020 – at that time having been named after the binary system <em>Sheliak</em> (Bayer: <span class="code">β Lyræ</span>).</p> </section> </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> </body> </html> diff --git a/html/benoit.html b/html/benoit.html index d0b5953..004b1ec 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>Benoit</title> + <title id="title">Benoit</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="benoit"> + <body class="benoit" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/bowshock.html b/html/bowshock.html index 2a50e54..f9d0d93 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -4,16 +4,20 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>Bowshock</title> + <title id="title">Bowshock</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="bowshock"> + <body class="bowshock" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> - <p id="glyph">TO BE ADDED</p> + <p id="glyph">COMING SOON</p> </div> + + <div id="content"></div> + + <!--#include virtual="/shtml/initScripts.shtml"--> </body> </html> diff --git a/html/bzipper.html b/html/bzipper.html index 20ac359..6ca7701 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>bzipper</title> + <title id="title">bzipper</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="bzipper"> + <body class="bzipper" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> @@ -23,5 +23,7 @@ <br> <p>See more at <span class="code"><a href="https://crates.io/crates/bzipper/">crates.io</a></span>.</p> </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> </body> </html> diff --git a/html/eas.html b/html/eas.html index 2058e65..f1f394b 100644 --- a/html/eas.html +++ b/html/eas.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>eAS</title> + <title id="title">eAS</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="eas"> + <body class="eas" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> @@ -19,5 +19,7 @@ <div id="content"> <p id="contentHeading"><span class="small">the </span>EMBEDDED ASSEMBLER</p> </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> </body> </html> diff --git a/html/luma.html b/html/luma.html index 01fc8ca..a1aedb6 100644 --- a/html/luma.html +++ b/html/luma.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>Luma</title> + <title id="title">Luma</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="luma"> + <body class="luma" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> diff --git a/html/pollex.html b/html/pollex.html index d472b2b..0296fef 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -4,12 +4,12 @@ <meta charset="UTF-8"> <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> - <title>Pollex</title> + <title id="title">Pollex</title> <link href="/css/main.css" rel="stylesheet"> </head> - <body class="pollex"> + <body class="pollex" id="body"> <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> @@ -19,5 +19,7 @@ <div id="content"> <p id="contentHeading">POLLEX</p> </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> </body> </html> diff --git a/shtml/navigationBar.shtml b/shtml/navigationBar.shtml index 3077027..902e6b1 100644 --- a/shtml/navigationBar.shtml +++ b/shtml/navigationBar.shtml @@ -1,15 +1,10 @@ <div id="navigationBar"> <a href="/html/about.html">ABOUT</a> - <div class="groupSeparator"></div> + <div class="separator"></div> <a href="/html/benoit.html">BENOIT</a> - <div class="elementSeparator"></div> <a href="/html/bowshock.html">BOWSHOCK</a> - <div class="elementSeparator"></div> <a href="/html/bzipper.html">BZIPPER</a> - <div class="elementSeparator"></div> <a href="/html/eas.html">eAS</a> - <div class="elementSeparator"></div> <a href="/html/luma.html">LUMA</a> - <div class="elementSeparator"></div> <a href="/html/pollex.html">POLLEX</a> </div> diff --git a/svg/glyph/bzipper.svg b/svg/glyph/bzipper.svg index 7670c3a..3af7bf9 100644 --- a/svg/glyph/bzipper.svg +++ b/svg/glyph/bzipper.svg @@ -1,6 +1,6 @@ -<svg height="72" width="72" xmlns="http://www.w3.org/2000/svg"> +<svg height="64" width="64" xmlns="http://www.w3.org/2000/svg"> <mask id="glyph"> - <polyline fill="none" points="4,12 4,4 62,4 18.970562748,60" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" /> + <polyline fill="none" points="4,12 4,4 60,4 20.970562748,60" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" /> <polyline fill="none" points="60,52 60,60 4,60 43.029437252,4" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" /> </mask> |
