From d0b635b80b48f26ad48c978d52f313380b0744cf Mon Sep 17 00:00:00 2001 From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com> Date: Wed, 14 Feb 2024 11:20:10 -0800 Subject: [PATCH] 11 header and nav (#20) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes #11 blocked by #19 Note: Heather is working on licensing the correct font, so it looks a little off. ## Changes - added favicons - added minor layout styles - created header and nav components - made them accessible for both mobile and desktop ## Demo Uploading Screen Recording 2024-02-13 at 7.49.59 PM.mov… --------- Co-authored-by: Claire Olmstead --- src/app.html | 6 ++++- src/components/Header/Header.svelte | 19 +++++++++++++++ src/components/Header/HeaderNav.svelte | 7 ++++++ src/components/Header/HeaderNavMobile.svelte | 13 ++++++++++ src/components/Header/NavItems.svelte | 5 ++++ src/components/OpenCloseIcon.svelte | 24 +++++++++++++++++++ src/lib/assets/Exit.svg | 4 ++++ src/lib/assets/Logo.svg | 3 +++ src/lib/assets/Menu.svg | 4 ++++ src/routes/+layout.svelte | 4 +++- src/style/app.css | 21 +++++++++++++++- static/apple-touch-icon.png | Bin 0 -> 1485 bytes static/favicon-16x16.png | Bin 0 -> 452 bytes static/favicon-32x32.png | Bin 0 -> 604 bytes static/favicon.ico | Bin 0 -> 15086 bytes static/favicon.png | Bin 1571 -> 0 bytes tailwind.config.js | 2 +- 17 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 src/components/Header/Header.svelte create mode 100644 src/components/Header/HeaderNav.svelte create mode 100644 src/components/Header/HeaderNavMobile.svelte create mode 100644 src/components/Header/NavItems.svelte create mode 100644 src/components/OpenCloseIcon.svelte create mode 100644 src/lib/assets/Exit.svg create mode 100644 src/lib/assets/Logo.svg create mode 100644 src/lib/assets/Menu.svg create mode 100644 static/apple-touch-icon.png create mode 100644 static/favicon-16x16.png create mode 100644 static/favicon-32x32.png create mode 100644 static/favicon.ico delete mode 100644 static/favicon.png diff --git a/src/app.html b/src/app.html index 84ffad16..957a4f2c 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,11 @@ - + + + + + %sveltekit.head% diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte new file mode 100644 index 00000000..55b30bf5 --- /dev/null +++ b/src/components/Header/Header.svelte @@ -0,0 +1,19 @@ + + +
+ Logo + + + + + + (isNavOpen = !isNavOpen)} isOpen={isNavOpen} classes={'md:hidden lg:hidden'} /> + +
diff --git a/src/components/Header/HeaderNav.svelte b/src/components/Header/HeaderNav.svelte new file mode 100644 index 00000000..51213b64 --- /dev/null +++ b/src/components/Header/HeaderNav.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/components/Header/HeaderNavMobile.svelte b/src/components/Header/HeaderNavMobile.svelte new file mode 100644 index 00000000..a5a97de2 --- /dev/null +++ b/src/components/Header/HeaderNavMobile.svelte @@ -0,0 +1,13 @@ + + +
+ +
diff --git a/src/components/Header/NavItems.svelte b/src/components/Header/NavItems.svelte new file mode 100644 index 00000000..453354f5 --- /dev/null +++ b/src/components/Header/NavItems.svelte @@ -0,0 +1,5 @@ +About. +Our Technology. +Dev Docs. +Newsroom. +Contact. diff --git a/src/components/OpenCloseIcon.svelte b/src/components/OpenCloseIcon.svelte new file mode 100644 index 00000000..0ee0b30c --- /dev/null +++ b/src/components/OpenCloseIcon.svelte @@ -0,0 +1,24 @@ + + + diff --git a/src/lib/assets/Exit.svg b/src/lib/assets/Exit.svg new file mode 100644 index 00000000..a9f1f7bc --- /dev/null +++ b/src/lib/assets/Exit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/assets/Logo.svg b/src/lib/assets/Logo.svg new file mode 100644 index 00000000..3edf1db7 --- /dev/null +++ b/src/lib/assets/Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/assets/Menu.svg b/src/lib/assets/Menu.svg new file mode 100644 index 00000000..e21d6f05 --- /dev/null +++ b/src/lib/assets/Menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index eace1b3e..80eba191 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,9 +1,11 @@
-
+
+