summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md6
-rw-r--r--css/glyph.scss6
-rw-r--r--css/header.scss9
-rw-r--r--css/navBar.scss6
-rw-r--r--css/page.scss7
-rw-r--r--css/sideMenu.scss4
-rw-r--r--html/bowshock.html2
-rw-r--r--html/deltaWorld.html2
-rw-r--r--svg/glyph/backspace.svg18
-rw-r--r--svg/glyph/bowshock.svg6
-rw-r--r--svg/logo/backspace.svg19
11 files changed, 60 insertions, 25 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77d0a78..4a08a96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Changelog
+## 9.3
+
+* Update touch screen styling
+* Update note styling
+* Add Backspace glyph
+
## 9.2
* Update contact email
diff --git a/css/glyph.scss b/css/glyph.scss
index f819298..d2dbce9 100644
--- a/css/glyph.scss
+++ b/css/glyph.scss
@@ -31,9 +31,9 @@
background-image: url("/svg/glyph/ax.svg");
}
-// body[data-page = "backspace"] & {
-// background-image: url("/svg/glyph/backspace.svg");
-// }
+ body[data-page = "backspace"] & {
+ background-image: url("/svg/glyph/backspace.svg");
+ }
body[data-page = "benoit"] & {
background-image: url("/svg/glyph/benoit.svg");
diff --git a/css/header.scss b/css/header.scss
index cd9d63b..f30afb0 100644
--- a/css/header.scss
+++ b/css/header.scss
@@ -1,7 +1,6 @@
#header {
- $slideDuration: 0.5s;
-
- --hamburgerHeight: 2rem;
+ $hamburgerHeight: 2rem;
+ $sideMenuToggleDuration: 0.5s;
background-color: var(--backgroundColour);
background-size: cover;
@@ -87,10 +86,6 @@
--textColour: #A9E13D;
}
- @media (pointer: coarse) {
- --hamburgerHeight: 4rem;
- }
-
p, a {
@media not (prefers-reduced-motion) {
transition-timing-function: ease-in-out;
diff --git a/css/navBar.scss b/css/navBar.scss
index f3fd58c..b057673 100644
--- a/css/navBar.scss
+++ b/css/navBar.scss
@@ -1,7 +1,7 @@
#navBar {
align-items: center;
display: flex;
- height: calc(2rem + var(--hamburgerHeight));
+ height: calc(2rem + $hamburgerHeight);
justify-content: space-between;
padding: 1rem;
position: absolute;
@@ -46,7 +46,7 @@
}
@media not (prefers-reduced-motion) {
- transition: opacity $slideDuration, text-decoration-color 0.125s;
+ transition: opacity $sideMenuToggleDuration, text-decoration-color 0.125s;
}
@media (orientation: portrait) or (pointer: coarse) {
@@ -64,7 +64,7 @@
aspect-ratio: 1;
background-color: var(--textColour);
cursor: pointer;
- height: var(--hamburgerHeight);
+ height: $hamburgerHeight;
mask-size: cover;
z-index: 255;
}
diff --git a/css/page.scss b/css/page.scss
index abe49e5..a087cab 100644
--- a/css/page.scss
+++ b/css/page.scss
@@ -56,11 +56,8 @@
}
p.note {
- background-color: var(--foregroundColour);
- border-radius: 1rem;
- font-weight: bold;
- padding: 1rem;
- text-align: center;
+ font-weight: bold;
+ text-align: center;
&::before {
content: "Note:\0020";
diff --git a/css/sideMenu.scss b/css/sideMenu.scss
index 59c93a3..bf2a97a 100644
--- a/css/sideMenu.scss
+++ b/css/sideMenu.scss
@@ -9,7 +9,7 @@
min-height: calc(100vh + 1rem);
padding: 1rem;
padding-bottom: 2rem;
- padding-top: calc(var(--hamburgerHeight) + 1rem);
+ padding-top: calc($hamburgerHeight + 1rem);
position: relative;
top: 0;
width: 100%;
@@ -20,7 +20,7 @@
}
@media (pointer: fine) and (not (prefers-reduced-motion)) {
- transition: left $slideDuration;
+ transition: left $sideMenuToggleDuration;
transition-timing-function: ease-in-out;
}
diff --git a/html/bowshock.html b/html/bowshock.html
index f3a117f..968fffa 100644
--- a/html/bowshock.html
+++ b/html/bowshock.html
@@ -25,7 +25,7 @@
<div id="page">
<section class="fullWidth">
- <p class="note">coming soon</p>
+ <p class="note">Coming soon.</p>
</section>
<!--#include virtual="/include/footer.shtml"-->
diff --git a/html/deltaWorld.html b/html/deltaWorld.html
index d1417d9..b0aba84 100644
--- a/html/deltaWorld.html
+++ b/html/deltaWorld.html
@@ -25,7 +25,7 @@
<div id="page">
<section class="fullWidth">
- <p class="note">coming soon</p>
+ <p class="note">Coming soon.</p>
</section>
<!--#include virtual="/include/footer.shtml"-->
diff --git a/svg/glyph/backspace.svg b/svg/glyph/backspace.svg
new file mode 100644
index 0000000..53d1496
--- /dev/null
+++ b/svg/glyph/backspace.svg
@@ -0,0 +1,18 @@
+<svg height="96" width="96" xmlns="http://www.w3.org/2000/svg">
+ <clipPath id="clip0">
+ <rect height="100%" width="50%" x="50%" y="0" />
+ </clipPath>
+
+ <mask id="glyph">
+ <polygon fill="white" points="48,0 48,48 14.058874503,24" />
+ <circle cx="48" cy="48" fill="black" r="12" />
+
+ <circle clip-path="url(#clip0)" cx="48" cy="48" fill="none" r="24" stroke="white" stroke-width="24" />
+
+ <!-- joints -->
+ <circle cx="48" cy="24" fill="white" r="12" />
+ <circle cx="48" cy="72" fill="white" r="12" />
+ </mask>
+
+ <rect fill="#FFFFFF" height="100%" mask="url(#glyph)" width="100%" x="0" y="0" />
+</svg>
diff --git a/svg/glyph/bowshock.svg b/svg/glyph/bowshock.svg
index 4e32322..915576f 100644
--- a/svg/glyph/bowshock.svg
+++ b/svg/glyph/bowshock.svg
@@ -1,4 +1,4 @@
-<svg height="72" width="60" xmlns="http://www.w3.org/2000/svg">
- <circle cx="30" cy="42" fill="none" r="24" stroke="#FFEEE0" stroke-width="12" />
- <circle cx="30" cy="30" fill="none" r="24" stroke="#0F0F0F" stroke-width="12" />
+<svg height="72" width="72" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="36" cy="42" fill="none" r="24" stroke="#FFEEE0" stroke-width="12" />
+ <circle cx="36" cy="30" fill="none" r="24" stroke="#0F0F0F" stroke-width="12" />
</svg>
diff --git a/svg/logo/backspace.svg b/svg/logo/backspace.svg
new file mode 100644
index 0000000..3998c7e
--- /dev/null
+++ b/svg/logo/backspace.svg
@@ -0,0 +1,19 @@
+<svg height="144" width="144" xmlns="http://www.w3.org/2000/svg">
+ <clipPath id="clip0">
+ <rect height="100%" width="50%" x="50%" y="0" />
+ </clipPath>
+
+ <mask id="glyph">
+ <polygon fill="white" points="72,24 72,72 38.058874503,48" />
+ <circle cx="72" cy="72" fill="black" r="12" />
+
+ <circle clip-path="url(#clip0)" cx="72" cy="72" fill="none" r="24" stroke="white" stroke-width="24" />
+
+ <!-- joints -->
+ <circle cx="72" cy="48" fill="white" r="12" />
+ <circle cx="72" cy="96" fill="white" r="12" />
+ </mask>
+
+ <rect fill="#000000" height="100%" width="100%" x="0" y="0" />
+ <rect fill="#FFFFFF" height="100%" mask="url(#glyph)" width="100%" x="0" y="0" />
+</svg>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 21:34:14 +0100