From c3aa539cc70025f8e9d19fb552f18b6bacb18579 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Tue, 30 Sep 2025 09:16:36 -0700
Subject: [PATCH] Feat: Brutalist minimalist homepage design

---
 index.html | 43 ++++++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index a934f47..222de52 100644
--- a/index.html
+++ b/index.html
@@ -6,36 +6,29 @@
 <title>planetrenox</title>
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-body{background:#0a0e27;color:#00ff41;font-family:'Courier New',monospace;overflow-x:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
-body::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,65,.03) 0px,transparent 1px,transparent 2px,rgba(0,255,65,.03) 3px);pointer-events:none;animation:scan 8s linear infinite}
-@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(100vh)}}
-.container{max-width:900px;padding:2rem;text-align:center}
-.glitch{font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:.5rem;margin-bottom:1rem;position:relative;text-transform:uppercase;animation:flicker 3s infinite}
-.glitch::before,.glitch::after{content:'PLANET_RENOX';position:absolute;left:0;width:100%;height:100%}
-.glitch::before{color:#ff00de;animation:glitch1 2.5s infinite;clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}
-.glitch::after{color:#00fff9;animation:glitch2 2s infinite;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
-@keyframes glitch1{0%,100%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}}
-@keyframes glitch2{0%,100%{transform:translate(0)}20%{transform:translate(3px,-3px)}40%{transform:translate(3px,3px)}60%{transform:translate(-3px,-3px)}80%{transform:translate(-3px,3px)}}
-@keyframes flicker{0%,100%{opacity:1}93%{opacity:.8}94%{opacity:.2}95%{opacity:1}}
-.tagline{font-size:1.2rem;color:#00ff41;opacity:.7;margin-bottom:3rem;letter-spacing:.3rem;text-transform:uppercase}
-.game-frame{margin:3rem auto;border:2px solid #00ff41;box-shadow:0 0 30px rgba(0,255,65,.3),inset 0 0 30px rgba(0,255,65,.1);background:#0a0e27;padding:1rem;position:relative}
-.game-frame::before{content:'> LOADING_GAME.EXE';position:absolute;top:-1.5rem;left:1rem;background:#0a0e27;padding:0 .5rem;font-size:.8rem;color:#00ff41}
-iframe{display:block;max-width:100%;height:auto}
-.github{display:inline-block;margin-top:3rem;padding:1rem 2rem;background:transparent;border:2px solid #00ff41;color:#00ff41;text-decoration:none;text-transform:uppercase;letter-spacing:.2rem;font-weight:700;position:relative;overflow:hidden;transition:all .3s}
-.github::before{content:'';position:absolute;inset:0;background:#00ff41;transform:translateX(-100%);transition:transform .3s;z-index:-1}
-.github:hover{color:#0a0e27;box-shadow:0 0 30px rgba(0,255,65,.6)}
-.github:hover::before{transform:translateX(0)}
-@media(max-width:700px){.game-frame{padding:.5rem}iframe{width:100%;height:190px}}
+body{background:#fff;color:#000;font-family:Arial,sans-serif;line-height:1.6;padding:2rem}
+.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;max-width:1400px;margin:0 auto;min-height:calc(100vh - 4rem)}
+.logo{grid-column:1/7;font-size:clamp(2rem,5vw,4rem);font-weight:900;letter-spacing:-.05em;line-height:.9;padding:2rem 0;border-bottom:8px solid #000;align-self:start}
+.game{grid-column:1/13;background:#000;padding:3rem;display:flex;align-items:center;justify-content:center;position:relative}
+.game::before{content:'001';position:absolute;top:1rem;left:1rem;color:#fff;font-size:5rem;font-weight:900;opacity:.1}
+iframe{border:4px solid #fff;box-shadow:20px 20px 0 rgba(255,255,255,.2)}
+.github-link{grid-column:1/13;align-self:end;text-align:right}
+.github-link a{display:inline-block;background:#000;color:#fff;padding:1.5rem 3rem;text-decoration:none;font-weight:900;font-size:1.5rem;letter-spacing:-.02em;transition:all .2s;border:4px solid #000}
+.github-link a:hover{background:#fff;color:#000;transform:translate(-8px,-8px);box-shadow:8px 8px 0 #000}
+.status{grid-column:7/13;align-self:start;text-align:right;padding:2rem 0;border-bottom:8px solid #000;font-weight:900;font-size:1.2rem;letter-spacing:.1em}
+@media(max-width:768px){.grid{grid-template-columns:1fr;gap:1rem}.logo,.status,.game,.github-link{grid-column:1}.status{text-align:left;border-bottom:none;padding:1rem 0}.game{padding:1rem}iframe{width:100%;height:190px;border-width:2px}.github-link{text-align:left}.github-link a{font-size:1.2rem;padding:1rem 2rem}}
 </style>
 </head>
 <body>
-<div class="container">
-<h1 class="glitch">PLANET_RENOX</h1>
-<p class="tagline">// INITIALIZING SYSTEMS</p>
-<div class="game-frame">
+<div class="grid">
+<div class="logo">PLANET<br>RENOX</div>
+<div class="status">ACTIVE / BUILDING</div>
+<div class="game">
 <iframe src="https://store.steampowered.com/widget/1745790/?t=A%20movement%20focused%20endless%20anime%20runner.%20Jump%20till%20you're%20dead.%20It's%20basically%20a%20bhopping%20game.%20Developed%20by%20Planet%20Renox." frameborder="0" width="646" height="190"></iframe>
 </div>
-<a href="https://github.com/planetrenox" class="github" target="_blank">&gt; ACCESS_GITHUB</a>
+<div class="github-link">
+<a href="https://github.com/planetrenox" target="_blank">GITHUB →</a>
+</div>
 </div>
 </body>
 </html>