feat: create hayflow, a zola theme

static/style.css

@@ -0,0 +1,240 @@
+:root {
+	--light-purple: #b0a4e3;
+	--dark-purple: #1a222c;
+	--transition-duration: 500ms;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html,
+body,
+.fullflex {
+	display: flex;
+	flex-direction: column;
+	width: 100vw;
+	min-width: 100vw;
+	max-width: 100vw;
+	min-height: 100vh;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: 'Roboto', sans-serif;
+	overflow: overlay;
+}
+
+#particles {
+	position: fixed;
+	height: 100vh;
+	z-index: -1;
+	background-color: #1a222c;
+}
+
+#splash {
+	color: white;
+	text-align: center;
+	margin: auto;
+}
+
+#name {
+	display: inline;
+	font-size: 7em;
+	transition: var(--transition-duration);
+}
+
+#name em {
+	color: var(--light-purple);
+	font-style: normal;
+	transition: var(--transition-duration);
+}
+
+#name:hover {
+	color: var(--light-purple);
+}
+
+#name:hover em {
+	color: white;
+}
+
+#roles p {
+	font-size: 2em;
+	margin-bottom: 0.7em;
+}
+
+#roles span {
+	transition: var(--transition-duration);
+}
+
+#roles span:hover {
+	color: var(--light-purple);
+}
+
+#links {
+	margin-bottom: 2em;
+}
+
+#links p a i {
+	color: white;
+	width: 1.73em;
+	height: 1.73em;
+	margin: 0 15px;
+	padding: 10px;
+	border-radius: 50%;
+	border: 2px solid var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+#links p a i:hover {
+	border: 2px solid white;
+	color: var(--light-purple);
+	transform: rotate(30deg);
+}
+
+#internal_links p a {
+	margin: 2em;
+	color: white;
+	font-size: 1.5em;
+	text-underline-offset: 0.4em;
+	text-decoration: underline var(--dark-purple);
+	transition: var(--transition-duration);
+}
+
+#internal_links p a:hover {
+	color: var(--light-purple);
+	text-decoration-color: white;
+}
+
+.arrows {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	translate: 0 -50%;
+}
+
+.arrows .down {
+	--factor: -1;
+}
+
+.arrows i {
+	padding: 1%;
+	color: var(--light-purple);
+	animation-duration: 1s;
+	animation-name: arrow_anim;
+	animation-iteration-count: infinite;
+	animation-timing-function: cubic-bezier(.7, 0, 0, .7);
+}
+
+@keyframes arrow_anim {
+	50% {
+		transform: scale(1.2) translateY(calc(var(--factor, 1) * 50%));
+		color: var(--dark-purple);
+	}
+}
+
+.card {
+	margin: auto;
+	padding: 1.5em;
+	min-width: 30%;
+	max-width: 60%;
+
+	color: white;
+	text-align: justify;
+	text-align-last: center;
+	background-color: var(--dark-purple);
+
+	border-radius: 30px;
+	border: 2px solid var(--light-purple);
+	box-shadow: 0px 0px 15px 10px rgba(176, 164, 227, 0.25);
+}
+
+.card :is(h1, h2) {
+	text-align: center;
+	margin-bottom: 1em;
+	color: var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+.card h2 {
+	margin: 0.5em;
+}
+
+.card p {
+	line-height: 1.5em;
+	margin-bottom: 1.5em;
+	transition: var(--transition-duration);
+}
+
+.card a {
+
+	transition: var(--transition-duration);
+}
+
+.card:hover :is(h1, h2) {
+	color: white;
+}
+
+.card:hover p {
+	color: var(--light-purple);
+}
+
+.card:hover a {
+	color: white;
+}
+
+.columns {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+	align-content: space-around;
+}
+
+.columns div {
+	margin: 1%;
+}
+
+.columns i {
+	margin: 0 0.25em 0.5em 0.25em;
+	transition: var(--transition-duration);
+}
+
+.columns i:hover {
+	color: var(--light-purple);
+}
+
+.list {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 3%;
+}
+
+.list p {
+	margin: 0;
+}
+
+.list a {
+	color: var(--light-purple);
+}
+
+.list a.list_link {
+	padding: 0.5em;
+	margin: 0 1%;
+	text-decoration: none;
+	color: var(--light-purple);
+	border-radius: 5px;
+	border: 2px solid var(--light-purple);
+	transition: var(--transition-duration);
+}
+
+.list a.list_link:hover {
+	border-color: white;
+	background-color: var(--light-purple);
+	color: white;
+}