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" />
<style>
:root {
--pad: 16px;
--content-max: 760px;
--grid-max: 340px;
--pad-x: 16px;
}
* {
@@ -30,58 +30,54 @@
}
body {
min-height: 100vh;
min-height: 100dvh;
-webkit-text-size-adjust: 100%;
}
.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));
margin-inline: auto; /* hard centering */
margin-inline: auto; /* TRUE horizontal centering */
text-align: center;
padding:
max(48px, env(safe-area-inset-top))
var(--pad-x)
max(24px, env(safe-area-inset-bottom));
}
h1 {
margin: 0 0 2.2rem;
padding: 0 1rem;
font-size: clamp(2rem, 8vw, 2.6rem);
font-weight: 900;
line-height: 1.1;
margin: 0 0 2.2rem;
padding: 0 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
width: min(100%, var(--grid-max));
margin: 0 auto 2.2rem; /* hard centering */
margin: 0 auto 2.2rem; /* centered */
}
.grid a {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
font-weight: 700;
font-size: 0.95rem;
padding: 0.85rem 1rem;
border-radius: 9999px;
transition: transform .1s ease, opacity .15s ease, background-color .15s ease, color .15s ease;
white-space: nowrap;
transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.grid a:active {
transform: scale(0.95);
transform: scale(0.97);
}
.grid a img {
@@ -89,6 +85,7 @@
height: 20px;
object-fit: contain;
flex: 0 0 20px;
display: block;
}
.filled {
@@ -123,13 +120,13 @@
}
.playground {
width: min(100%, var(--grid-max));
margin: 0 auto; /* centered */
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.95rem;
color: #666;
width: min(100%, var(--grid-max));
margin: 0 auto; /* hard centering */
font-size: 0.95rem;
}
.playground img {
@@ -154,13 +151,12 @@
@media (max-width: 380px) {
:root { --grid-max: 290px; }
h1 { font-size: 2rem; }
.grid a { font-size: .8rem; padding: .7rem .6rem; }
.grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; }
}
</style>
</head>
<body>
<main class="page">
<section class="content">
<h1>Zero Width Unicode Standard</h1>
<div class="grid">
@@ -185,7 +181,6 @@
<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>
</div>
</section>
</main>
</body>
</html>