Skip to content

Commit

Permalink
Merge pull request #3 from markteekman/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@markteekman
markteekman authored May 7, 2022
2 parents 491f8cf + e94fbbf commit 4913b2a
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 12 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "accessible-astro-dashboard",
"description": "An Accessible Dashboard Theme for Astro including a login page, a dashboard page and several other pages and components.",
"version": "1.0.0",
"version": "1.0.1",
"author": "Mark Teekman",
"homepage": "https://accessible-astro.dev",
"scripts": {
Expand Down
8 changes: 8 additions & 0 deletions public/astro-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 19 additions & 3 deletions src/components/DarkMode.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<button class="darkmode-toggle" aria-pressed="false">
<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>
<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><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>
</button>

<script>
Expand All @@ -10,15 +10,15 @@
// functions
const enableDarkMode = () => {
document.body.classList.add('darkmode')
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.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><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 = () => {
document.body.classList.remove('darkmode')
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.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><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)
Expand Down Expand Up @@ -49,6 +49,10 @@

@include breakpoint(medium) {
width: 30px;

path {
fill: var(--secondary-500);
}
}

path {
Expand All @@ -66,4 +70,16 @@
@include outline;
}
}

.darkmode .darkmode-toggle {
svg path {
fill: var(--secondary-100);
}

&:hover {
svg path {
fill: var(--primary-400);
}
}
}
</style>
6 changes: 3 additions & 3 deletions src/components/ResponsiveToggle.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<button class="responsive-toggle" aria-expanded="false" aria-label="Open menu navigation">
<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>
<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>
</button>

<script>
Expand All @@ -17,7 +17,7 @@
})
toggle.setAttribute('aria-expanded', true)
toggle.setAttribute('aria-label', 'Close menu navigation')
toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>`
toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>`
}

const closeMenu = (toggle) => {
Expand All @@ -26,7 +26,7 @@
})
toggle.setAttribute('aria-expanded', false)
toggle.setAttribute('aria-label', 'Open menu navigation')
toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>`
toggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--secondary-100)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>`
}

// execution
Expand Down
5 changes: 5 additions & 0 deletions src/layouts/LoginLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,8 @@ let subtitle = 'Accessible Astro Dashboard'
</body>
</html>

<style is:global>
html body {
background-color: var(--neutral-100);
}
</style>
22 changes: 17 additions & 5 deletions src/pages/login.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Icon } from 'astro-icon'
<div class="bg-neutral-900 radius-large space-8">
<img
class="brand__logo radius-large"
src="/favicon.svg"
src="/astro-logo.svg"
alt=""
>
</div>
Expand All @@ -24,14 +24,14 @@ import { Icon } from 'astro-icon'
</div>
<div class="inner__form space-content">
<Notification>
<Icon pack="majesticons" name="information-circle-line" /><p class="size-12">Log in using <strong>admin@astro.demo</strong> and <strong>Astronaut570</strong> as the password.</p>
<Icon pack="majesticons" name="information-circle-line" /><p class="size-14">Log in using <strong>admin@astro.demo</strong> and <strong>Astronaut570</strong>.</p>
</Notification>
<div class="space-content">
<h1>Login</h1>
<LoginForm />
</div>
</div>
<div class="text-neutral-700">
<div class="login__footer text-neutral-700">
<p><em>Build fast dashboards, faster.</em></p>
</div>
</div>
Expand All @@ -57,9 +57,13 @@ import { Icon } from 'astro-icon'
flex-direction: column;
justify-content: space-between;
gap: $space-48;
padding: $space-24;
z-index: 1;
padding: $space-48 $space-96;
box-shadow: 0 0 40px #2632381a;

@include breakpoint(medium) {
padding: $space-48 $space-96;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
}

.inner__brand {
Expand Down Expand Up @@ -103,6 +107,14 @@ import { Icon } from 'astro-icon'
.reveal {
animation: reveal 0.3s ease-in;
}

.login__footer {
padding-bottom: $space-24;

@include breakpoint(medium) {
padding-bottom: 0;
}
}
}

@keyframes reveal {
Expand Down

0 comments on commit 4913b2a

Please sign in to comment.