From 221763a1050b27b4e82b12c3b97fb5b391bcf7cc Mon Sep 17 00:00:00 2001 From: Nico Date: Wed, 3 Sep 2025 01:25:14 +1000 Subject: [PATCH] redo header a lot a lot better now, actually matches nav bar too. probably replace image in it with something else later. and make the marquee seem endless and add more lines to it and stuff --- _includes/base.html | 10 +++- bundle.css | 131 ++++++++++++++++++++++++-------------------- 2 files changed, 80 insertions(+), 61 deletions(-) diff --git a/_includes/base.html b/_includes/base.html index 7227b47..c42c56d 100644 --- a/_includes/base.html +++ b/_includes/base.html @@ -11,9 +11,13 @@
-

- astolfo! -

+ astolfo is such a cutie // church of astolfo!! // such a good girl // breathing in his bussy gas rn +
+

+ astolfo! +

+ +
diff --git a/bundle.css b/bundle.css index 913bd7d..1703030 100644 --- a/bundle.css +++ b/bundle.css @@ -20,6 +20,20 @@ body { font-family: ComicShannsMono Nerd Font, Chalkboard, Comic Sans MS, sans-serif; } +a { + padding: 0.3em; + display: inline-block; + border-radius: var(--rounding); + text-decoration: none; + color: var(--text); +} + +a:hover { + background-color: var(--accent2); + transform: translateY(-5px) rotate(-7deg) scale(200%); + margin-left: 2em; + margin-right: 2em; +} /* * basic elements */ @@ -46,86 +60,88 @@ a:hover { */ header { - background-image: url("/img/astolfos/header.gif"); - background-position: 100% 100%; - background-size: 100% 100%; - border-radius: var(--rounding); - box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; - width: auto; - height: 10em; + height: 30svh; margin: auto; - margin-top: 2em; animation: spinin 1s; + + border-bottom-left-radius: var(--rounding); + border-bottom-right-radius: var(--rounding); + + marquee { + color: var(--text); + background-color: var(--accent2); + } + +/* h1 { + border-radius: var(--rounding); + background-color: var(--accent2); + + position: absolute; + left: 0px; + margin: auto; + font-size: 8em; + height: fit-content; + width: fit-content; + box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; + }*/ + + h1 { + text-orientation: mixed; + writing-mode: vertical-lr; + margin-left: 0px; + margin-right: 0px; + + color: var(--background-body); + background-color: var(--accent2); + -webkit-text-stroke: 2px var(--text); + } + + .flex { + margin-left: 0px; + padding-left: 0px; + height: inherit; + } + + img { + width: 100%; + object-fit: cover; + max-height: 100%; + border-bottom-right-radius: var(--rounding); + } + + #wave-text * { + animation: wave 3s infinite; + display: inline-block; + + } } -header:hover { - transition-duration: 3s; - scale: 125%; - transform: translateY(10%); - filter: hue-rotate(360deg); -} - -header h1 { - border-radius: var(--rounding); - background-color: var(--accent2); - - position: absolute; - left: 0px; - margin: auto; - font-size: 8em; - height: fit-content; - width: fit-content; - box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; -} - -#wave-text * { - animation: wave 3s infinite; - display: inline-block; - -} - -header a{ - padding: 0.3em; - display: inline-block; - border-radius: var(--rounding); - text-decoration: none; - color: var(--text); -} - -header a:hover { - background-color: var(--accent2); - scale: 200%; - transform: translateY(-5px) rotate(-7deg); - margin-left: 2em; - margin-right: 2em; +.flex { + display: flex; } @keyframes wave { 0% { - transform: translateY(0); + transform: translateX(0); } 25% { scale: 120%; } 50% { - transform: translateY(-50px); + transform: translateX(50px); } 100% { - transform: translateY(0px); + transform: translateX(0px); } } @keyframes spinin { 0% { - transform: translateY(-100vh); - rotate: 360deg; - scale: 300%; + transform: translateX(-100%); } 100% { - transform: translateY(0px); - rotate: 0deg; - scale: 100%; + transform: translateX(0px); } } @@ -142,7 +158,6 @@ nav { margin-top: 2em; width: 7em; - ul { margin: 0; padding: 0;