Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
3.3 kB · 130 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@font-face { font-family: "AtkinsonHyperlegible"; src: url("/fonts/AtkinsonHyperlegibleNext.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap;}
@font-face { font-family: "AtkinsonHyperlegible"; src: url("/fonts/AtkinsonHyperlegibleNext.ttf") format("truetype"); font-weight: light; font-style: normal; font-display: swap;}
@font-face { font-family: "AtkinsonHyperlegible"; src: url("/fonts/AtkinsonHyperlegibleNext-Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap;}
/* light mode */:root { --foreground: #5c6a72; --red: #f85552; --orange: #f57d26; --yellow: #dfa000; --green: #8da101; --blue: #3a94c5; --aqua: #35a77c; --purple: #df69ba; --background-dim: #e5dfc5; --background-0: #f3ead3; --background-1: #eae4ca; --background-2: #e5dfc5; --background-3: #ddd8be; --background-4: #d8d3ba; --background-5: #b9c0ab; --background-red: #f4dbd0; --background-visual: #e1e4bd; --background-yellow: #f1e4c5; --background-green: #e5e6c5; --background-blue: #e1e7dd; --gray-0: #a6b0a0; --gray-1: #939f91; --gray-2: #829181;}
/* dark mode */.dark { --foreground: #d3c6aa; --red: #e67e80; --orange: #e69875; --yellow: #dbbc7f; --green: #a7c080; --blue: #7fbbb3; --aqua: #83c092; --purple: #d699b6; --background-dim: #293136; --background-0: #333c43; --background-1: #3a464c; --background-2: #434f55; --background-3: #4d5960; --background-4: #555f66; --background-5: #5d6b66; --background-red: #5c3f4f; --background-visual: #59464c; --background-yellow: #55544a; --background-green: #48584e; --background-blue: #3f5865; --gray-0: #7a8478; --gray-1: #859289; --gray-2: #9da9a0;}
@theme inline { --color-foreground: var(--foreground); --color-red: var(--red); --color-orange: var(--orange); --color-yellow: var(--yellow); --color-green: var(--green); --color-blue: var(--blue); --color-aqua: var(--aqua); --color-purple: var(--purple); --color-bg-dim: var(--background-dim); --color-bg-0: var(--background-0); --color-bg-1: var(--background-1); --color-bg-2: var(--background-2); --color-bg-3: var(--background-3); --color-bg-4: var(--background-4); --color-bg-5: var(--background-5); --color-bg-red: var(--background-red); --color-bg-visual: var(--background-visual); --color-bg-yellow: var(--background-yellow); --color-bg-green: var(--background-green); --color-bg-blue: var(--background-blue); --color-gray-0: var(--gray-0); --color-gray-1: var(--gray-1); --color-gray-2: var(--gray-2); --font-sans: "AtkinsonHyperlegible", sans-serif;}
body { background-color: var(--color-bg-0); color: var(--color-foreground); font-weight: 300;}
.animated-link { @apply hover:scale-105 transition-all ease-in-out duration-300}
.link { @apply hover:cursor-pointer text-blue}
.skeleton { @apply rounded-md animate-pulse bg-gray-0/30}
.surface { @apply bg-gray-2/10 border border-solid rounded-lg p-4}