diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | css/fonts.scss | 11 | ||||
| -rw-r--r-- | css/footer.scss | 59 | ||||
| -rw-r--r-- | css/header.scss (renamed from css/frontPage.scss) | 40 | ||||
| -rw-r--r-- | css/main.scss | 6 | ||||
| -rw-r--r-- | css/navBar.scss | 44 | ||||
| -rw-r--r-- | css/page.scss (renamed from css/content.scss) | 63 | ||||
| -rw-r--r-- | html/about.html | 9 | ||||
| -rw-r--r-- | html/agbsum.html | 4 | ||||
| -rw-r--r-- | html/ax.html | 4 | ||||
| -rw-r--r-- | html/backspace.html | 4 | ||||
| -rw-r--r-- | html/benoit.html | 4 | ||||
| -rw-r--r-- | html/bowshock.html | 4 | ||||
| -rw-r--r-- | html/bzipper.html | 4 | ||||
| -rw-r--r-- | html/deltaWorld.html | 4 | ||||
| -rw-r--r-- | html/eas.html | 4 | ||||
| -rw-r--r-- | html/luma.html | 4 | ||||
| -rw-r--r-- | html/pollex.html | 4 | ||||
| -rw-r--r-- | html/u8c.html | 4 | ||||
| -rw-r--r-- | include/header.shtml (renamed from include/frontPage.shtml) | 5 | ||||
| -rw-r--r-- | js/loadPage.ts | 20 | ||||
| -rw-r--r-- | js/setNavBarState.ts | 2 |
22 files changed, 182 insertions, 127 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index f8b2395..1f757b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 6.0 + +* Add mobile styling +* Add hamburger note +* Update fonts + ## 5.2 * Open source link in new tab diff --git a/css/fonts.scss b/css/fonts.scss index db20257..33f1cee 100644 --- a/css/fonts.scss +++ b/css/fonts.scss @@ -45,17 +45,6 @@ } @font-face { - font-family: "Play"; - src: url("/font/Play-Regular.ttf"); -} - -@font-face { - font-family: "Play"; - font-weight: bold; - src: url("/font/Play-Bold.ttf"); -} - -@font-face { font-family: "Playfair Display"; src: url("/font/PlayfairDisplay-Regular.ttf"); } diff --git a/css/footer.scss b/css/footer.scss new file mode 100644 index 0000000..a8a389f --- /dev/null +++ b/css/footer.scss @@ -0,0 +1,59 @@ +#footer { + background-color: var(--foregroundColour); + border-radius: 1rem; + font-family: "Martian Mono", "monospace"; + font-size: 0.75em; + line-height: 1em; + margin-top: 1rem; + padding: 1rem; + + .separator { + background-color: var(--textColour); + border-radius: 0.125rem; + height: 0.25rem; + margin: 1rem auto; + width: 100%; + } + + #footerHeading { + font-size: 2em; + font-weight: bold; + } + + .obfuscatedText { + background-color: var(--textColour); + height: 1rem; + image-rendering: pixelated; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + width: 100%; + } + + img { + display: block; + margin: auto; + } + + table { + border-collapse: collapse; + + tr { + th, td { + line-height: 2em; + } + + th { + text-align: left; + + &::before { + content: "\00B7\0020"; + } + } + + td { + padding-left: 2rem; + } + } + } +} diff --git a/css/frontPage.scss b/css/header.scss index 9ed00f4..44b18a0 100644 --- a/css/frontPage.scss +++ b/css/header.scss @@ -1,4 +1,4 @@ -#frontPage { +#header { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; box-shadow: $shadow; @@ -135,7 +135,6 @@ aspect-ratio: 1; background-color: var(--pageHighlightColour); cursor: pointer; - left: 1rem; mask-image: url("/svg/hamburger.svg"); mask-position: center; mask-repeat: no-repeat; @@ -143,7 +142,6 @@ position: absolute; top: 1rem; transition: background-color $navBarSlideDuration; - width: 2rem; z-index: 255; &[data-navBarState = "Visible"] { @@ -151,6 +149,17 @@ } } + #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 { @@ -173,4 +182,29 @@ font-size: 4em; font-weight: bold; } + + @media (pointer: fine) { + #hamburger { + left: 1rem; + width: 2rem; + } + + #clickMe { + left: 4rem; + top: 1rem; + } + } + + @media (pointer: coarse) { + #hamburger { + left: 50%; + transform: translateX(-50%); + width: 4rem; + } + + #clickMe { + left: calc(50% + 3rem); + top: 2rem; + } + } } diff --git a/css/main.scss b/css/main.scss index 983c4ad..31312e4 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,7 +2,7 @@ $achernarColour: #007B34; -$frontPageHeight: calc(100vh + 1rem); +$headerHeight: calc(100vh + 1rem); $navBarSlideDuration: 0.5s; $shadow: 0 0 1rem color-mix(in srgb, black, transparent 75%);; @@ -44,5 +44,5 @@ li p::before { content: "\2014\0020"; } -@import "frontPage.scss"; -@import "content.scss"; +@import "header.scss"; +@import "page.scss"; diff --git a/css/navBar.scss b/css/navBar.scss index a915415..1ab49bd 100644 --- a/css/navBar.scss +++ b/css/navBar.scss @@ -1,6 +1,4 @@ #navBar { - backdrop-filter: blur(1rem); - background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%); box-shadow: $shadow; color: var(--textColour); display: flex; @@ -8,11 +6,9 @@ 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"] { @@ -60,12 +56,42 @@ transform: translateX(-50%); } - @media (orientation: landscape) { - border-bottom-right-radius: 1rem; - border-top-right-radius: 1rem; + @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%; + } + + @media (orientation: portrait) { + width: 100%; + } } - @media (orientation: portrait) { - width: 100%; + @media (pointer: coarse) { + background-color: var(--backgroundColour); + flex-direction: column; + font-size: 4rem; + padding-top: 6rem; + width: 100%; + + + p.clickable, a { + text-align: center; + } + + p.heading::before { + background-color: var(--textColour); + border-radius: 0.25rem; + content: ""; + display: block; + height: 0.25rem; + margin-bottom: 0.5rem; + width: 100%; + } } } diff --git a/css/content.scss b/css/page.scss index c6aa6b3..5017dcc 100644 --- a/css/content.scss +++ b/css/page.scss @@ -1,8 +1,8 @@ -#content { +#page { margin: auto; max-width: 72rem; padding: 1rem; - padding-top: calc($frontPageHeight + 1rem); + padding-top: calc($headerHeight + 1rem); p:not(.heading, #contentHeading, #cloneNotice p) { line-height: 2em; @@ -116,62 +116,5 @@ } } - #footer { - background-color: var(--foregroundColour); - border-radius: 1rem; - font-family: "Martian Mono", "monospace"; - font-size: 0.75em; - image-rendering: pixelated; - margin-top: 1rem; - padding: 1rem; - - .separator { - background-color: var(--textColour); - border-radius: 0.125rem; - height: 0.25rem; - margin: 1rem auto; - width: 100%; - } - - #footerHeading { - font-size: 2em; - font-weight: bold; - } - - .obfuscatedText { - background-color: var(--textColour); - height: 1rem; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - width: 100%; - } - - img { - display: block; - margin: auto; - } - - table { - border-collapse: collapse; - - tr { - th, td { - line-height: 2em; - } - - th { - text-align: left; - - &::before { - content: "\00B7\0020"; - } - } - - td { - padding-left: 2rem; - } - } - } - } + @import "footer"; }
\ No newline at end of file diff --git a/html/about.html b/html/about.html index 1797a05..9a4a538 100644 --- a/html/about.html +++ b/html/about.html @@ -15,14 +15,14 @@ </head> <body data-page="about" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">About</p> <section> <p><em>Achernar</em> is a small 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> </section> @@ -82,9 +82,6 @@ <p>Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly: <a href="https://fonts.google.com/specimen/Montserrat/"><em>Montserrat</em></a></p> </li> <li> - <p>Jonas Hecksher: <a href="https://fonts.google.com/specimen/Play/"><em>Play</em></a></p> - </li> - <li> <p>Claus Eggers Sørensen: <a href="https://fonts.google.com/specimen/Playfair+Display/"><em>Playfair Display</em></a></p> </li> <li> diff --git a/html/agbsum.html b/html/agbsum.html index 92af5c4..6ea7d43 100644 --- a/html/agbsum.html +++ b/html/agbsum.html @@ -15,9 +15,9 @@ </head> <body data-page="agbsum" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">agbsum</p> <section> diff --git a/html/ax.html b/html/ax.html index fed2a2a..54987ce 100644 --- a/html/ax.html +++ b/html/ax.html @@ -15,9 +15,9 @@ </head> <body data-page="ax" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Advanced X</p> <section> diff --git a/html/backspace.html b/html/backspace.html index 6b35a90..2626921 100644 --- a/html/backspace.html +++ b/html/backspace.html @@ -15,9 +15,9 @@ </head> <body data-page="backspace" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Comming Soon</p> <!--#include virtual="/include/footer.shtml"--> diff --git a/html/benoit.html b/html/benoit.html index 7acd7a9..7e722a0 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -15,9 +15,9 @@ </head> <body data-page="benoit" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Benoit</p> <section> diff --git a/html/bowshock.html b/html/bowshock.html index bafdf78..588a7d0 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -15,9 +15,9 @@ </head> <body data-page="bowshock" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Coming Soon</p> <!--#include virtual="/include/footer.shtml"--> diff --git a/html/bzipper.html b/html/bzipper.html index 5bd7c37..bd85915 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -15,9 +15,9 @@ </head> <body data-page="bzipper" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">bzipper</p> <section> diff --git a/html/deltaWorld.html b/html/deltaWorld.html index 6570170..17fcbd2 100644 --- a/html/deltaWorld.html +++ b/html/deltaWorld.html @@ -15,9 +15,9 @@ </head> <body data-page="deltaWorld" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Comming Soon</p> <!--#include virtual="/include/footer.shtml"--> diff --git a/html/eas.html b/html/eas.html index e2b8ff7..457708d 100644 --- a/html/eas.html +++ b/html/eas.html @@ -15,9 +15,9 @@ </head> <body data-page="eas" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading"><span class="small">the </span>Embedded Assembler</p> <section> diff --git a/html/luma.html b/html/luma.html index bfd7953..e433e5e 100644 --- a/html/luma.html +++ b/html/luma.html @@ -15,9 +15,9 @@ </head> <body data-page="luma" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Luma</p> <section> diff --git a/html/pollex.html b/html/pollex.html index b2495e3..a60c186 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -15,9 +15,9 @@ </head> <body data-page="pollex" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">Pollex</p> <section> diff --git a/html/u8c.html b/html/u8c.html index 7f769db..b9efced 100644 --- a/html/u8c.html +++ b/html/u8c.html @@ -15,9 +15,9 @@ </head> <body data-page="u8c" data-theme="Dark" id="body"> - <!--#include virtual="/include/frontPage.shtml"--> + <!--#include virtual="/include/header.shtml"--> - <div id="content"> + <div id="page"> <p id="contentHeading">u8c</p> <section> diff --git a/include/frontPage.shtml b/include/header.shtml index 0915cda..e291d9e 100644 --- a/include/frontPage.shtml +++ b/include/header.shtml @@ -1,5 +1,6 @@ -<div id="frontPage"> +<header id="header"> <div id="hamburger" onclick="toggleNavBar();"></div> + <div id="clickMe"></div> <div data-state="Hidden" id="navBar"> <section> @@ -34,4 +35,4 @@ </div> <div id="glyph"></div> -</div> +</header> diff --git a/js/loadPage.ts b/js/loadPage.ts index 72bb124..ebf1f62 100644 --- a/js/loadPage.ts +++ b/js/loadPage.ts @@ -1,9 +1,9 @@ /// <reference path="initImages.ts" /> -async function loadPage(page: string) { - console.log("loading page `" + page + "`") +async function loadPage(name: string) { + console.log("loading page `" + name + "`") - let url = `/html/${page}.html`; + let url = `/html/${name}.html`; window.history.pushState("", "", url); let response = await fetch(url); @@ -17,16 +17,16 @@ async function loadPage(page: string) { 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 title = document.getElementById("title")!; + let body = document.getElementById("body")!; + let page = document.getElementById("page")!; - let new_title = dom.getElementById("title")!; - let new_content = dom.getElementById("content")!; + let new_title = dom.getElementById("title")!; + let new_page = dom.getElementById("page")!; title.replaceWith(new_title); - body.setAttribute("data-page", page); - content.replaceWith(new_content); + body.setAttribute("data-page", name); + page.replaceWith(new_page); initImages(); } diff --git a/js/setNavBarState.ts b/js/setNavBarState.ts index 04058f7..cfcc509 100644 --- a/js/setNavBarState.ts +++ b/js/setNavBarState.ts @@ -7,7 +7,7 @@ function setNavBarState(state: NavBarState) { console.log("setting navigation bar to `" + NavBarState[state] + "`"); let nav_bar = document.getElementById("navBar")!; - let hamburger = document.getElementById("hamburger")! + let hamburger = document.getElementById("hamburger")!; nav_bar.setAttribute("data-state", NavBarState[state]); hamburger.setAttribute("data-navBarState", NavBarState[state]); |