From f48524ce4fb976730759d0f8df453c856ae32a93 Mon Sep 17 00:00:00 2001
From: Cloudate9 <65006925+Cloudate9@users.noreply.github.com>
Date: Wed, 14 Feb 2024 09:59:56 -0800
Subject: [PATCH] Begin creation of the mobile site
---
src/assets/common.js | 3 +
src/assets/fontawesome/js/solid.js | 1 +
src/assets/fontawesome/js/solid.min.js | 2 +-
src/assets/styles.css | 229 ++++++++++++++-----------
4 files changed, 132 insertions(+), 103 deletions(-)
diff --git a/src/assets/common.js b/src/assets/common.js
index 0afb78b..8c3982d 100644
--- a/src/assets/common.js
+++ b/src/assets/common.js
@@ -41,6 +41,9 @@ customElements.define(
+
+
+
- HOME
- GET INVOLVED
diff --git a/src/assets/fontawesome/js/solid.js b/src/assets/fontawesome/js/solid.js
index c63cdcd..86e2ee3 100644
--- a/src/assets/fontawesome/js/solid.js
+++ b/src/assets/fontawesome/js/solid.js
@@ -275,6 +275,7 @@
}
var icons = {
+ "bars": [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"],
"bullhorn": [512, 512, [128226, 128363], "f0a1", "M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"],
"caret-down": [320, 512, [], "f0d7", "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"],
"caret-up": [320, 512, [], "f0d8", "M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"],
diff --git a/src/assets/fontawesome/js/solid.min.js b/src/assets/fontawesome/js/solid.min.js
index 36c9e67..d31cde1 100644
--- a/src/assets/fontawesome/js/solid.min.js
+++ b/src/assets/fontawesome/js/solid.min.js
@@ -3,4 +3,4 @@
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
-!function(){"use strict";var t={},r={};try{"undefined"!=typeof window&&(t=window),"undefined"!=typeof document&&(r=document)}catch(t){}var a,e,n,o,f,i=(t.navigator||{}).userAgent,s=void 0===i?"":i,l=t,c=r;l.document,!!c.documentElement&&!!c.head&&"function"==typeof c.addEventListener&&c.createElement,~s.indexOf("MSIE")||s.indexOf("Trident/");function u(t,r){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);r&&(e=e.filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable}))),a.push.apply(a,e)}return a}function d(t){for(var r=1;rt.length)&&(r=t.length);for(var a=0,e=new Array(r);a2&&void 0!==arguments[2]?arguments[2]:{}).skipHooks,e=void 0!==a&&a,n=I(r);"function"!=typeof D.hooks.addPack||e?D.styles[t]=d(d({},D.styles[t]||{}),n):D.hooks.addPack(t,I(r)),"fas"===t&&z("fa",r)}var T={"bullhorn":[512,512,[128226, 128363],"f0a1","M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"],"caret-down":[320,512,[],"f0d7","M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"],"caret-up":[320,512,[],"f0d8","M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"],"fire":[448,512,[128293],"f06d","M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"],"water":[576,512,[],"f773","M269.5 69.9c11.1-7.9 25.9-7.9 37 0C329 85.4 356.5 96 384 96c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 149.7 417 160 384 160c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4C42.8 92.6 61 83.5 75.3 71.6c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 85.2 165.1 96 192 96c27.5 0 55-10.6 77.5-26.1zm37 288C329 373.4 356.5 384 384 384c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 437.7 417 448 384 448c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7l0 0C136.7 373.2 165.1 384 192 384c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0zm0-144C329 229.4 356.5 240 384 240c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 293.7 417 304 384 304c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 229.2 165.1 240 192 240c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z"]};!function(t){try{for(var r=arguments.length,a=new Array(r>1?r-1:0),e=1;et.length)&&(r=t.length);for(var a=0,e=new Array(r);a2&&void 0!==arguments[2]?arguments[2]:{}).skipHooks,e=void 0!==a&&a,n=I(r);"function"!=typeof D.hooks.addPack||e?D.styles[t]=d(d({},D.styles[t]||{}),n):D.hooks.addPack(t,I(r)),"fas"===t&&z("fa",r)}var T={"bars":[448,512,["navicon"],"f0c9","M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"],"bullhorn":[512,512,[128226, 128363],"f0a1","M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"],"caret-down":[320,512,[],"f0d7","M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"],"caret-up":[320,512,[],"f0d8","M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"],"fire":[448,512,[128293],"f06d","M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"],"water":[576,512,[],"f773","M269.5 69.9c11.1-7.9 25.9-7.9 37 0C329 85.4 356.5 96 384 96c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 149.7 417 160 384 160c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4C42.8 92.6 61 83.5 75.3 71.6c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 85.2 165.1 96 192 96c27.5 0 55-10.6 77.5-26.1zm37 288C329 373.4 356.5 384 384 384c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 437.7 417 448 384 448c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7l0 0C136.7 373.2 165.1 384 192 384c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0zm0-144C329 229.4 356.5 240 384 240c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 293.7 417 304 384 304c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 229.2 165.1 240 192 240c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z"]};!function(t){try{for(var r=arguments.length,a=new Array(r>1?r-1:0),e=1;e ul {
- list-style: none;
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- /* No grid gap in favour of borders for each individual li */
- /* width of 70% to ensure some spacing between the logo and everything else */
- width: 70%;
- height: 100%;
- /* The nice and handy align left */
- margin: auto 0 auto auto;
+.nav__hamburger {
+ display: block;
+ margin: auto 3vw auto auto;
}
-nav > ul > li {
- /* The position: relative is important! Without this, the width 100% will not work for the nav dropdown*/
- position: relative;
- /*
- This specific border behaviour causes weird artifacting, but I think I prefer it this way.
- No specific reason why these border sizes were chose, just ensure that they are the same
- Update: After fixing some other styles, the artifacting seems to be mostly gone.
- */
- border-left: 0.15vw solid var(--border-color);
+nav > ul {
+ display: none;
}
-nav li:first-child {
- /* We don't want a left divider on the left most element */
- border-left: 0;
-}
+@media only screen and (min-width: 75em) {
+ .nav__hamburger {
+ display: none;
+ }
-nav li:last-child {
- /* Remove the left divider between the last and second last element as the last is expected to be a different colour */
- border-left: 0;
-}
+ nav > ul {
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ /* No grid gap in favour of borders for each individual li */
+ /* width of 70% to ensure some spacing between the logo and everything else */
+ width: 70%;
+ height: 100%;
+ /* The nice and handy align left */
+ margin: auto 0 auto auto;
+ }
-nav li:last-child > a {
- /* This is expected to be the donate button */
- background-color: var(--ecf-green);
-}
+ nav > ul > li {
+ /* The position: relative is important! Without this, the width 100% will not work for the nav dropdown*/
+ position: relative;
+ /*
+ This specific border behaviour causes weird artifacting, but I think I prefer it this way.
+ No specific reason why these border sizes were chose, just ensure that they are the same
+ Update: After fixing some other styles, the artifacting seems to be mostly gone.
+ */
+ border-left: 0.15vw solid var(--border-color);
+ }
-nav li:last-child > a:hover {
- /* This is expected to be the donate button */
- background-color: black;
-}
+ nav li:first-child {
+ /* We don't want a left divider on the left most element */
+ border-left: 0;
+ }
-nav > ul > li a {
- /* Just positioning for nav links */
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- color: black;
-}
+ nav li:last-child {
+ /* Remove the left divider between the last and second last element as the last is expected to be a different colour */
+ border-left: 0;
+ }
-nav li > a:hover {
- color: var(--ecf-green);
-}
+ nav li:last-child > a {
+ /* This is expected to be the donate button */
+ background-color: var(--ecf-green);
+ }
-nav > ul > li > a > .nav__current-indicator {
- position: absolute;
- /* We want the indicator to be at the bottom of the nav */
- bottom: 0;
- width: 100%;
- height: 1vh;
- background-color: var(--ecf-green);
-}
+ nav li:last-child > a:hover {
+ /* This is expected to be the donate button */
+ background-color: black;
+ }
-/* Some code to change the display of the up/down caret depending on whether it's parent is being hovered on. */
-nav .nav__about-caret > .fa-caret-up {
- display: none;
-}
+ nav > ul > li a {
+ /* Just positioning for nav links */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: black;
+ }
-nav li:hover > .nav-dropdown,
-nav li:hover .nav__about-caret > .fa-caret-up {
- display: block;
-}
+ nav li > a:hover {
+ color: var(--ecf-green);
+ }
-nav li:hover .nav__about-caret > .fa-caret-down {
- display: none;
-}
+ nav > ul > li > a > .nav__current-indicator {
+ position: absolute;
+ /* We want the indicator to be at the bottom of the nav */
+ bottom: 0;
+ width: 100%;
+ height: 1vh;
+ background-color: var(--ecf-green);
+ }
-/* Some stuff to affect the display of the dropdown/caret icon */
-.nav-dropdown {
- display: none;
- position: absolute;
- width: 100%;
-}
+ /* Some code to change the display of the up/down caret depending on whether it's parent is being hovered on. */
+ nav .nav__about-caret > .fa-caret-up {
+ display: none;
+ }
-/*
-We use separate elements for border and content because we need them to be a different colour
-While the border is white, the gap between the content isn't.
-Trying to put these two requirements in the same element would be a pain, and it's probably just easier to use two divs.
-This also has the added benefit of still showing the dropdown contents even when the mouse is slightly outside of it.
-*/
-.nav-dropdown__border {
- display: flex;
- flex-direction: column;
- padding: 0 0.75vw;
- background-color: white;
-}
+ nav li:hover > .nav-dropdown,
+ nav li:hover .nav__about-caret > .fa-caret-up {
+ display: block;
+ }
-.nav-dropdown__content {
- display: flex;
- flex-direction: column;
-}
+ nav li:hover .nav__about-caret > .fa-caret-down {
+ display: none;
+ }
-.nav-dropdown__content > a {
- /* Slightly off left effect */
- padding: 0.75vw;
- justify-content: left;
- border-top: 0.15rem solid var(--border-color);
-}
+ /* Some stuff to affect the display of the dropdown/caret icon */
+ .nav-dropdown {
+ display: none;
+ position: absolute;
+ width: 100%;
+ }
-.nav-dropdown__content > a:first-child {
- /* Remove the top border on the first element */
- border-top: 0;
+ /*
+ We use separate elements for border and content because we need them to be a different colour
+ While the border is white, the gap between the content isn't.
+ Trying to put these two requirements in the same element would be a pain, and it's probably just easier to use two divs.
+ This also has the added benefit of still showing the dropdown contents even when the mouse is slightly outside of it.
+ */
+ .nav-dropdown__border {
+ display: flex;
+ flex-direction: column;
+ padding: 0 0.75vw;
+ background-color: white;
+ }
+
+ .nav-dropdown__content {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .nav-dropdown__content > a {
+ /* Slightly off left effect */
+ padding: 0.75vw;
+ justify-content: left;
+ border-top: 0.15rem solid var(--border-color);
+ }
+
+ .nav-dropdown__content > a:first-child {
+ /* Remove the top border on the first element */
+ border-top: 0;
+ }
}
/* Nav component end */