makearmy/microhome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: mobile clamp + packing; restore prod aesthetics (hint/icon layering, vivid tile colors, order override)

Browse source
This commit is contained in:
makearmy 2025-08-24 18:13:24 -04:00
parent 378233eb8a
commit 814e7a89ce
3 changed files with 96 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

41
styles.css
View file

@ -24,6 +24,7 @@ body{
font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
overflow:hidden; /* tiles view */
}
/* make sure <a> tiles never pick UA link blue */
a{ color:inherit; text-decoration:none }
/* ===== Header ===== */
@ -54,23 +55,35 @@ a{ color:inherit; text-decoration:none }
/* ===== Tiles ===== */
.tile{
position:relative; display:block; overflow:hidden;
/* Prod aesthetic: bright config color is the actual tile bg */
background:var(--color,#1f2937);
/* subtle frame */
border:1px solid rgba(255,255,255,.08);
transition:opacity .55s ease, transform .55s ease;
}
/* Cover sits ABOVE text (to hide it until reveal) and BELOW hint+icon */
.cover{
position:absolute; inset:0; z-index:2; background:#242424;
transform:translate(0,0);
transition:transform var(--reveal-ms) cubic-bezier(.22,.8,.18,1);
pointer-events:none; will-change:transform;
}
/* Layer stack matches prod look:
* 1 = text, 2 = cover, 3 = hint (visible when hidden), 4 = icon (visible when hidden) */
.layer,.cover{
position:absolute; inset:0; display:grid; place-items:center; justify-items:center;
text-align:center; padding:clamp(12px,3vh,28px);
transition:opacity .55s ease, transform .55s ease; pointer-events:none;
}
.text-layer{ z-index:1; opacity:0; transform:translateY(8px) }
.hint-layer{ z-index:3; opacity:var(--hint-opacity); }
.icon-layer{ z-index:4; opacity:1 }
.icon{ width:clamp(36px,9vh,110px); height:auto; object-fit:contain }
.icon.icon-text{ width:auto; font-size:clamp(24px,10vh,120px); line-height:1 }
.kicker{ font-weight:900; letter-spacing:.22em; text-transform:uppercase; font-size:12px; opacity:.95; margin:0 0 .25em }
@ -78,27 +91,32 @@ a{ color:inherit; text-decoration:none }
.desc{ margin:.45em 0 0; opacity:.92; font-size:14px; max-width:min(72ch,90%) }
.text-layer>div{ display:flex; flex-direction:column; align-items:center }
/* Reveal states */
/* Reveal: slide the cover off; fade icon out; fade text in; hide hint */
.tile:hover .cover,
.tile:focus-visible .cover,
.tile.js-reveal .cover{ transform:translate(var(--dx),var(--dy)) }
.tile:hover .icon-layer,
.tile:focus-visible .icon-layer,
.tile.js-reveal .icon-layer{ opacity:0; transform:scale(.965) }
.tile:hover .text-layer,
.tile:focus-visible .text-layer,
.tile.js-reveal .text-layer{ opacity:1; transform:none }
/* Hide hint during reveal for the flip */
.tile:hover .hint-layer,
.tile:focus-visible .hint-layer,
.tile.js-reveal .hint-layer{ opacity:0 }
@media (prefers-reduced-motion:reduce){
.tile,.cover,.layer{ transition:none }
}
/* ===== Hint layer (novel approach) =====
* A huge “plane” rotated & centered. Rows are long lines of text.
* The tile clips the plane, so text can be sliced mid-word at edges. */
/* ===== Hint layer geometry (unchanged from prod) ===== */
.hint-layer{
position:absolute; inset:0; z-index:3; pointer-events:none;
display:block; opacity:var(--hint-opacity);
position:absolute; inset:0; pointer-events:none;
display:block;
/* optional soft fade at extreme sides */
-webkit-mask-image:linear-gradient(to right,
rgba(0,0,0,0) var(--hint-feather),
@ -122,19 +140,13 @@ a{ color:inherit; text-decoration:none }
}
.hint-row{
position:relative; display:block;
/* make the line VERY long; no measuring required */
white-space:nowrap; letter-spacing:.22em; line-height:1;
font-weight:900; text-transform:uppercase; font-size:var(--hint-size);
transform:translateX(var(--row-offset-px, 0px));
/* the content string itself is repeated in JS so it actually fills */
}
.hint-line{ opacity:1 } /* keep lines solid */
/* Hide hint during reveal for the “flip” effect */
.tile:hover .hint-layer,
.tile:focus-visible .hint-layer,
.tile.js-reveal .hint-layer{ opacity:0 }
/* ===== Static pages (unchanged from prior work) ===== */
/* ===== Static pages (from prod) ===== */
body.page{
min-height:100vh; margin:0; color:var(--fg); background:var(--bg);
overflow-y:auto; overflow-x:hidden;
@ -189,5 +201,4 @@ body.page{
.title{ font-size:clamp(16px,5.2vw,22px) }
.desc{ font-size:13px }
.icon{ width:clamp(28px,11vh,90px) }
.back-btn,.btn{ padding:.55rem .85rem }
}