first commit SUS

2023-03-17 17:27:53 +01:00 · 2023-03-17 17:27:53 +01:00 · 136785e5be
commit 136785e5be
5 changed files with 159 additions and 0 deletions
--- a/assets/itchio_badge.png
+++ b/assets/itchio_badge.png
--- a/assets/logo.png
+++ b/assets/logo.png
--- a/assets/video.mp4
+++ b/assets/video.mp4
--- a/index.html
+++ b/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>SussyCraft</title>
+    </head>
+
+    <body>
+
+        <video autoplay muted loop width="100%" height="100%" id="back_video">
+            <source src="assets/video.mp4" type="video/mp4">
+        </video>
+
+        <div id="container">
+            <img src="assets/logo.png" alt="SussyCraft" id="logo">
+            <h1>SussyCraft</h1>
+
+            <br>
+            <p>SussyCraft is a very sussy game with a very sussy name.</p>
+            <p>Play it now!</p>
+
+            <div id="badges_div">
+
+                <a href='https://play.google.com/store/apps/details?id=xyz.cubesoftware.sussycraft&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' id="google_play_badge_link">
+                    <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' id="google_play_badge"/>
+                </a>
+
+                <a href="" id="itchio_badge_link">
+                    <img alt="Available on itch.io" src="assets/itchio_badge.png" id="itchio_badge"/>
+                </a>
+                
+            </div>
+
+        </div>
+
+        <footer>
+            <p>Google Play and the Google Play logo are trademarks of Google LLC.</p>
+            <p>&copy; SussyCraft by Cube Software 2023</p>
+        </footer>
+
+    </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,115 @@
+body {
+    margin: 0;
+    background-color: #202020;
+
+    font-family: 'Roboto', sans-serif;
+}
+
+:root {
+    --video-blur-radius: 1vh;
+}
+
+#back_video {
+    position: absolute;
+    filter: blur(var(--video-blur-radius));
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+}
+
+#container {
+    --side-margin: 15vw;
+    --inside-padding: 20px;
+
+    position: absolute;
+    background-color: rgb(20, 20, 20, 0.8);
+    color: white;
+    
+    border-radius: 10px;
+    backdrop-filter: blur(2vh);
+
+    margin: 50px calc(var(--side-margin) - var(--inside-padding));
+    width: calc(100vw - 2 * var(--side-margin));
+    width: auto;
+    padding: var(--inside-padding);
+    
+    /* center everything */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+#container p {
+    margin: 5px;
+}
+
+#logo {
+    width: 25%;
+    border-radius: 25%;
+}
+
+h1 {
+    font-size: 3em;
+    margin: 5px;
+    text-shadow: 0 0 10px #80c0ff;
+}
+
+
+
+#badges_div {
+    margin: 0 10%;
+
+    display: grid;
+}
+
+/* on mobile */
+@media (min-width: 600px) {
+    #badges_div {
+        grid-template-columns: auto auto;
+    }
+}
+
+#google_play_badge {
+    width: 100%;
+    margin-bottom: -4px;
+}
+
+
+#itchio_badge_link {
+    padding: 6.6%;
+}
+
+#itchio_badge {
+    width: 100%;
+    margin-bottom: -4px;
+}
+
+footer {
+    --footer-height: 50px;
+
+    color: rgb(180,180,180);
+    font-size: 0.8em;
+    
+    margin: 0;
+    margin-bottom: calc(var(--video-blur-radius) * -1);
+
+    position: absolute;
+    bottom: calc(0px - var(--footer-height));
+    height: var(--footer-height);
+
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+footer p {
+    /* change value after "100vw / " after adding or removing elements from footer */
+    width: calc(100vw / 2);
+}