Skip to content

Commit

Permalink
deploy: e5b8b16
Browse files Browse the repository at this point in the history
  • Loading branch information
@helenclx
helenclx committed Jun 7, 2024
1 parent f42e4c6 commit ffe2e3b
Show file tree
Hide file tree
Showing 52 changed files with 780 additions and 1,468 deletions.
43 changes: 15 additions & 28 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@
<h2 class="header__title">
<a href="/">Helen Chong</a>
</h2>
<h2 class="visually-hidden">Navigation Links:</h2>
<button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
<input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
<label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
<h2 class="visually-hidden">Navigation Links</h2>
<ul class="header__links">

<li><a
Expand Down Expand Up @@ -98,22 +99,30 @@ <h2 class="visually-hidden">Navigation Links:</h2>
box-shadow: var(--box-shadow);
}

.header__title {
.header__title,
.header__control {
color: var(--clr-accent-600);
text-transform: uppercase;
font-size: 2rem;
}

.header__title {
text-transform: uppercase;
margin: 0;
}

.header__title a:focus,
.header__toggle:focus {
#nav-toggle:focus + .header__control {
outline: 0.12em solid var(--clr-accent-600);
}

.header__title > a {
text-decoration: none;
}

.header__control:hover {
cursor: pointer;
}

.header__links {
list-style: none;
padding-left: 0;
Expand Down Expand Up @@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
outline-offset: 0.1em;
}

.header__toggle {
border: none;
background-color: transparent;
font-size: 2rem;
}

.header__links--show {
#nav-toggle:checked ~ .header__links {
transform: translateX(0);
}

Expand Down Expand Up @@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
}
}
</style>

<script defer>
const headerToggle = document.querySelector('.header__toggle');
const headerLinks = document.querySelector(".header__links");
const headerLinkAll = document.querySelectorAll('.header__link');

headerToggle.addEventListener('click', () => {
headerLinks.classList.toggle("header__links--show");
});

headerLinkAll.forEach((link) => {
link.addEventListener('click', () => {
headerLinks.classList.remove("header__links--show");
});
});
</script>
<main id="content">
<h2 class="heading--main text-center">Oops! Content not found.</h2>

Expand Down
43 changes: 15 additions & 28 deletions about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@
<h2 class="header__title">
<a href="/">Helen Chong</a>
</h2>
<h2 class="visually-hidden">Navigation Links:</h2>
<button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
<input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
<label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
<h2 class="visually-hidden">Navigation Links</h2>
<ul class="header__links">

<li><a
Expand Down Expand Up @@ -98,22 +99,30 @@ <h2 class="visually-hidden">Navigation Links:</h2>
box-shadow: var(--box-shadow);
}

.header__title {
.header__title,
.header__control {
color: var(--clr-accent-600);
text-transform: uppercase;
font-size: 2rem;
}

.header__title {
text-transform: uppercase;
margin: 0;
}

.header__title a:focus,
.header__toggle:focus {
#nav-toggle:focus + .header__control {
outline: 0.12em solid var(--clr-accent-600);
}

.header__title > a {
text-decoration: none;
}

.header__control:hover {
cursor: pointer;
}

.header__links {
list-style: none;
padding-left: 0;
Expand Down Expand Up @@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
outline-offset: 0.1em;
}

.header__toggle {
border: none;
background-color: transparent;
font-size: 2rem;
}

.header__links--show {
#nav-toggle:checked ~ .header__links {
transform: translateX(0);
}

Expand Down Expand Up @@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
}
}
</style>

<script defer>
const headerToggle = document.querySelector('.header__toggle');
const headerLinks = document.querySelector(".header__links");
const headerLinkAll = document.querySelectorAll('.header__link');

headerToggle.addEventListener('click', () => {
headerLinks.classList.toggle("header__links--show");
});

headerLinkAll.forEach((link) => {
link.addEventListener('click', () => {
headerLinks.classList.remove("header__links--show");
});
});
</script>
<main id="content">

<header class="main__header">
Expand Down
43 changes: 15 additions & 28 deletions accessibility/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@
<h2 class="header__title">
<a href="/">Helen Chong</a>
</h2>
<h2 class="visually-hidden">Navigation Links:</h2>
<button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
<input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
<label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
<h2 class="visually-hidden">Navigation Links</h2>
<ul class="header__links">

<li><a
Expand Down Expand Up @@ -101,22 +102,30 @@ <h2 class="visually-hidden">Navigation Links:</h2>
box-shadow: var(--box-shadow);
}

.header__title {
.header__title,
.header__control {
color: var(--clr-accent-600);
text-transform: uppercase;
font-size: 2rem;
}

.header__title {
text-transform: uppercase;
margin: 0;
}

.header__title a:focus,
.header__toggle:focus {
#nav-toggle:focus + .header__control {
outline: 0.12em solid var(--clr-accent-600);
}

.header__title > a {
text-decoration: none;
}

.header__control:hover {
cursor: pointer;
}

.header__links {
list-style: none;
padding-left: 0;
Expand Down Expand Up @@ -174,13 +183,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
outline-offset: 0.1em;
}

.header__toggle {
border: none;
background-color: transparent;
font-size: 2rem;
}

.header__links--show {
#nav-toggle:checked ~ .header__links {
transform: translateX(0);
}

Expand Down Expand Up @@ -212,22 +215,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
}
}
</style>

<script defer>
const headerToggle = document.querySelector('.header__toggle');
const headerLinks = document.querySelector(".header__links");
const headerLinkAll = document.querySelectorAll('.header__link');

headerToggle.addEventListener('click', () => {
headerLinks.classList.toggle("header__links--show");
});

headerLinkAll.forEach((link) => {
link.addEventListener('click', () => {
headerLinks.classList.remove("header__links--show");
});
});
</script>
<main id="content">

<header class="main__header">
Expand Down
43 changes: 15 additions & 28 deletions blog/categories/100-days-of-code/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@
<h2 class="header__title">
<a href="/">Helen Chong</a>
</h2>
<h2 class="visually-hidden">Navigation Links:</h2>
<button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
<input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
<label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
<h2 class="visually-hidden">Navigation Links</h2>
<ul class="header__links">

<li><a
Expand Down Expand Up @@ -98,22 +99,30 @@ <h2 class="visually-hidden">Navigation Links:</h2>
box-shadow: var(--box-shadow);
}

.header__title {
.header__title,
.header__control {
color: var(--clr-accent-600);
text-transform: uppercase;
font-size: 2rem;
}

.header__title {
text-transform: uppercase;
margin: 0;
}

.header__title a:focus,
.header__toggle:focus {
#nav-toggle:focus + .header__control {
outline: 0.12em solid var(--clr-accent-600);
}

.header__title > a {
text-decoration: none;
}

.header__control:hover {
cursor: pointer;
}

.header__links {
list-style: none;
padding-left: 0;
Expand Down Expand Up @@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
outline-offset: 0.1em;
}

.header__toggle {
border: none;
background-color: transparent;
font-size: 2rem;
}

.header__links--show {
#nav-toggle:checked ~ .header__links {
transform: translateX(0);
}

Expand Down Expand Up @@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
}
}
</style>

<script defer>
const headerToggle = document.querySelector('.header__toggle');
const headerLinks = document.querySelector(".header__links");
const headerLinkAll = document.querySelectorAll('.header__link');

headerToggle.addEventListener('click', () => {
headerLinks.classList.toggle("header__links--show");
});

headerLinkAll.forEach((link) => {
link.addEventListener('click', () => {
headerLinks.classList.remove("header__links--show");
});
});
</script>
<main id="content">

<header class="main__header">
Expand Down
Loading

0 comments on commit ffe2e3b

Please sign in to comment.