From fcd62a8e4fabbcee965ee0afe3df82676c758b83 Mon Sep 17 00:00:00 2001 From: KittenTM Date: Fri, 16 Jan 2026 21:29:58 +0100 Subject: [PATCH] fix formatting & add font --- index.html | 80 ++------------------------------------------- stages.js | 2 +- styles.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 78 deletions(-) diff --git a/index.html b/index.html index c478603..c94233f 100644 --- a/index.html +++ b/index.html @@ -1,82 +1,9 @@ - -SplatNet | Stages - + + SplatNet | Stages + @@ -92,6 +19,5 @@ - diff --git a/stages.js b/stages.js index 7224b2b..ed3422f 100644 --- a/stages.js +++ b/stages.js @@ -10,7 +10,7 @@ function stageImagePath(stageName) { .toLowerCase() .replace(/['.]/g, ""); - return `../../assets/stages/${firstWord}.jpg`; + return `/assets/stages/${firstWord}.jpg`; } async function fetchRotations() { diff --git a/styles.css b/styles.css index e69de29..4d796ac 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,95 @@ +@font-face { + font-family: "Splatoon1"; + src: url("./splatoon1.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + background-image: url("/assets/stage.png"); + background-repeat: repeat; + background-size: 800px 800px; +} + +/* HEADER */ +.header { + position: relative; + height: 150px; + background-color: black; + display: flex; + justify-content: center; + align-items: flex-start; + + clip-path: polygon( + 0% 0%, 100% 0%, 100% 80%, + 90% 85%, 80% 75%, 70% 85%, + 60% 75%, 50% 85%, 40% 75%, + 30% 85%, 20% 75%, 10% 85%, + 0% 80% + ); +} + +.logo { + max-height: 120px; + z-index: 2; +} + +/* MAIN CONTENT */ +.content { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 24px; +} + +.stage-info { + width: 65%; + max-width: 600px; + height: auto; + margin-bottom: 20px; +} + +/* STAGES */ +.stages-container { + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + gap: 32px; + padding-bottom: 40px; +} + +.stages-section { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; +} + +.stages-section h2 { + margin: 0; + color: white; + text-align: center; + font-family: "Splatoon1", sans-serif; + font-size: 28px; + letter-spacing: 1px; +} + +.stages { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; +} + +.stages img { + width: 100%; + height: auto; + display: block; + border-radius: 8px; +}