Skip to content

Commit

Permalink
Merge pull request #26 from markteekman/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
markteekman authored Apr 27, 2022
2 parents ad7c914 + 56b0cd8 commit 858b551
Show file tree
Hide file tree
Showing 10 changed files with 366 additions and 86 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

This starter project is build upon the (awesome) [Astro Static Site Builder](https://astro.build/). This starter offers a couple of Accessibility components and some utility classes to get you building your project faster. Also check out the [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) npm package which can be used with (or without) this starter!

[Live demo](https://accessible-astro.markteekman.nl/)
[Live demo](https://starter.accessible-astro.dev)

## Getting started
Run the following commands in your project folder to get started:
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "accessible-astro-starter",
"description": "An Accessible Starter Theme for Astro including accessiblity features and more.",
"version": "1.2.5",
"description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
"version": "1.3.0",
"author": "Mark Teekman",
"homepage": "https://accessible-astro.dev",
"scripts": {
Expand Down
42 changes: 30 additions & 12 deletions src/components/DarkMode.astro
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<button class="darkmode-toggle" aria-pressed="false">Enable Dark Mode</button>
<button class="darkmode-toggle" aria-pressed="false">

</button>

<script>
// variables
Expand All @@ -7,24 +9,26 @@
const darkModeToggle = document.querySelector('.darkmode-toggle')

// functions
const enableDarkMode = _ => {
const enableDarkMode = () => {
document.body.classList.add('darkmode')
darkModeToggle.textContent = 'Disable Dark Mode'
darkModeToggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zM256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zM369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zM96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zM403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z"></path></svg>`
darkModeToggle.setAttribute('aria-pressed', 'true')
darkModeToggle.setAttribute('aria-label', 'Disable dark mode')
localStorage.setItem('darkMode', 'enabled')
}

const disableDarkMode = _ => {
const disableDarkMode = () => {
document.body.classList.remove('darkmode')
darkModeToggle.textContent = 'Enable Dark Mode'
darkModeToggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200 31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"></path></svg>`
darkModeToggle.setAttribute('aria-pressed', 'false')
darkModeToggle.setAttribute('aria-label', 'Enable dark mode')
localStorage.setItem('darkMode', null)
}

// execution
if (darkMode === 'enabled' || systemPrefs) enableDarkMode()

darkModeToggle.addEventListener('click', _ => {
darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode')

darkMode !== 'enabled'
Expand All @@ -33,15 +37,29 @@
})
</script>

<style lang="scss">
<style lang="scss" is:global>
@use "../assets/scss/base/outline" as *;

.darkmode-toggle {
border: 2px solid var(--secondary-500);
border-radius: var(--radius-small);
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
padding: 0;
border: none;

svg {
width: 25px;

path {
transition: fill 0.2s ease-in-out;
}
}

&:hover {
color: var(--neutral-100);
background-color: var(--secondary-500);
svg path {
fill: var(--primary-400);
}
}

&:focus {
@include outline;
}
}
</style>
47 changes: 39 additions & 8 deletions src/components/Header.astro
Original file line number Diff line number Diff line change
@@ -1,18 +1,49 @@
---
import SkipLinks from '../components/SkipLinks.astro'
import Navigation from '../components/Navigation.astro'
import ResponsiveToggle from '../components/ResponsiveToggle.astro'
---

<header>
<SkipLinks client:load />
<section class="padding-16 color-neutral">
<div class="container">
<img src={(await import('../assets/img/logo.svg')).default} alt="Your Logo">
<ResponsiveToggle client:load />
<Navigation client:load />
</div>
</section>
<Navigation client:load>
<li class="menu-item">
<a href="/">Home</a>
</li>
<li class="menu-item has-dropdown">
<button aria-haspopup="true" aria-expanded="false">Dropdown</button>
<ul>
<li class="submenu-item">
<a href="/dropdown/subpage1">Sub menu item 1</a>
</li>
<li class="submenu-item">
<a href="/dropdown/subpage2">Sub menu item 2</a>
</li>
<li class="submenu-item">
<a href="/dropdown/subpage3">Sub menu item 3</a>
</li>
</ul>
</li>
<li class="menu-item has-dropdown">
<button aria-haspopup="true" aria-expanded="false">Dropdown</button>
<ul>
<li class="submenu-item">
<a href="/dropdown/subpage1">Sub menu item 1</a>
</li>
<li class="submenu-item">
<a href="/dropdown/subpage2">Sub menu item 2</a>
</li>
<li class="submenu-item">
<a href="/dropdown/subpage3">Sub menu item 3</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="/about/">About</a>
</li>
<li class="menu-item">
<a href="/contact/">Contact</a>
</li>
</Navigation>
</header>

<style lang="scss">
Expand Down
Loading

0 comments on commit 858b551

Please sign in to comment.