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: mobile viewport + spacing + overflow

Browse Source 
Co-authored-by: gpt-5.3-codex <no-reply@openai.com>
This commit is contained in:
multipleof4
2026-03-27 17:39:30 -07:00
parent 46e9486e32
commit 328dae5253
1 changed files with 75 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Zero Width Unicode Standard</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,700,900" rel="stylesheet" />
@@ -11,36 +11,55 @@
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body, html {
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
min-height: 100%;
background-color: #ffffff;
color: #000000;
font-family: 'Inter', sans-serif;
}
body {
-webkit-text-size-adjust: 100%;
}
.page {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow-x: hidden;
overflow-y: auto;
padding:
max(16px, env(safe-area-inset-top))
16px
max(20px, env(safe-area-inset-bottom));
}
h1 {
font-size: 2.5rem;
font-size: clamp(2rem, 8vw, 2.6rem);
font-weight: 900;
line-height: 1.1;
margin: 0 0 2.5rem 0;
padding: 0 1.5rem;
margin: 0 0 2.2rem 0;
padding: 0 1rem;
max-width: 600px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
width: 340px;
margin-bottom: 2.5rem;
width: min(100%, 340px);
margin-bottom: 2.2rem;
}
.grid a {
display: inline-flex;
align-items: center;
@@ -51,41 +70,52 @@
font-size: 0.95rem;
padding: 0.85rem 1rem;
border-radius: 9999px;
transition: transform 0.1s ease, opacity 0.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 {
transform: scale(0.95);
}
.grid a img {
width: 20px;
height: 20px;
object-fit: contain;
flex: 0 0 20px;
}
.filled {
color: #ffffff;
background-color: #000000;
}
.filled.rust {
background-color: #ce412b;
}
.filled .logo-invert {
filter: invert(1);
}
.outlined {
color: #000000;
background-color: transparent;
border: 2px solid #000000;
}
.outlined:hover {
background-color: #000000;
color: #ffffff;
}
.divider {
grid-column: 1 / -1;
height: 1px;
background: #e0e0e0;
margin: 0.25rem 0;
}
.playground {
display: flex;
flex-direction: column;
@@ -94,15 +124,19 @@
font-size: 0.95rem;
color: #666;
}
.playground img {
width: 36px;
height: 36px;
margin-bottom: 0.6rem;
border-radius: 8px;
display: block;
}
.playground p {
margin: 0;
}
.playground a {
color: #000000;
font-weight: 700;
@@ -110,15 +144,23 @@
text-underline-offset: 4px;
}
/* Keep desktop centered, but on phones move content upward naturally */
@media (max-width: 768px) {
.page {
justify-content: flex-start;
padding-top: max(48px, env(safe-area-inset-top));
}
}
@media (max-width: 380px) {
h1 { font-size: 2rem; }
.grid { width: 290px; }
.grid { width: min(100%, 290px); }
.grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; }
}
</style>
</head>
<body>
<main class="page">
<h1>Zero Width Unicode Standard</h1>
<div class="grid">
@@ -143,6 +185,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>
</main>
</body>
</html>