diff --git a/_includes/base.html b/_includes/base.html
index 6724510..4089b23 100644
--- a/_includes/base.html
+++ b/_includes/base.html
@@ -7,16 +7,14 @@
-
-
+
{{ content }}
diff --git a/bundle.css b/bundle.css
index 465dca5..1d7d55c 100644
--- a/bundle.css
+++ b/bundle.css
@@ -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;
}
diff --git a/img/astolfos/footer.png b/img/astolfos/footer.png
deleted file mode 100644
index c5ee809..0000000
Binary files a/img/astolfos/footer.png and /dev/null differ
diff --git a/img/astolfos/footer.webp b/img/astolfos/footer.webp
new file mode 100644
index 0000000..5fc175f
Binary files /dev/null and b/img/astolfos/footer.webp differ
diff --git a/img/astolfos/header.gif b/img/astolfos/header.gif
new file mode 100644
index 0000000..9da2771
Binary files /dev/null and b/img/astolfos/header.gif differ
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 0000000..d2c0217
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/index.html b/index.html
index 8a1ceca..f7939f2 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@ layout: base.html
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.
+ wowwee a link!
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.