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

108
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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> <title>Zero Width Unicode Standard</title>
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<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" />
@@ -11,36 +11,55 @@
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
body, html {
html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
overflow: hidden;
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
}
body {
-webkit-text-size-adjust: 100%;
}
.page {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: 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 { h1 {
font-size: 2.5rem; 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.5rem 0; margin: 0 0 2.2rem 0;
padding: 0 1.5rem; padding: 0 1rem;
max-width: 600px; max-width: 600px;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.75rem; gap: 0.75rem;
width: 340px; width: min(100%, 340px);
margin-bottom: 2.5rem; margin-bottom: 2.2rem;
} }
.grid a { .grid a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -51,41 +70,52 @@
font-size: 0.95rem; font-size: 0.95rem;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border-radius: 9999px; 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; white-space: nowrap;
} }
.grid a:active { .grid a:active {
transform: scale(0.95); transform: scale(0.95);
} }
.grid a img { .grid a img {
width: 20px; width: 20px;
height: 20px; height: 20px;
object-fit: contain;
flex: 0 0 20px;
} }
.filled { .filled {
color: #ffffff; color: #ffffff;
background-color: #000000; background-color: #000000;
} }
.filled.rust { .filled.rust {
background-color: #ce412b; background-color: #ce412b;
} }
.filled .logo-invert { .filled .logo-invert {
filter: invert(1); filter: invert(1);
} }
.outlined { .outlined {
color: #000000; color: #000000;
background-color: transparent; background-color: transparent;
border: 2px solid #000000; border: 2px solid #000000;
} }
.outlined:hover { .outlined:hover {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
} }
.divider { .divider {
grid-column: 1 / -1; grid-column: 1 / -1;
height: 1px; height: 1px;
background: #e0e0e0; background: #e0e0e0;
margin: 0.25rem 0; margin: 0.25rem 0;
} }
.playground { .playground {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -94,15 +124,19 @@
font-size: 0.95rem; font-size: 0.95rem;
color: #666; color: #666;
} }
.playground img { .playground img {
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
border-radius: 8px; border-radius: 8px;
display: block;
} }
.playground p { .playground p {
margin: 0; margin: 0;
} }
.playground a { .playground a {
color: #000000; color: #000000;
font-weight: 700; font-weight: 700;
@@ -110,39 +144,47 @@
text-underline-offset: 4px; 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) { @media (max-width: 380px) {
h1 { font-size: 2rem; } h1 { font-size: 2rem; }
.grid { width: 290px; } .grid { width: min(100%, 290px); }
.grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; } .grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; }
} }
</style> </style>
</head> </head>
<body> <body>
<main class="page">
<h1>Zero Width Unicode Standard</h1>
<h1>Zero Width Unicode Standard</h1> <div class="grid">
<a href="https://www.npmjs.com/package/zwus" target="_blank" rel="noopener noreferrer" class="filled">
<img src="assets/npm-logo-black.svg" alt="npm" class="logo-invert"> npm
</a>
<a href="https://crates.io/crates/zwus" target="_blank" rel="noopener noreferrer" class="filled rust">
<img src="assets/Cargo-Logo-Small.png" alt="Cargo"> crates.io
</a>
<div class="grid"> <div class="divider"></div>
<a href="https://www.npmjs.com/package/zwus" target="_blank" rel="noopener noreferrer" class="filled">
<img src="assets/npm-logo-black.svg" alt="npm" class="logo-invert"> npm
</a>
<a href="https://crates.io/crates/zwus" target="_blank" rel="noopener noreferrer" class="filled rust">
<img src="assets/Cargo-Logo-Small.png" alt="Cargo"> crates.io
</a>
<div class="divider"></div> <a href="https://addons.mozilla.org/en-US/firefox/addon/in0sight/" target="_blank" rel="noopener noreferrer" class="outlined">
<img src="assets/Firefox_logo,_2019.svg" alt="Firefox"> Firefox Add-on
<a href="https://addons.mozilla.org/en-US/firefox/addon/in0sight/" target="_blank" rel="noopener noreferrer" class="outlined"> </a>
<img src="assets/Firefox_logo,_2019.svg" alt="Firefox"> Firefox Add-on <a href="https://chromewebstore.google.com/detail/acnmohbphjmnbaboacmecidopeplkhog" target="_blank" rel="noopener noreferrer" class="outlined">
</a> <img src="assets/Google_Chrome_icon_(February_2022).svg.png" alt="Chrome"> Chrome Extension
<a href="https://chromewebstore.google.com/detail/acnmohbphjmnbaboacmecidopeplkhog" target="_blank" rel="noopener noreferrer" class="outlined"> </a>
<img src="assets/Google_Chrome_icon_(February_2022).svg.png" alt="Chrome"> Chrome Extension </div>
</a>
</div>
<div class="playground">
<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>
<div class="playground">
<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> </body>
</html> </html>