Mobile friendly styling, example projects display, promo text examples

.gitignore

@@ -0,0 +1 @@
+node_modules/**/*

index.html

@@ -24,23 +24,45 @@
 
 
     <div>
-        <ul style="list-style: none; display: flex; margin-left: -15px">
+        <ul class="top-nav">
+            <!--<li><a href="support.html">Support</a></li>-->
+            <!--<li style="font-size: 25px;">Candlestick!</li>-->
+            <li><a href="https://www.wickeditor.com/#/learn/">Learn</a></li>
+            <li><a href="https://candlestickers.app">Create</a></li>
             <li><a href="https://discord.gg/5esxxWxd7Z" target="_blank">Discord</a></li>
-            <li>Support</li>
-            <li style="font-size: 25px;">Candlestick!</li>
-            <li>Learn</li>
-            <li>About</li>
         </ul>
     </div>
 
 
     <div id="banner">
-        <img src="cs_banner.png" width="900px" style="margin: auto; display: flex; margin-top: -50px;">
+        <img src="cs_banner.png" width="900px">
+    </div>
+
+    <div class="launch-and-download-buttons-container">
+        <div class="download-buttons-container">
+            <img src="public/logo-apple.png" class="download_button" width="25px" style="margin-top: -5px;" >
+            <img src="public/logo-windows.png" class="download_button" width="35px" >
+            <img src="public/logo-linux.png" class="download_button" width="35px" >
+        </div>
+
+        <button class="launch_button" onclick="window.open('https://candlestickers.app','_blank')">
+            Launch Web Editor!
+        </button>
+    </div>
+
+    <div class="promo-container">
+        <div class="promo-container-text">
+            <p>Candlestick is a free, open-source tool for creating games, animations, and everything in-between!</p>
+            <p>Candlestick is a fork of <a href="https://www.wickeditor.com">Wick Editor</a> that aims to bring much needed updates and new features etc. etc. [add better description here]</a></p>
+        </div>
+        <iframe id="promo-video" frameborder="0" src="display.mp4" width="720" height="395"></iframe>
     </div>
 
+    <!--
     <h1 class="typewriter">
         <i class="typewriter">Presents to you...</i>
     </h1>
+-->
 
 
 
@@ -49,15 +71,13 @@ <h1 class="typewriter">
     <!-- DEMO TILES -->
 
 
-    <!-- iframe displays video at first, later transforms into any opened game tile thing -->
-    <div id="iframe-container">
-        <iframe frameborder="0" src="display.mp4" width="720" height="395"></iframe>
-    </div>
 
-    <!--
 
 
-    <p>Check out games created with Candlestick!</p>
+    <p class="projects-examples-header">Check out these projects created with Candlestick!</p>
+
+    <div id="iframe-container" style="display: none;">
+    </div>
 
     <div class="square-grid">
         <div class="square" onclick="showIframe(`https://itch.io/embed-upload/10607562?color=000000`)">
@@ -85,7 +105,7 @@ <h1 class="typewriter">
 
         <div class="square">
             <img src="vite.svg" alt="Game 3">
-        </div> -->
+        </div>
 
 
 
@@ -97,12 +117,6 @@ <h1 class="typewriter">
 <!--         <h1>Introducting <i>Candlestick!</i></h1>
         <h2>Animation and Game Development a click away!</h2> -->
 
-        <img src="public/logo-apple.png" class="download_button" width="25px" style="margin-top: -5px;" >
-        <img src="public/logo-windows.png" class="download_button" width="35px" >
-
-        <button class="launch_button" onclick="window.open('https://candlestickers.app','_blank')">
-            Launch Web Editor!
-        </button>
 
 
 

src/main.js

@@ -139,6 +139,7 @@ function drawBackground() {
 // === IFRAME HANDLER ===
 function showIframe(link) {
     const container = document.getElementById('iframe-container');
+    container.style.display = 'flex';
     container.innerHTML = `
         <iframe
             frameborder="0"

src/style.css

@@ -1,3 +1,7 @@
+body, html {
+    width: 100%;
+}
+
 * {
     font-family: "Nunito";
     color: rgb(255, 255, 255);
@@ -25,18 +29,58 @@ p {
     z-index: -1;
 }
 
-
 #banner {
     /* background-color: rgb(0, 0, 0); */
     width: 100%;
-    height: 325px;
     z-index: -2;
 }
+#banner img {
+    margin: auto;
+    display: flex;
+    margin-top: -50px;
+    max-width: 100%;
+}
+
+
+.top-nav {
+    list-style: none;
+    display: flex;
+    margin-left: -15px;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+    margin-bottom: 30px;
+    margin-top: 20px;
+}
+
+.top-nav li {
+    font-size: 25px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    display: flex;
+    z-index: 5;
+    cursor: pointer;
+    color: white;
+    animation: transform 1s ease;
+    text-shadow: #000000 0px -1px 10px;
+    transform: scale(1);
+    transition: transform 0.3s ease;
+}
+
+.top-nav li:hover {
+    transform: scale(1.1);
+    transition: transform 0.5s ease;
+}
+
+.top-nav li a {
+    text-decoration: none;
+}
+
 
 .typewriter {
     font-family: 'Courier New', monospace;
     color: white;
-    font-size: 25px;
+    font-size: 18px;
     /* white-space: nowrap; */
     /* overflow: hidden; */
     /* border-right: 3px solid white; */
@@ -64,10 +108,26 @@ p {
 
 /* style="background-color: #FF8000; font-size: 30px; color: white; margin: auto; display: flex; margin-top: 50px; cursor: pointer;" */
 
+.launch-and-download-buttons-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.download-buttons-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
 .launch_button {
     background-color: #000000;
     font-size: 25px;
     color: #ffffff;
+    padding: 5px 20px;
 /*     margin: auto;
     display: flex; */
     cursor: pointer;
@@ -100,37 +160,32 @@ p {
     text-shadow: 0 0 20px rgb(255, 255, 255);
 }
 
-ul li {
-    margin: auto;
-    margin-top: 5px;
-    margin-bottom: 5px;
+.promo-container {
     display: flex;
-    z-index: 5;
-    cursor: pointer;
-    color: white;
-    animation: transform 1s ease;
-    text-shadow: #000000 0px -1px 10px;
-    transform: scale(1);
-    transition: transform 0.3s ease;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
-
-li:hover {
-    transform: scale(1.1);
-    transition: transform 0.5s ease;
+.promo-container p {
+    font-size: 28px;
+    max-width: 700px;
+    text-shadow: 1px 1px 2px black;
+    margin: 30px 20px 0 20px;
+}
+.promo-container #promo-video {
+    margin: 60px 0 30px 0;
+}
+.promo-container .promo-container-text {
+    margin: 25px 0 25px 0;
 }
-
-
-
-
-
 
 
 .square-grid {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
-    margin-top: 40px;
+    margin-top: 60px;
 }
 
 .square {
@@ -163,10 +218,34 @@ li:hover {
 #iframe-container {
     display: flex;
     justify-content: center;
-    margin-top: -30px;
+    margin-top: 50px;
 }
 
 iframe {
-    border-radius: 12px;
+    border-radius: 8px;
     box-shadow: 0 0 20px white;
-}
+    width: 80%;
+    height: auto;
+    aspect-ratio: 16/9;
+}
+
+.projects-examples-header {
+    font-size: 26px;
+}
+
+/* mobile styles */
+@media (max-width: 550px) {
+  .top-nav {
+    gap: 18px;
+  }
+  .top-nav li {
+    font-size: 20px;
+  }
+
+  .launch-and-download-buttons-container {
+    flex-direction: column;
+  }
+  .launch_button {
+    font-size: 20px;
+  }
+}