Added back the mascots and fixed up the styles.

Author: Reiuiji

content/_index.md

@@ -2,42 +2,13 @@
 
 ---
 
-<style type="text/css">
-.discord-box {
-	margin-left: auto;
-	margin-right: auto;
-	width: 480px;
-	max-width: 90vw;
-	border: 1px solid #aebbea;
-	background-color: #104466;
-	border-radius: 5px;
-	padding: 10px;
-	text-align: center;
-}
-
-p {
-	font-size: 1.3em;
-}
-
-.vendors h2 {
-	margin-top: 0;
-}
-
-.vendors p:last-child {
-	margin-bottom: 0;
-}
-
-.content > div {
-	display: flex;
-}
-</style>
 <div style="display: inline-block; list-style: none; margin-left: auto; margin-right: auto; max-width: 1200px; flex-grow: 1; text-align: center; align-items: center " class="main">
-	<!--<div class="adventure">
+	<div class="adventure">
         <img class="aerial_soundwaves" src="/images/Aerial_Soundwaves_winter.png" >
         <img class="bit_rate" src="/images/BitRate_winter.png" >
         <img class="neural_net" src="/images/NeuralNet_winter.png" >
-    </div>-->
-	<div class="text-box" style="display:inline-block; flex-grow: 1; flex-direction: column; justify-content: space-around; text-align: center; flex-grow: 1; width: 500px;">
+    </div>
+	<div class="text-box" >
         <h1 style="font-size: 2.8em; margin: 0">PonyFest Online x PVFM 14th Birthday</h1>
         <p style="font-size: 2em; margin: 0">Saturday, January 25th 2025</p>
         <p style="font-size: 2em; margin: 0">Sunday, January 26th 2025</p>

static/css/main.css

@@ -43,7 +43,11 @@ html {
 }
 
 .text-box {
-    /* width: 500px; */
+    width: 500px;
+    display:inline-block;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: space-around;
     max-width: 80vw;
     border: 1px solid #182f7b;
     background-color: #90c9f0;
@@ -71,6 +75,7 @@ footer a {
     display: flex;
     flex-direction: column;
     min-height: calc(100vh - 2em);
+    text-align: center;
 }
 
 .content > div {

static/css/winter.css

@@ -5,29 +5,29 @@
 /*    height: 500px; !* Set a height for the container *!*/
 /*}*/
 .adventure {
-    position: fixed; /* Fixed to the viewport */
-    top: 50px; /* Distance from the top of the viewport */
-    left: 50px; /* Distance from the left of the viewport */
-    z-index: 1000; /* Ensure it appears above other elements */
+    top: 0; /* Distance from the top of the viewport */
+    left: 0; /* Distance from the left of the viewport */
+    height: 60%;
+    width: 100%;
 }
 
 img {
-    position: absolute;
-    width: 400px; /* Set a fixed width for the images */
+    /*position: absolute;*/
+    width: 25%; /* Set a fixed width for the images */
     height: auto; /* Maintain aspect ratio */
 }
 
 .aerial_soundwaves {
-    top: 0; /* Offset image 1 from the top */
-    left: 300px; /* Offset image 1 from the left */
+    top: 30%; /* Offset image 1 from the top */
+    left: 15%; /* Offset image 1 from the left */
 }
 
 .bit_rate {
-    top: -50px; /* Offset image 2 from the top */
-    left: 1400px; /* Offset image 2 to the right of image 1 */
+    top: 10%; /* Offset image 2 from the top */
+    left: 75%; /* Offset image 2 to the right of image 1 */
 }
 
 .neural_net {
-    top: 200px; /* Offset image 2 from the top */
-    left: 1100px; /* Offset image 2 to the right of image 1 */
+    top: 30%; /* Offset image 2 from the top */
+    left: 60%; /* Offset image 2 to the right of image 1 */
 }