eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix bad contrast ratio with secondary text in dark mode (#388)

Browse Source 
* Fix bad contrast ratio with secondary text in dark mode

* Add some more accessibility improvements
This commit is contained in:
Prospector
2022-03-05 16:35:45 -08:00
committed by GitHub
parent d8df8e1033
commit a7ce9aaca5
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/global.scss
View File

@@ -5,7 +5,7 @@ html {
.light-mode { .light-mode {
--color-icon: #6b7280; --color-icon: #6b7280;
--color-text: hsl(221, 39%, 11%); --color-text: hsl(221, 39%, 11%);
--color-text-secondary: hsl(220, 9%, 46%); --color-text-secondary: var(--color-icon);
--color-text-inactive: hsl(215, 14%, 34%); --color-text-inactive: hsl(215, 14%, 34%);
--color-text-dark: #1a202c; --color-text-dark: #1a202c;
--color-heading: #2c313d; --color-heading: #2c313d;
@@ -130,7 +130,7 @@ html {
--shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15); --shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15); --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-link: #4793d9; --color-link: #74b6f3;
--color-badge-gray-bg: #646161; --color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1; --color-badge-gray-text: #c8c1c1;

9
layouts/default.vue
View File

@@ -51,8 +51,13 @@
</div> </div>
</nuxt-link> </nuxt-link>
<div v-if="$auth.user" ref="mobileMenu" class="dropdown"> <div v-if="$auth.user" ref="mobileMenu" class="dropdown">
<button class="control"> <button class="control" value="Profile Dropdown">
<img :src="$auth.user.avatar_url" class="user-icon" /> <img
:src="$auth.user.avatar_url"
class="user-icon"
aria-hidden="true"
alt="Your avatar"
/>
<DropdownIcon class="caret" /> <DropdownIcon class="caret" />
</button> </button>
<ul class="content card" @click="removeFocus"> <ul class="content card" @click="removeFocus">