From 171a61373aad1e49cd06e5ac0a7d4ca2fca015c3 Mon Sep 17 00:00:00 2001 From: John Durance Date: Wed, 19 Jun 2024 12:49:46 +0100 Subject: [PATCH 1/3] #11: Add video component --- src/assets/icons/IconChevronRight.astro | 12 +++++++++++ src/components/Section.astro | 8 +++++-- src/components/VideoPlayer.astro | 28 +++++++++++++++++++++++++ src/pages/index.astro | 8 +++++++ src/styles/global.css | 4 ++++ 5 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/IconChevronRight.astro create mode 100644 src/components/VideoPlayer.astro diff --git a/src/assets/icons/IconChevronRight.astro b/src/assets/icons/IconChevronRight.astro new file mode 100644 index 0000000..7b51dee --- /dev/null +++ b/src/assets/icons/IconChevronRight.astro @@ -0,0 +1,12 @@ +--- + +--- + + + + diff --git a/src/components/Section.astro b/src/components/Section.astro index 2087dca..153d28e 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -20,9 +20,13 @@ const { backgroundColor, backgroundImage, eyebrow, heading, links } = class={`bg-${backgroundImage ? `[url('${backgroundImage}')]` : backgroundColor} bg-cover p-6 sm:p-12`} >
-
{eyebrow}
+
+ {eyebrow} +
{heading}
{ diff --git a/src/components/VideoPlayer.astro b/src/components/VideoPlayer.astro new file mode 100644 index 0000000..75185b2 --- /dev/null +++ b/src/components/VideoPlayer.astro @@ -0,0 +1,28 @@ +--- +import IconChevronRight from "@icons/IconChevronRight.astro"; +--- + + +
+
+ More videos +
+ +
+
+
+
+ + + +
+
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 04e384b..4b9e6a1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,6 +2,7 @@ import Layout from "@layouts/Layout.astro"; import "@styles/global.css"; import Section from "../components/Section.astro"; +import VideoPlayer from "../components/VideoPlayer.astro"; --- @@ -17,4 +18,11 @@ import Section from "../components/Section.astro"; }, ]} /> +
+ +
diff --git a/src/styles/global.css b/src/styles/global.css index da4a8a2..93db4c7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -57,4 +57,8 @@ p { @apply text-[18px] leading-6; } + + iframe { + @apply aspect-video; + } } From dc82f103f9d656cc051acc0a48925b61760b3bdc Mon Sep 17 00:00:00 2001 From: John Durance Date: Wed, 19 Jun 2024 14:19:25 +0100 Subject: [PATCH 2/3] #11: Add all available videos --- package-lock.json | 6 ++++++ package.json | 1 + src/components/VideoPlayer.astro | 25 +++++++++++++++++-------- tailwind.config.mjs | 4 +++- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7eb5108..2867360 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@astrojs/check": "^0.7.0", "@astrojs/tailwind": "^5.1.0", "astro": "^4.10.1", + "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.4.4", "typescript": "^5.4.5" }, @@ -6511,6 +6512,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-scrollbar-hide": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz", + "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==" + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index 4507e21..40064d6 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@astrojs/check": "^0.7.0", "@astrojs/tailwind": "^5.1.0", "astro": "^4.10.1", + "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.4.4", "typescript": "^5.4.5" }, diff --git a/src/components/VideoPlayer.astro b/src/components/VideoPlayer.astro index 75185b2..27961c8 100644 --- a/src/components/VideoPlayer.astro +++ b/src/components/VideoPlayer.astro @@ -11,17 +11,26 @@ import IconChevronRight from "@icons/IconChevronRight.astro";
-
- - - +
+ + + + +
diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 7415b81..069d966 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -22,7 +22,9 @@ export default { } }, }, - plugins: [], + plugins: [ + require('tailwind-scrollbar-hide') + ], safelist: [ 'bg-blue', 'bg-green', From 45497808090702e970ee7db11c52b6aa04b9ab11 Mon Sep 17 00:00:00 2001 From: John Durance Date: Wed, 19 Jun 2024 14:43:03 +0100 Subject: [PATCH 3/3] #18: Close mobile menu on item click --- src/components/NavigationBar.astro | 8 ++++++++ src/pages/index.astro | 1 + 2 files changed, 9 insertions(+) diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro index 883f307..8e0b56d 100644 --- a/src/components/NavigationBar.astro +++ b/src/components/NavigationBar.astro @@ -62,6 +62,7 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro"; var navBar = document.getElementById("navbar"); var openButton = document.getElementById("open-mobile-menu"); var closeButton = document.getElementById("close-mobile-menu"); + var menuItems = document.querySelectorAll("#navbar li"); if (navBar && openButton && closeButton) { openButton.addEventListener("click", () => { @@ -72,5 +73,12 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro"; closeButton.addEventListener("click", () => { navBar?.classList.add("hidden"); }); + menuItems.forEach((item) => + item.addEventListener("click", () => { + if (!navBar?.classList.contains("hidden")) { + navBar?.classList.add("hidden"); + } + }), + ); } diff --git a/src/pages/index.astro b/src/pages/index.astro index 04e384b..367b2da 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,6 +9,7 @@ import Section from "../components/Section.astro"; backgroundColor="green" eyebrow="Our goal" heading="Our goal is to donate 10 million balls to children around the world." + id="our-goal" links={[ { href: "https://gofund.me/96424540", text: "GoFundMe" }, {