aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Dark mode #15

Merged
aniva merged 15 commits from styling/dark-mode into main 2024-10-15 19:32:16 -07:00
Conversation 1 Commits 15 Files Changed 17 +58 -59
3 changed files with 58 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 95095083c3 - Show all commits

2
.pre-commit-config.yaml
View File

@ -11,7 +11,7 @@ repos:
hooks:
- id: conventional-pre-commit
stages: [commit-msg]
args: [feat, fix, chore, test, build, merge]
args: [feat, fix, chore, test, build, merge, refactor]
- repo: local
hooks:
- id: eslint

57
src/app.css
View File

@ -95,3 +95,60 @@ html {
hr {
@apply separator;
}
a, button {
color: theme('colors.eucalyptus.400');
&:hover,
&:focus {
color: theme('colors.java.500');
}
}
.dark a:not(.disabled-link),button {
text-shadow: 0 0 5px;
}
.nav-link {
@apply text-lg;
font-weight: 500;
font-family: serif;
}
a.disabled-link {
color: rgb(128,128,128);
pointer-events: none;
}
a:not(.icon) {
position: relative;
text-decoration: inherit;
&::after {
content: "";
display: block;
width: 100%;
position: absolute;
height: 2px;
bottom: 0;
left: 0;
background-color: theme('colors.java.500');
transform: scaleX(0);
transition: transform 0.3s ease;
}
&:hover,
&:focus {
&::after {
content: "";
position: absolute;
transform: scaleX(1);
}
}
}
a.current-link {
color: theme('colors.magenta.500');
&::after {
background-color: theme('colors.magenta.500');
}
&:hover,
&:focus {
color: theme('colors.magenta.500');
}
}

58
src/routes/+layout.svelte
View File

@ -31,59 +31,6 @@
{/if}
<style>
:global(.nav-link) {
@apply text-lg;
font-weight: 500;
font-family: serif;
}
:global(a.disabled-link) {
color: rgb(128,128,128);
pointer-events: none;
}
:global(a), :global(button) {
color: theme('colors.eucalyptus.400');
&:hover,
&:focus {
color: theme('colors.java.500');
}
}
:global(a):not(.icon) {
position: relative;
text-decoration: inherit;
&::after {
content: "";
display: block;
width: 100%;
position: absolute;
height: 2px;
bottom: 0;
left: 0;
background-color: theme('colors.java.500');
transform: scaleX(0);
transition: transform 0.3s ease;
}
&:hover,
&:focus {
&::after {
content: "";
position: absolute;
transform: scaleX(1);
}
}
}
:global(a.current-link) {
color: theme('colors.magenta.500');
&::after {
background-color: theme('colors.magenta.500');
}
&:hover,
&:focus {
color: theme('colors.magenta.500');
}
}
#layout {
max-width: max(80vw, 100vh);
margin-left: auto;
@ -107,11 +54,6 @@
gap: 20px;
}
}
@media (prefers-color-scheme: dark) {
:global(a), :global(button) {
text-shadow: 0 0 5px;
}
}
main {
width: min(100vw, max(50vw, 100vh));
grid-area: content;