Skip to content

Commit 4913b2a

Browse files
markteekmanmarkteekman
authored
Merge pull request #3 from markteekman/develop
Develop
2 parents 491f8cf + e94fbbf commit 4913b2a

File tree

6 files changed

+53
-12
lines changed

6 files changed

+53
-12
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "accessible-astro-dashboard",
33
"description": "An Accessible Dashboard Theme for Astro including a login page, a dashboard page and several other pages and components.",
4-
"version": "1.0.0",
4+
"version": "1.0.1",
55
"author": "Mark Teekman",
66
"homepage": "https://accessible-astro.dev",
77
"scripts": {

‎public/astro-logo.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/DarkMode.astro

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<button class="darkmode-toggle" aria-pressed="false">
2-
<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>
2+
<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>
33
</button>
44

55
<script>
@@ -10,15 +10,15 @@
1010
// functions
1111
const enableDarkMode = () => {
1212
document.body.classList.add('darkmode')
13-
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>`
13+
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>`
1414
darkModeToggle.setAttribute('aria-pressed', 'true')
1515
darkModeToggle.setAttribute('aria-label', 'Disable dark mode')
1616
localStorage.setItem('darkMode', 'enabled')
1717
}
1818

1919
const disableDarkMode = () => {
2020
document.body.classList.remove('darkmode')
21-
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>`
21+
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>`
2222
darkModeToggle.setAttribute('aria-pressed', 'false')
2323
darkModeToggle.setAttribute('aria-label', 'Enable dark mode')
2424
localStorage.setItem('darkMode', null)
@@ -49,6 +49,10 @@
4949

5050
@include breakpoint(medium) {
5151
width: 30px;
52+
53+
path {
54+
fill: var(--secondary-500);
55+
}
5256
}
5357

5458
path {
@@ -66,4 +70,16 @@
6670
@include outline;
6771
}
6872
}
73+
74+
.darkmode .darkmode-toggle {
75+
svg path {
76+
fill: var(--secondary-100);
77+
}
78+
79+
&:hover {
80+
svg path {
81+
fill: var(--primary-400);
82+
}
83+
}
84+
}
6985
</style>

‎src/components/ResponsiveToggle.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<button class="responsive-toggle" aria-expanded="false" aria-label="Open menu navigation">
2-
<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>
2+
<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>
33
</button>
44

55
<script>
@@ -17,7 +17,7 @@
1717
})
1818
toggle.setAttribute('aria-expanded', true)
1919
toggle.setAttribute('aria-label', 'Close menu navigation')
20-
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>`
20+
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>`
2121
}
2222

2323
const closeMenu = (toggle) => {
@@ -26,7 +26,7 @@
2626
})
2727
toggle.setAttribute('aria-expanded', false)
2828
toggle.setAttribute('aria-label', 'Open menu navigation')
29-
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>`
29+
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>`
3030
}
3131

3232
// execution

‎src/layouts/LoginLayout.astro

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,8 @@ let subtitle = 'Accessible Astro Dashboard'
3636
</body>
3737
</html>
3838

39+
<style is:global>
40+
html body {
41+
background-color: var(--neutral-100);
42+
}
43+
</style>

‎src/pages/login.astro

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Icon } from 'astro-icon'
1313
<div class="bg-neutral-900 radius-large space-8">
1414
<img
1515
class="brand__logo radius-large"
16-
src="/favicon.svg"
16+
src="/astro-logo.svg"
1717
alt=""
1818
>
1919
</div>
@@ -24,14 +24,14 @@ import { Icon } from 'astro-icon'
2424
</div>
2525
<div class="inner__form space-content">
2626
<Notification>
27-
<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>
27+
<Icon pack="majesticons" name="information-circle-line" /><p class="size-14">Log in using <strong>admin@astro.demo</strong> and <strong>Astronaut570</strong>.</p>
2828
</Notification>
2929
<div class="space-content">
3030
<h1>Login</h1>
3131
<LoginForm />
3232
</div>
3333
</div>
34-
<div class="text-neutral-700">
34+
<div class="login__footer text-neutral-700">
3535
<p><em>Build fast dashboards, faster.</em></p>
3636
</div>
3737
</div>
@@ -57,9 +57,13 @@ import { Icon } from 'astro-icon'
5757
flex-direction: column;
5858
justify-content: space-between;
5959
gap: $space-48;
60+
padding: $space-24;
6061
z-index: 1;
61-
padding: $space-48 $space-96;
62-
box-shadow: 0 0 40px #2632381a;
62+
63+
@include breakpoint(medium) {
64+
padding: $space-48 $space-96;
65+
box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
66+
}
6367
}
6468

6569
.inner__brand {
@@ -103,6 +107,14 @@ import { Icon } from 'astro-icon'
103107
.reveal {
104108
animation: reveal 0.3s ease-in;
105109
}
110+
111+
.login__footer {
112+
padding-bottom: $space-24;
113+
114+
@include breakpoint(medium) {
115+
padding-bottom: 0;
116+
}
117+
}
106118
}
107119

108120
@keyframes reveal {

0 commit comments

Comments
 (0)