diff --git a/_src/assets/css/default/default.css b/_src/assets/css/default/default.css index 7cbae81..f3654b8 100644 --- a/_src/assets/css/default/default.css +++ b/_src/assets/css/default/default.css @@ -209,7 +209,7 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img { width: auto; } - body>nav::before { + body>nav::before, body>nav::after { content: none; } diff --git a/_src/assets/css/default/home.css b/_src/assets/css/default/home.css index f3fc674..78547c7 100644 --- a/_src/assets/css/default/home.css +++ b/_src/assets/css/default/home.css @@ -7,7 +7,6 @@ transform: translateY(-4px); } } - @keyframes slide { 0% { background-position: 0% 100%; @@ -17,7 +16,6 @@ background-position: 200% 100%; } } - article#bio { & ul { margin: 0 var(--pad-xl); diff --git a/_src/assets/css/default/nav.css b/_src/assets/css/default/nav.css index 541d4cf..b4ae854 100644 --- a/_src/assets/css/default/nav.css +++ b/_src/assets/css/default/nav.css @@ -14,11 +14,25 @@ body::after { body>nav::before { bottom: 0; left: 0; - mask-size: 150%; - -webkit-mask-position-x: -10px; + mask-size: 160%; + -webkit-mask-position-x: -25px; -webkit-mask-position-y: 90%; } +body>nav::after { + top: 0; + left: 0; + width: var(--view); + content: ""; + position: absolute; + height: 100%; + z-index: -2; + pointer-events: none; + mask-image: var(--paw-tiled); + animation: navbg 10s linear infinite; + mask-size: 128px; +} + body::after { content: none; mask-size: 100%; diff --git a/_src/assets/css/default/theme-dark.css b/_src/assets/css/default/theme-dark.css index ed57075..ac9b133 100644 --- a/_src/assets/css/default/theme-dark.css +++ b/_src/assets/css/default/theme-dark.css @@ -1,7 +1,10 @@ @media (prefers-color-scheme: dark) { - article, body { + + article, + body { color: var(--secondary-light-300); } + article { border-color: var(--secondary-300); background-color: var(--secondary-200); @@ -35,57 +38,67 @@ code { border-color: var(--secondary-400); } + /* blog.css */ & [aria-label="Postscript"]::after { background-color: var(--secondary); } + & [aria-label="Post warning"] { background-color: var(--secondary); color: var(--secondary-100); + &::before, &::after { background-color: var(--secondary); } } + & [aria-label="Addendum"] { box-shadow: inset 0 0 0 2px var(--secondary); - border-image-source: linear-gradient( - 45deg, - var(--secondary), - var(--secondary-600), - var(--secondary) - ); + border-image-source: linear-gradient(45deg, + var(--secondary), + var(--secondary-600), + var(--secondary)); background-color: var(--secondary-400); } } + #posts { & p:not(:last-child) { color: var(--secondary-light-700); } } + /* default.css */ body { background-color: var(--secondary-100); + /* this is cursed */ & :is(a, button) { color: var(--secondary-light-400); border-color: var(--secondary-600); background-color: var(--secondary-300); + &:is(:hover, :focus) { color: var(--secondary-light-500); border-color: currentColor; background-color: var(--secondary-500); } - &:is(.header-anchor):is(:hover, :focus) { + + &:is(.header-anchor):is(:hover, :focus) { background-color: var(--secondary-light-400); color: var(--secondary-300); box-shadow: 0 0 0 2px var(--secondary-300); } } - & > nav { + + &>nav { border-color: var(--secondary); + & details { background-color: var(--secondary-100); + &:not([open]) summary { color: var(--secondary); } @@ -102,37 +115,46 @@ background-color: var(--secondary-light-500); } } - &::before, - ::after { + + &::before { background-color: var(--secondary); } + + &::after { + background-image: linear-gradient(to bottom, var(--secondary-600) 0%, transparent 30vw); + } } &::after { background-color: var(--secondary); } } + /* home.css */ ul:not([role]) li::before { background-color: var(--secondary-light-300); } + #interests { & a:is(:hover, :focus):not(.header-anchor) { box-shadow: 0 0 0 1px currentColor; background-color: var(--secondary-500); } + & img { - box-shadow: 0 0 0 1px - color-mix(in lch, transparent, var(--secondary-500) 70%); + box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--secondary-500) 70%); } + & details h3 { border-color: var(--secondary-600); } } + a:has(img[src*="/assets/img/button"]) { background-color: unset; + &:is(:hover, :focus) img { filter: drop-shadow(4px 6px 0 var(--secondary-500)); } } -} +} \ No newline at end of file diff --git a/_src/assets/css/default/theme-light.css b/_src/assets/css/default/theme-light.css index 0d28739..eb06a52 100644 --- a/_src/assets/css/default/theme-light.css +++ b/_src/assets/css/default/theme-light.css @@ -1,7 +1,10 @@ @media (prefers-color-scheme: light) { - article, body { + + article, + body { color: var(--primary-dark-300); } + article { border-color: var(--primary-300); background-color: var(--primary-200); @@ -35,57 +38,67 @@ code { border-color: var(--primary-400); } + /* blog.css */ & [aria-label="Postscript"]::after { background-color: var(--primary); } + & [aria-label="Post warning"] { background-color: var(--primary); color: var(--primary-dark-100); + &::before, &::after { background-color: var(--primary); } } + & [aria-label="Addendum"] { box-shadow: inset 0 0 0 2px var(--primary); - border-image-source: linear-gradient( - 45deg, - var(--primary), - var(--primary-600), - var(--primary) - ); + border-image-source: linear-gradient(45deg, + var(--primary), + var(--primary-600), + var(--primary)); background-color: var(--primary-400); } } + #posts { & p:not(:last-child) { color: var(--primary-dark-700); } } + /* default.css */ body { background-color: var(--primary-100); + /* this is cursed */ & :is(a, button) { color: var(--primary-dark-400); border-color: var(--primary-600); background-color: var(--primary-400); + &:is(:hover, :focus) { color: var(--primary-dark-500); border-color: currentColor; background-color: var(--primary-500); } - &:is(.header-anchor):is(:hover, :focus) { + + &:is(.header-anchor):is(:hover, :focus) { background-color: var(--primary-dark-400); color: var(--primary-300); box-shadow: 0 0 0 2px var(--primary-300); } } - & > nav { + + &>nav { border-color: var(--primary); + & details { background-color: var(--primary-100); + &:not([open]) summary { color: var(--primary); } @@ -102,37 +115,46 @@ background-color: var(--primary-dark-500); } } - &::before, - &::after { + + &::before { background-color: var(--primary); } + + &::after { + background-image: linear-gradient(to bottom, var(--primary-600) 0%, transparent 30vw); + } } &::after { background-color: var(--primary); } } + /* home.css */ ul:not([role]) li::before { background-color: var(--primary-dark-300); } + #interests { & a:is(:hover, :focus):not(.header-anchor) { box-shadow: 0 0 0 1px currentColor; background-color: var(--primary-500); } + & img { - box-shadow: 0 0 0 1px - color-mix(in lch, transparent, var(--primary-dark-500) 30%); + box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--primary-dark-500) 30%); } + & details h3 { border-color: var(--primary-dark-600); } } + a:has(img[src*="/assets/img/button"]) { background-color: unset; + &:is(:hover, :focus) img { filter: drop-shadow(4px 6px 0 var(--primary-500)); } } -} +} \ No newline at end of file diff --git a/_src/assets/css/default/variables.css b/_src/assets/css/default/variables.css index e07515d..cb3260e 100644 --- a/_src/assets/css/default/variables.css +++ b/_src/assets/css/default/variables.css @@ -50,8 +50,19 @@ --pad-sm: 0.4rem; --flag: 45deg; --paw: url("/assets/img/theme/paw.svg"); + --paw-tiled: url("/assets/img/theme/paw-tiled.png"); --sunny: url("/assets/img/theme/citrus/sundae.png") } +@keyframes navbg { + 0% { + mask-position: 0rem 0rem; + } + + 100% { + mask-position: 16rem 16rem; + } +} + @font-face { font-family: Rubik; src: url("/assets/fonts/Rubik.ttf") format("truetype"); diff --git a/_src/data/changelog/2023-03-12.md b/_src/data/changelog/2023-03-12.md index 7f6b0c8..7e539a0 100644 --- a/_src/data/changelog/2023-03-12.md +++ b/_src/data/changelog/2023-03-12.md @@ -1,5 +1,5 @@ - Added [Home](/home), [Gallery](/gallery) and ~~About~~ - ~~About~~ contains Pokémon boxes and a small bio -- Added `a hrefs` to other pages +- Added links to other pages - Added `header` - Added a portrait of Sunny of his PETSCII avatar diff --git a/_src/data/changelog/2023-03-16.md b/_src/data/changelog/2023-03-16.md index 40f5811..29cdaac 100644 --- a/_src/data/changelog/2023-03-16.md +++ b/_src/data/changelog/2023-03-16.md @@ -12,4 +12,4 @@ title: Version 0 - Tiled icon of Sunny for the inner background - Attribution: - - [Terence Eden's SuperTinyIcons GitHub repository](https://github.com/edent/SuperTinyIcons) (MIT) - Social link icons, for sidebar buttons + - [Terence Eden's SuperTinyIcons GitHub repository](https://github.com/edent/SuperTinyIcons) (MIT) diff --git a/_src/data/changelog/2025-09-10.md b/_src/data/changelog/2025-09-10.md index b03664b..9127615 100644 --- a/_src/data/changelog/2025-09-10.md +++ b/_src/data/changelog/2025-09-10.md @@ -1,4 +1,6 @@ - Website (hopefully) fixed for Chromium-based browsers _...grr_ +- Changed sidebar + - Added an animated tiled paw background for desktop view - Changed [Home](/home) - Updated the Pokémon box, now using a spritesheet instead of individual files - Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.
(Works great if you've [forked my site](https://bunsin.space/forgejo/sundae/website) and want to change it to include your personal favorites, though!) @@ -6,5 +8,5 @@ - Changed [Changelog](/changelog) - **Actually** processed with [Prettier](https://github.com/prettier/prettier), now. - Attribution: - - [PokéSprite](https://github.com/msikma/pokesprite) (MIT) + - [PokéSprite GitHub repository](https://github.com/msikma/pokesprite) (MIT) - [PokéSprite - generated spritesheet](https://github.com/msikma/pokesprite-spritesheet/)