colin
/
resume
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix story link contrast for better accessibility
ci/woodpecker/push/woodpecker Pipeline failed Details

This commit is contained in:
colin 2025-07-06 19:12:28 -04:00
parent 066703bd42
commit 6d974577ad
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docker/resume/stories/stories.css
View File

@ -46,18 +46,39 @@
.story-link { .story-link {
display: inline-block; display: inline-block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: var(--accent-color); background-color: #004494; /* Darker blue for better contrast */
color: white; color: #ffffff; /* Bright white for better contrast */
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 700; /* Increased from 500 to 700 for better visibility */
transition: background-color 0.3s; transition: background-color 0.3s;
text-align: center; text-align: center;
align-self: flex-start; align-self: flex-start;
} }
/* Dark mode specific styles for story links */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .story-link {
background-color: #0056b3; /* Darker blue for dark mode */
color: #ffffff; /* Bright white */
}
:root:not([data-theme='light']) .story-link:hover {
background-color: #003d82; /* Even darker blue for hover in dark mode */
}
}
html[data-theme='dark'] .story-link {
background-color: #0056b3; /* Darker blue for dark mode */
color: #ffffff; /* Bright white */
}
html[data-theme='dark'] .story-link:hover {
background-color: #003d82; /* Even darker blue for hover in dark mode */
}
.story-link:hover { .story-link:hover {
background-color: var(--accent-color-darker); background-color: #003366; /* Darker hover color for better contrast */
} }
/* Individual story page styles */ /* Individual story page styles */