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!
+
+
+
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;