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

Compare commits

base: astolfo:78c7e9e73c16d88a109d3981454577ab499fee7a
Branches Tags
astolfo:master
astolfo:better-branch
...
compare: astolfo:1d3699566a8a5224317ed7333cef6b308c0210df
Branches Tags
astolfo:master
astolfo:better-branch

3 commits
78c7e9e73c ... 1d3699566a

Author SHA1 Message Date
Nico
1d3699566a
add buttons 
casual get to work find me more buttons to add
 2025-09-03 01:46:17 +10:00
Nico
221763a105
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
 2025-09-03 01:25:14 +10:00
Nico
f2e910f14a
make navbar a sidebar 2025-09-03 00:49:59 +10:00
4 changed files with 140 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

35
_includes/base.html
View file

@ -10,20 +10,33 @@
<link rel="icon" type="image/x-icon" href="/img/favicon.ico"> <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head> </head>
<body> <body>
<nav>
<a href="/">home</a>
<a href="/blog">blog</a>
<a href="/store">store</a>
<a href="https://git.astolfo.org">git</a>
</nav>
<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 style="padding: 2em;">{{ content }}</div> <div id="main-page">
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/store">store</a></li>
<li><a href="https://git.astolfo.org">git</a></li>
</ul>
<div id="buttons">
<h2>buttons!!!</h2>
<a><img src="/img/buttons/ublock-now.png"></a>
<a><img src="/img/buttons/firefox.gif"></a>
</div>
</nav>
<div style="margin: 2em;">{{ content }}</div>
</div>
<footer class="horizontal-flex"> <footer class="horizontal-flex">
<marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee> <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>

186
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"); width: auto;
background-position: 100% 100%; height: 30svh;
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: 60em;
height: 30em;
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: relative;
top: 3em;
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%;
} }
} }
@ -133,22 +149,52 @@ header a:hover {
* nav/sidebar * nav/sidebar
*/ */
nav { #main-page {
list-style-type: none;
justify-content: space-evenly;
display: flex; display: flex;
flex-direction: reverse-row;
} }
nav a { nav {
color: var(--text) !important; margin-top: 2em;
} width: 7em;
nav a:hover { ul {
color: var(--accent2); margin: 0;
background-color: inherit; padding: 0;
transform: none; }
scale: 100%;
rotate: 0deg; li {
color: var(--text) !important;
background-color: var(--background);
border-radius: var(--rounding);
list-style-type: none;
margin: 0;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
width: 6em;
}
a {
color: black;
text-decoration: none;
}
li:hover {
transform: scale(125%);
filter: hue-rotate(60deg);
border: white 2px solid;
background-image: url("/img/astolfos/header.gif");
background-position: 100% 100%;
background-size: 100% 100%;
}
a:hover {
background-color: inherit;
transform: none;
rotate: 0deg;
}
} }
/* /*

BIN
img/buttons/firefox.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
img/buttons/ublock-now.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB