planetrenox/planetrenox.com
1
0
Fork 0
mirror of https://github.com/planetrenox/planetrenox.com.git synced 2026-01-13 16:18:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Add sidebar layout with logo in top-left

Browse Source
This commit is contained in:
multipleof4
2025-09-30 09:47:09 -07:00
parent 936d77fe77
commit 607726d7df
1 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -5,40 +5,66 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Planet Renox</title>
<style>
:root{--c1:#000;--c2:#0ff;--c3:#fff}
:root{--c1:#000;--c2:#666;--c3:#fff}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@keyframes blink{50%{opacity:0}}
body{
background:var(--c1);
color:var(--c3);
font-family:monospace;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
text-align:center;
padding:1rem
}
h1{font-size:clamp(2rem,8vw,4rem);text-transform:lowercase;color:var(--c3)}
h1 span{animation:blink 1s step-end infinite}
main{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%}
.widget-wrapper{max-width:646px;width:100%}
iframe{width:100%;height:190px;border:0}
.logo{
position:fixed;
top:1rem;
left:1rem;
font-size:1rem;
color:var(--c3);
z-index:10
}
.logo span{animation:blink 1s step-end infinite}
.container{display:flex;gap:2rem;padding-top:3rem}
.sidebar{min-width:200px}
.sidebar a{
display:block;
color:var(--c3);
text-decoration:none;
padding:.5rem 0
}
.sidebar a:hover{background:var(--c2);color:var(--c1)}
main{flex:1}
h2{margin-bottom:1rem}
.widget-wrapper{margin-bottom:2rem}
iframe{width:100%;max-width:646px;height:190px;border:0}
footer{margin-top:2rem}
a{color:var(--c3);text-decoration:none}
a:hover{background:var(--c2);color:var(--c1)}
footer a{color:var(--c3);text-decoration:none}
footer a:hover{background:var(--c2);color:var(--c1)}
::selection{background:var(--c2);color:var(--c1)}
@media(max-width:768px){
.container{flex-direction:column}
.sidebar{min-width:auto}
}
</style>
</head>
<body>
<main>
<h1>planetrenox<span>_</span></h1>
<div class="widget-wrapper">
<iframe src="https://store.steampowered.com/widget/1745790/"></iframe>
</div>
<footer>
<a href="https://github.com/planetrenox" target="_blank" rel="noopener noreferrer">&gt; GITHUB</a>
</footer>
</main>
<div class="logo">planetrenox<span>_</span></div>
<div class="container">
<aside class="sidebar">
<a href="https://lynchmark.com" target="_blank" rel="noopener noreferrer">Lynchmark</a>
<a href="https://github.com/planetrenox/inzerosight" target="_blank" rel="noopener noreferrer">inzerosight</a>
</aside>
<main>
<section>
<h2>Games</h2>
<div class="widget-wrapper">
<iframe src="https://store.steampowered.com/widget/1745790/"></iframe>
</div>
</section>
<footer>
<a href="https://github.com/planetrenox" target="_blank" rel="noopener noreferrer">&gt; GITHUB</a>
</footer>
</main>
</div>
</body>
</html>