commit 136785e5be0071f0a57b7e4a417ed6aebede6f3d Author: Looki2000 Date: Fri Mar 17 17:27:53 2023 +0100 first commit SUS diff --git a/assets/itchio_badge.png b/assets/itchio_badge.png new file mode 100644 index 0000000..ec30845 Binary files /dev/null and b/assets/itchio_badge.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..1a855d3 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/video.mp4 b/assets/video.mp4 new file mode 100644 index 0000000..4d68dff Binary files /dev/null and b/assets/video.mp4 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2e2a92d --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + SussyCraft + + + + + + +
+ +

SussyCraft

+ +
+

SussyCraft is a very sussy game with a very sussy name.

+

Play it now!

+ +
+ + + Get it on Google Play + + + + Available on itch.io + + +
+ +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..fb4d218 --- /dev/null +++ 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); +} \ No newline at end of file