From 112292c3c65da97627f2751e779b421d5b027ef8 Mon Sep 17 00:00:00 2001 From: Jerad Bitner Date: Thu, 18 Jul 2024 15:52:34 -0700 Subject: [PATCH 1/4] Resolves #37 Add aria-label to the Get Started buttons on cover pages. --- src/_includes/cover.liquid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_includes/cover.liquid b/src/_includes/cover.liquid index c189792..619de16 100644 --- a/src/_includes/cover.liquid +++ b/src/_includes/cover.liquid @@ -9,7 +9,7 @@ layout: layout
- Get Started + Get Started
{{ content }}
From f7d2c6304d6be866cf049f3ec1e5ceeb0bd5b275 Mon Sep 17 00:00:00 2001 From: Jerad Bitner Date: Thu, 18 Jul 2024 15:55:25 -0700 Subject: [PATCH 2/4] Resolves #38 Add id and aria-labelledby to the nav. --- src/_includes/table-of-contents.liquid | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_includes/table-of-contents.liquid b/src/_includes/table-of-contents.liquid index f7ade66..ddabd85 100644 --- a/src/_includes/table-of-contents.liquid +++ b/src/_includes/table-of-contents.liquid @@ -3,8 +3,8 @@ layout: layout title: "Table of Contents" --- - -
+
+ From d2c70671d4bd4234a1ebc03a94b3f79ce8f11329 Mon Sep 17 00:00:00 2001 From: Jerad Bitner Date: Thu, 18 Jul 2024 16:20:06 -0700 Subject: [PATCH 4/4] Resolves #44 #41 #42 - #41: Adds a hover state to the logo to turn red to black, similar to lullabot.com. - #44: Adds in an alt tag to the image and an aria-label to the link. - #42: Add visually hidden page callout to the page number in the sidebar. --- src/_includes/layout.liquid | 7 ++++--- src/sass/styles.scss | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid index 47381be..46c24a3 100644 --- a/src/_includes/layout.liquid +++ b/src/_includes/layout.liquid @@ -12,9 +12,9 @@
- +
- + Lullabot.com homepage
@@ -30,7 +30,8 @@
{{ bookWithChapters.book.title }}
-
+
+ {% if page.fileSlug == 'cover' %} {% elsif page.fileSlug == 'table-of-contents' %} diff --git a/src/sass/styles.scss b/src/sass/styles.scss index 6f74a0c..53e8c64 100644 --- a/src/sass/styles.scss +++ b/src/sass/styles.scss @@ -6,6 +6,10 @@ $lb-white: #fff; @import "/fonts/fonts.css"; +.visually-hidden { + display: none; +} + body { margin: 0; display: flex; @@ -57,6 +61,20 @@ main { display: flex; align-items: center; justify-content: center; + transition: background-color 0.3s ease; +} + +.logo-container:hover { + background-color: $lb-black; +} + +.logo-container:hover svg rect { + fill: $lb-black; +} + +.logo-container svg rect { + fill: $lb-red; + transition: fill 0.3s ease; } .page-number {