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

add favicon, make header wayyy better, optimise images

Browse source 
site is now around 1mb
This commit is contained in:
Nico 2025-08-04 23:20:35 +10:00
parent 940f74ac5f
commit c95c71a677
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
7 changed files with 103 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

14
_includes/base.html
View file

@ -7,16 +7,14 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bundle.css">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head>
<body>
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/store">store</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/services">services</a></li>
</ul>
</nav>
<header>
<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>
</header>
<div style="padding: 2em;">{{ content }}</div>

121
bundle.css
View file

@ -3,11 +3,15 @@
--accent: #ff1b8d;
--accent2: #FA7DBC;
--background: #fba0e3;
--background-body: #fdc6ee;
--background-body: #ffcff1;
--rounding: 8em;
--transitiondur: 0.3s;
}
* {
transition-duration: var(--transitiondur);
}
body {
padding: 0px;
margin: auto;
@ -26,44 +30,62 @@ a {
}
a:hover {
color: black;
background-color: var(--accent2);
border-radius: var(--rounding);
background-color: var(--text);
rotate: -2deg;
scale: 125%;
transform: translateY(-10px);
display: inline-block;
padding: 10px;
margin: -10px;
display: inline-block;
}
/*
* navbar
* header
*/
nav {
margin: 1em;
padding: 0.5em;
padding-left: 0.5em;
padding-right: 3em;
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;
background-color: var(--background);
width: 60em;
height: 30em;
margin: auto;
margin-top: 2em;
animation: spinin 1s;
}
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: relative;
top: 3em;
margin: auto;
font-size: 8em;
height: fit-content;
width: fit-content;
position: fixed;
right: 0;
top: 0;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
nav ul {
list-style-type: none;
#wave-text * {
animation: wave 3s infinite;
display: inline-block;
}
nav li{
display: inline;
}
nav a{
transition-duration: 0.3s;
header a{
padding: 0.3em;
display: inline-block;
border-radius: var(--rounding);
@ -71,7 +93,7 @@ nav a{
color: var(--text);
}
nav a:hover {
header a:hover {
background-color: var(--accent2);
scale: 200%;
transform: translateY(-5px) rotate(-7deg);
@ -79,6 +101,43 @@ nav a:hover {
margin-right: 2em;
}
@keyframes wave {
0% {
transform: translateY(0);
}
25% {
scale: 120%;
}
50% {
transform: translateY(-50px);
}
75% {
scale: 140%;
}
100% {
transform: translateY(0px);
}
}
@keyframes spinin {
0% {
transform: translateY(-100vh);
rotate: 360deg;
scale: 300%;
}
100% {
transform: translateY(0px);
rotate: 0deg;
scale: 100%;
}
}
/*
* nav/sidebar
*/
/*
* footer
*/
@ -94,7 +153,7 @@ footer {
border-top-left-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;
background-image: url("/img/astolfos/footer.png");
background-image: url("/img/astolfos/footer.webp");
background-position: 100% 100%;
background-size: 10em;
background-repeat: no-repeat;
@ -114,6 +173,18 @@ footer p,hr,div {
}
@media (max-width: 1000px) {
header {
margin: none;
width: 100%;
height: auto;
border-radius: 0px;
margin-top: 0px;
}
header h1 {
top: 0.3em;
}
footer {
flex-direction: column;
}

BIN
img/astolfos/footer.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/astolfos/footer.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
img/astolfos/header.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 942 KiB

BIN
img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 463 KiB

1
index.html
View file

@ -5,6 +5,7 @@ layout: base.html
<p>Nisi officia excepteur cillum cillum adipisicing pariatur. Lorem fugiat fugiat proident et. Ullamco quis ea enim Lorem irure eu dolore nostrud id. Deserunt mollit in ipsum officia nisi dolor cupidatat ex ad pariatur. Velit sunt esse ad ex non adipisicing aliqua nostrud eu voluptate officia quis ut aute cupidatat. Laboris dolor laborum irure. Sit mollit reprehenderit cillum magna minim amet ullamco ut enim aliqua incididunt proident ad excepteur.
Deserunt id ea incididunt. Aliqua duis nisi sit minim non adipisicing commodo dolor ea elit minim commodo cillum. Quis laborum sit ad commodo nulla est. Reprehenderit aliquip ullamco minim veniam eiusmod anim anim mollit labore culpa.
<a href="https://https://www.google.com/search?q=astolfo+is+so+hot">wowwee a link!</a>
Nulla laborum officia veniam quis in irure. Elit enim ullamco pariatur dolore minim dolore excepteur. Fugiat commodo mollit mollit reprehenderit non magna ad ut consectetur. Tempor proident ex duis id. Sunt incididunt irure sint. Do sint velit veniam eiusmod sit sint veniam reprehenderit sint amet anim aliqua ad velit minim. Anim cupidatat sit nulla.