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