Start converting site to MC theme

hackclub · Oct 20, 2024 · aaf89cd · aaf89cd
1 parent 07992b4
commit aaf89cd
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 82 deletions.
diff --git a/CNAME b/CNAME
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><img alt="Boba Drops" src="./images/logo.svg"></a>
+<p align="center"><img alt="Boba Drops" src="./images/logo.png"></a>
 <p align="center">
   <span>Build your first site</span><span> • </span><span>Get free boba</span>
 </p>

diff --git a/fonts/Minecraftia-Regular.ttf b/fonts/Minecraftia-Regular.ttf
diff --git a/images/boba-parrot.gif b/images/boba-parrot.gif
diff --git a/images/boba.svg b/images/boba.svg
diff --git a/images/boba_card1.png b/images/boba_card1.png
diff --git a/images/boba_card2.png b/images/boba_card2.png
diff --git a/images/boba_card3.png b/images/boba_card3.png
diff --git a/images/boba_card4.png b/images/boba_card4.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/index.html b/index.html
@@ -8,10 +8,29 @@
   <meta name="viewport" content="width=450">
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="styles.css">
-  <!-- Fonts -->
-  <link
-    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
-    rel="stylesheet">
+
+<script>
+  const splashText = [
+    'YSWS edition!',
+    'Plug-ins everywhere!',
+    'by HCers, for HCers!',
+    'As seen on Slack!',
+    'Coming soon to a screen in front of you!',
+    'More than 1 plugins sold!',
+    'A modder is you!'
+  ]
+  const getSplash = () => document.querySelector('.splash')
+  function cycleSplash() {
+    let splash = getSplash()
+    if (splash) {
+      const randomSplash = splashText[Math.floor(Math.random() * splashText.length)]
+      splash.innerText = randomSplash
+    }
+  }
+  window.onload = function () {
+    cycleSplash()
+  }
+</script>
 </head>
 
 <body>
@@ -20,14 +39,16 @@
       alt="Dinosaur arm holding flag that reads 'Hack Club'">
   </a>
   <div id="header">
-    <img src="images/logo.svg" alt="Boba Drops Logo" width="90%" height="auto">
+    <div style="position: relative; padding-bottom: 5em;">
+      <img src="images/logo.png" alt="Boba Drops Logo" width="90%" height="auto">
+      <div class="splash" onclick="cycleSplash()"></div>
+    </div>
     <div id="subtitle" style="font-size: 1.2em;">
-      <span>Build a site</span>
+      <span>Ship a mod</span>
       <div class="spacer"></div>
-      <span>Get free boba</span>
+      <span>Get a game key</span>
     </div>
     <a id="form-link" class="hoverable" href="https://forms.hackclub.com/t/tLf8GYVBqSus" target="_blank">Get your boba</a>
-    <a style="margin-top: 1em;" class="hoverable" href="https://forms.hackclub.com/t/5r7VGppu9wus" target="_blank">Run a club meeting</a>
   </div>
   <div id="content">
     <!-- Steps! -->
@@ -54,10 +75,6 @@
       </div>
     </div>
   </div>
-  <!-- Video!
-    <div class="container">
-      <iframe class="yt-embed" src="https://www.youtube.com/embed/OiYav0MhU4I?si=GA1xU0y-W2aCGC5W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-    </div> -->
   <!-- Text description -->
   <div class="container">
     <div class="section">

diff --git a/styles.css b/styles.css
@@ -1,20 +1,50 @@
 body {
     color: #F6D193;
     margin: 0;
-    font-family: "Fraunces", monospace;
-    background: #C76B0F;
+    font-family: monospace;
+    background: #60c965;
     font-size: 1.5em;
 }
+
+@font-face {
+    font-family: 'Minecraftia';
+    src: url('./fonts/Minecraftia-Regular.ttf') format('truetype');
+
+}
+
+.splash {
+    font-family: 'Minecraftia', sans-serif;
+    font-size: 1rem;
+    color: #f5ca0b;
+    transform: rotate(-7deg);
+    animation: splash 0.25s alternate infinite;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 40%;
+}
+
+@keyframes splash {
+    0% {
+      transform: scale(0.875) rotate(-20deg);
+    }
+    100% {
+      transform: scale(1) rotate(-20deg);
+    }
+  }
+
+
 #header {
     padding: 1em;
-    background-color: #C76B0F;
-    background-image: linear-gradient(to bottom right, #C76B0F, #A25404);
-    display:flex;
+    background-color: #60c965;
+    background-image: linear-gradient(to bottom right, #275236, #2c6244);
+    display: flex;
     justify-content: center;
     align-items: center;
     min-height: 70vh;
     flex-direction: column;
 }
+
 #header img {
     max-width: 50rem;
 }
@@ -42,6 +72,7 @@ a {
 .hoverable {
     transition: 0.3s;
 }
+
 .hoverable:hover {
     transform: translateY(-5px);
 }
@@ -112,39 +143,42 @@ a {
     margin-right: auto;
     border-radius: 1em;
 }
+
 .spacer {
     margin: 1em;
 }
+
 .banner {
     position: absolute;
     top: -10px;
     left: var(--spacing-4);
-  }
-  
-  .banner img {
+}
+
+.banner img {
     height: 80px;
-  }
-  
-  .banner:hover img {
+}
+
+.banner:hover img {
     animation: wave-flag 0.5s linear infinite alternate;
-  }
-  
-  @media (prefers-reduced-motion: reduce) {
+}
+
+@media (prefers-reduced-motion: reduce) {
     .banner:hover img {
-      transition: 0.1875s cubic-bezier(0.375, 0, 0.675, 1) transform;
-      transform-origin: top left;
+        transition: 0.1875s cubic-bezier(0.375, 0, 0.675, 1) transform;
+        transform-origin: top left;
     }
-  }
+}
 
-  @keyframes wave-flag {
+@keyframes wave-flag {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
+
     100% {
-      transform: rotate(-5deg);
+        transform: rotate(-5deg);
     }
-  }
+}
 
 button {
-    background-color: #603101!important;
+    background-color: #603101 !important;
 }