From ea130a029c63d9ccf4f5c28774810e261b60ce14 Mon Sep 17 00:00:00 2001 From: hannakim91 Date: Wed, 12 Oct 2022 16:55:26 -0700 Subject: [PATCH 1/3] wip: update links to have same animation on keypress as mouse hover social links in footer not yet working --- src/components/BottomLinks.astro | 4 ++-- src/components/RecentBlogPosts.astro | 2 +- src/components/Tabs.scss | 2 +- src/components/WaveFooter.astro | 7 ++++--- src/pages/about.astro | 2 +- src/styles/_base.scss | 6 ++++-- src/styles/tailwind/components/blog-tag.css | 2 +- src/styles/tailwind/components/buttons.css | 2 +- src/styles/tailwind/components/nav-menu.css | 4 ++-- 9 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/BottomLinks.astro b/src/components/BottomLinks.astro index e485599..4617c03 100644 --- a/src/components/BottomLinks.astro +++ b/src/components/BottomLinks.astro @@ -13,7 +13,7 @@ const { previousLink, previousLinkText, nextLink, nextLinkText } = Astro.props; class="border-t-2 border-blue-light border-solid flex flex-wrap mt-24 w-full" > Previous @@ -24,7 +24,7 @@ const { previousLink, previousLinkText, nextLink, nextLinkText } = Astro.props; Next Up diff --git a/src/components/RecentBlogPosts.astro b/src/components/RecentBlogPosts.astro index 608ce74..cc6df14 100644 --- a/src/components/RecentBlogPosts.astro +++ b/src/components/RecentBlogPosts.astro @@ -76,7 +76,7 @@ const { posts } = Astro.props; @apply text-navy; } - &:hover { + &:hover, &:focus { @apply text-red; } } diff --git a/src/components/Tabs.scss b/src/components/Tabs.scss index f713dac..5c3aefb 100644 --- a/src/components/Tabs.scss +++ b/src/components/Tabs.scss @@ -12,7 +12,7 @@ letter-spacing: 1px; padding: 10px 20px 10px 10px; - &:hover { + &:hover, &:focus { @apply cursor-pointer text-navy; box-shadow: inset 0 -2px var(--navy); } diff --git a/src/components/WaveFooter.astro b/src/components/WaveFooter.astro index 3c9efca..1675e76 100644 --- a/src/components/WaveFooter.astro +++ b/src/components/WaveFooter.astro @@ -171,7 +171,8 @@ const year = new Date().getFullYear(); a { @apply font-bold text-white; - &:hover { + &:hover, + &:focus { @apply text-red-light; } } @@ -183,8 +184,8 @@ const year = new Date().getFullYear(); transition-duration: 0.25s; transition-property: fill; } - - &:hover { + // this one doesn't seem to work on focus/keypress + &:hover, path { fill: var(--red-light); } diff --git a/src/pages/about.astro b/src/pages/about.astro index bc553a0..63c7aad 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -454,7 +454,7 @@ const description = } } - &:hover { + &:hover, &:focus { svg { path { fill: var(--red-light); diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 22eeef6..a68cda5 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -14,7 +14,8 @@ a { @apply text-red; } - &:hover { + &:hover, + &:focus { @apply text-navy; } } @@ -67,7 +68,8 @@ h6 { @apply text-navy; } - &:hover { + &:hover, + &:focus { @apply cursor-pointer text-red; svg { diff --git a/src/styles/tailwind/components/blog-tag.css b/src/styles/tailwind/components/blog-tag.css index 8671a92..1ed1eab 100644 --- a/src/styles/tailwind/components/blog-tag.css +++ b/src/styles/tailwind/components/blog-tag.css @@ -7,6 +7,6 @@ @apply text-grey-light; } -.blog-tag:hover { +.blog-tag:hover, .blog-tag:focus { @apply bg-navy text-white; } diff --git a/src/styles/tailwind/components/buttons.css b/src/styles/tailwind/components/buttons.css index 5b6ce50..89a1b88 100644 --- a/src/styles/tailwind/components/buttons.css +++ b/src/styles/tailwind/components/buttons.css @@ -24,7 +24,7 @@ @apply !text-white; } -.btn-white:hover { +.btn-white:hover, .btn-white:focus { @apply !bg-blue-light !text-navy; } diff --git a/src/styles/tailwind/components/nav-menu.css b/src/styles/tailwind/components/nav-menu.css index d5ed9cf..fe5f658 100644 --- a/src/styles/tailwind/components/nav-menu.css +++ b/src/styles/tailwind/components/nav-menu.css @@ -24,7 +24,7 @@ @apply text-navy; } -.nav-link:hover { +.nav-link:hover, .nav-link:focus { @apply text-red-light; } @@ -51,7 +51,7 @@ @apply text-white; } - .nav-link-alt:hover { + .nav-link-alt:hover, .nav-link-alt:focus { @apply text-red-light; } } From 31c6da38709e2a7ed0b876309f215b182001625f Mon Sep 17 00:00:00 2001 From: hannakim91 Date: Thu, 13 Oct 2022 10:06:44 -0700 Subject: [PATCH 2/3] fix linter errors --- src/components/RecentBlogPosts.astro | 3 ++- src/components/WaveFooter.astro | 5 ++--- src/pages/about.astro | 3 ++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/RecentBlogPosts.astro b/src/components/RecentBlogPosts.astro index cc6df14..a6ee7e4 100644 --- a/src/components/RecentBlogPosts.astro +++ b/src/components/RecentBlogPosts.astro @@ -76,7 +76,8 @@ const { posts } = Astro.props; @apply text-navy; } - &:hover, &:focus { + &:hover, + &:focus { @apply text-red; } } diff --git a/src/components/WaveFooter.astro b/src/components/WaveFooter.astro index 1675e76..8b4a5aa 100644 --- a/src/components/WaveFooter.astro +++ b/src/components/WaveFooter.astro @@ -186,9 +186,8 @@ const year = new Date().getFullYear(); } // this one doesn't seem to work on focus/keypress &:hover, - path { - fill: var(--red-light); - } + path { + fill: var(--red-light); } } } diff --git a/src/pages/about.astro b/src/pages/about.astro index 63c7aad..6e18613 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -454,7 +454,8 @@ const description = } } - &:hover, &:focus { + &:hover, + &:focus { svg { path { fill: var(--red-light); From 73f231d8afe3a946f534847655bbe8e067f60364 Mon Sep 17 00:00:00 2001 From: hannakim91 Date: Thu, 13 Oct 2022 13:15:40 -0700 Subject: [PATCH 3/3] add color change on keypress for svg links; fix styles formatting --- src/components/WaveFooter.astro | 97 ++++++++++++++++----------------- 1 file changed, 48 insertions(+), 49 deletions(-) diff --git a/src/components/WaveFooter.astro b/src/components/WaveFooter.astro index 8b4a5aa..239f91c 100644 --- a/src/components/WaveFooter.astro +++ b/src/components/WaveFooter.astro @@ -116,33 +116,27 @@ const year = new Date().getFullYear(); class="flex flex-wrap items-center justify-center w-full lg:justify-start" >
- @@ -158,60 +152,65 @@ const year = new Date().getFullYear();