Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility updates #45

Merged
merged 4 commits into from
Jul 19, 2024
Merged

Accessibility updates #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
112292c
Resolves #37
sirkitree Jul 18, 2024
f7d2c63
Resolves #38
sirkitree Jul 18, 2024
2060563
Resolves #39
sirkitree Jul 18, 2024
d2c7067
Resolves #44 #41 #42
sirkitree Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/_includes/chapter.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ layout: layout
{% endif %}
</div>

<div class="nav-container">
<nav class="nav-container" aria-label="E-book arrow navigation">
{% if isFirstChapter %}
<a href="../../table-of-contents/">
<div class="nav-button">
Expand All @@ -58,4 +58,4 @@ layout: layout
</div>
</a>
{% endif %}
</div>
</nav>
2 changes: 1 addition & 1 deletion src/_includes/cover.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ layout: layout

<div class="cover-copy">
<div class="get-started">
<a href="../table-of-contents/">Get Started<i class="gs-arrow-right"></a>
<a href="../table-of-contents/" aria-label="Read the {{ title }} eBook">Get Started<i class="gs-arrow-right"></a>
</div>
{{ content }}
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/_includes/layout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<body>

<div class="logo-container">
<a href="https://lullabot.com/">
<a href="https://lullabot.com/" aria-label="Lullabot.com homepage">
<div>
<img src="/img/logo.svg" alt="" />
<img src="/img/logo.svg" alt="Lullabot.com homepage" />
</div>
</a>
</div>
Expand All @@ -30,7 +30,8 @@
<div>{{ bookWithChapters.book.title }}</div>
</div>
<div class="page-number">
<div>
<div aria-label="Current page number">
<span class="visually-hidden">Page: </span>
{% if page.fileSlug == 'cover' %}
<!-- Empty for cover page -->
{% elsif page.fileSlug == 'table-of-contents' %}
Expand Down
8 changes: 4 additions & 4 deletions src/_includes/table-of-contents.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ layout: layout
title: "Table of Contents"
---

<nav class="toc-container">
<p>{{ title }}</p>
<nav class="toc-container" aria-labelledby="toc-title">
<p id="toc-title">{{ title }}</p>
<div class="toc-columns">
{% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}
{% assign count = 1 %}
Expand Down Expand Up @@ -44,7 +44,7 @@ title: "Table of Contents"
</div>
</nav>

<div class="nav-container">
<nav class="nav-container" aria-label="E-book arrow navigation">
<a href="../cover/">
<div class="nav-button">
<i class="gg-arrow-left"></i>
Expand All @@ -55,4 +55,4 @@ title: "Table of Contents"
<i class="gg-arrow-right"></i>
</div>
</a>
</div>
</nav>
18 changes: 18 additions & 0 deletions src/sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ $lb-white: #fff;

@import "/fonts/fonts.css";

.visually-hidden {
display: none;
}

body {
margin: 0;
display: flex;
Expand Down Expand Up @@ -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 {
Expand Down
Loading