inzerosight/zwus.pages.dev
1
0
Fork 0
mirror of https://github.com/inzerosight/zwus.pages.dev.git synced 2026-04-07 05:02:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: remove drift, hard-center layout

Browse Source 
Co-authored-by: gpt-5.3-codex <no-reply@openai.com>
This commit is contained in:
multipleof4
2026-03-27 17:45:30 -07:00
parent 747f864711
commit 6a6b1f7b5c
1 changed files with 41 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@@ -8,9 +8,9 @@
<link href="https://fonts.bunny.net/css?family=inter:400,700,900" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=inter:400,700,900" rel="stylesheet" />
<style> <style>
:root { :root {
--pad: 16px;
--content-max: 760px; --content-max: 760px;
--grid-max: 340px; --grid-max: 340px;
--pad-x: 16px;
} }
* { * {
@@ -30,58 +30,54 @@
} }
body { body {
min-height: 100vh;
min-height: 100dvh;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
.page { .page {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
overflow-y: auto;
padding-top: max(48px, env(safe-area-inset-top));
padding-right: max(var(--pad), env(safe-area-inset-right));
padding-bottom: max(24px, env(safe-area-inset-bottom));
padding-left: max(var(--pad), env(safe-area-inset-left));
}
.content {
width: min(100%, var(--content-max)); width: min(100%, var(--content-max));
margin-inline: auto; /* hard centering */ margin-inline: auto; /* TRUE horizontal centering */
text-align: center; text-align: center;
padding:
max(48px, env(safe-area-inset-top))
var(--pad-x)
max(24px, env(safe-area-inset-bottom));
} }
h1 { h1 {
margin: 0 0 2.2rem;
padding: 0 1rem;
font-size: clamp(2rem, 8vw, 2.6rem); font-size: clamp(2rem, 8vw, 2.6rem);
font-weight: 900; font-weight: 900;
line-height: 1.1; line-height: 1.1;
margin: 0 0 2.2rem;
padding: 0 1rem;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem; gap: 0.75rem;
width: min(100%, var(--grid-max)); width: min(100%, var(--grid-max));
margin: 0 auto 2.2rem; /* hard centering */ margin: 0 auto 2.2rem; /* centered */
} }
.grid a { .grid a {
width: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
text-decoration: none; text-decoration: none;
white-space: nowrap;
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.95rem;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border-radius: 9999px; border-radius: 9999px;
transition: transform .1s ease, opacity .15s ease, background-color .15s ease, color .15s ease; transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
} }
.grid a:active { .grid a:active {
transform: scale(0.95); transform: scale(0.97);
} }
.grid a img { .grid a img {
@@ -89,6 +85,7 @@
height: 20px; height: 20px;
object-fit: contain; object-fit: contain;
flex: 0 0 20px; flex: 0 0 20px;
display: block;
} }
.filled { .filled {
@@ -123,13 +120,13 @@
} }
.playground { .playground {
width: min(100%, var(--grid-max));
margin: 0 auto; /* centered */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 0.95rem;
color: #666; color: #666;
width: min(100%, var(--grid-max)); font-size: 0.95rem;
margin: 0 auto; /* hard centering */
} }
.playground img { .playground img {
@@ -154,13 +151,12 @@
@media (max-width: 380px) { @media (max-width: 380px) {
:root { --grid-max: 290px; } :root { --grid-max: 290px; }
h1 { font-size: 2rem; } h1 { font-size: 2rem; }
.grid a { font-size: .8rem; padding: .7rem .6rem; } .grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; }
} }
</style> </style>
</head> </head>
<body> <body>
<main class="page"> <main class="page">
<section class="content">
<h1>Zero Width Unicode Standard</h1> <h1>Zero Width Unicode Standard</h1>
<div class="grid"> <div class="grid">
@@ -185,7 +181,6 @@
<img src="https://raw.githubusercontent.com/planetrenox/inzerosight/main/icon_128.png" alt="inØsight logo"> <img src="https://raw.githubusercontent.com/planetrenox/inzerosight/main/icon_128.png" alt="inØsight logo">
<p>playground: <a href="https://inzerosight.pages.dev" target="_blank" rel="noopener noreferrer">inzerosight.pages.dev</a></p> <p>playground: <a href="https://inzerosight.pages.dev" target="_blank" rel="noopener noreferrer">inzerosight.pages.dev</a></p>
</div> </div>
</section>
</main> </main>
</body> </body>
</html> </html>