astolfo/astolfo.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redo header

Browse source 
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
This commit is contained in:
Nico 2025-09-03 01:25:14 +10:00
parent f2e910f14a
commit 221763a105
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 80 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

10
_includes/base.html
View file

@ -11,9 +11,13 @@
</head> </head>
<body> <body>
<header> <header>
<h1 id="wave-text"> <marquee>astolfo is such a cutie // church of astolfo!! // such a good girl // breathing in his bussy gas rn</marquee>
<span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span> <div class="flex">
</h1> <h1 id="wave-text">
<span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span>
</h1>
<img src="/img/astolfos/header.gif">
</div>
</header> </header>
<div id="main-page"> <div id="main-page">

131
bundle.css
View file

@ -20,6 +20,20 @@ body {
font-family: ComicShannsMono Nerd Font, Chalkboard, Comic Sans MS, sans-serif; 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 * basic elements
*/ */
@ -46,86 +60,88 @@ a:hover {
*/ */
header { 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; width: auto;
height: 10em; height: 30svh;
margin: auto; margin: auto;
margin-top: 2em;
animation: spinin 1s; 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 { .flex {
transition-duration: 3s; display: flex;
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;
} }
@keyframes wave { @keyframes wave {
0% { 0% {
transform: translateY(0); transform: translateX(0);
} }
25% { 25% {
scale: 120%; scale: 120%;
} }
50% { 50% {
transform: translateY(-50px); transform: translateX(50px);
} }
100% { 100% {
transform: translateY(0px); transform: translateX(0px);
} }
} }
@keyframes spinin { @keyframes spinin {
0% { 0% {
transform: translateY(-100vh); transform: translateX(-100%);
rotate: 360deg;
scale: 300%;
} }
100% { 100% {
transform: translateY(0px); transform: translateX(0px);
rotate: 0deg;
scale: 100%;
} }
} }
@ -142,7 +158,6 @@ nav {
margin-top: 2em; margin-top: 2em;
width: 7em; width: 7em;
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;