style: change colorscheme to rose-pine, change link style

This commit is contained in:
Youwen Wu 2024-11-02 03:53:43 -07:00
parent 4803c2d68e
commit 7600335b4d
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
3 changed files with 37 additions and 19 deletions

View file

@ -13,12 +13,12 @@
@layer utilities {
.external-link {
@apply dark:text-violet-500 text-indigo-600 hover:bg-indigo-200 pr-3 rounded-sm dark:hover:bg-violet-950 transition-colors duration-300 relative;
@apply underline decoration-solid decoration-2 underline-offset-2 hover:text-love-light dark:hover:text-love-dark decoration-love-light decoration-love-dark;
}
.external-link::after {
@apply absolute top-1 right-[6px] w-2 h-2 border-2 border-indigo-600 dark:border-violet-600 rounded-full translate-x-1/2 -translate-y-1/2;
content: "";
.external-link-muted {
@apply underline decoration-solid decoration-2 underline-offset-2 hover:text-love-light dark:hover:text-love-dark decoration-accent-light decoration-accent-dark;
}
.small-caps {
font-variant: all-small-caps;
}

View file

@ -126,18 +126,18 @@
<p class="mt-8 mb-3 px-1 italic font-light">
a web-log about computers, math, hacks, and all the rest.
</p>
<a class="text-sm external-link" href="https://youwen.dev"
<a class="text-sm text-iris-light dark:text-iris-dark hover:text-love-light dark:hover:text-love-dark" href="https://youwen.dev"
><em>by </em>Youwen Wu</a
>
<span class="ml-2 font-serif">|</span>
<button
id="theme-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
></button>
<span class="ml-2 font-serif">|</span>
<button
id="font-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
></button>
</header>
$body$
@ -149,14 +149,14 @@
&copy; 2024 Youwen Wu. Generated by
<a
href="https://jaspervdj.be/hakyll/"
class="external-link"
class="external-link-muted"
target="__blank"
>Hakyll.</a
>
View the source
<a
href="https://github.com/couscousdude/blog"
class="external-link"
class="external-link-muted"
target="__blank"
>on GitHub.</a
>
@ -164,7 +164,7 @@
<p class="text-sm leading-relaxed mt-2">
Content freely available under
<a
class="external-link"
class="external-link-muted"
target="__blank"
href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en"
><span class="smallcaps">CC BY-NC-SA</span> 4.0</a

View file

@ -10,24 +10,42 @@ module.exports = {
},
colors: {
primary: {
dark: "#e7e5e4",
//dark: "#e7e5e4",
light: "#44403c",
dark: "#e0def4",
//light: "#575279",
},
secondary: {
dark: "#4c1d95",
light: "#4338ca",
//dark: "#4c1d95",
//light: "#4338ca",
dark: "#1f1d2e",
light: "#fffaf3",
},
accent: {
dark: "#9ca3af",
light: "#78716c",
//dark: "#9ca3af",
//light: "#78716c",
dark: "#908caa",
light: "#797593",
},
muted: {
dark: "#6b7280",
light: "#a8a29e",
//dark: "#6b7280",
//light: "#a8a29e",
dark: "#6e6a86",
light: "#9893a5",
},
background: {
light: "#d6d3d1",
dark: "#101017",
//light: "#d6d3d1",
//dark: "#101017",
dark: "#191724",
light: "#faf4ed",
},
iris: {
dark: "#c4a7e7",
light: "#907aa9",
},
love: {
dark: "#eb6f92",
light: "#b4637a",
},
},
},