You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@fesod.apache.org by "Copilot (via GitHub)" <gi...@apache.org> on 2026/08/11 12:42:08 UTC
Re: [PR] style: redesign homepage hero as a spreadsheet grid [fesod]
Copilot commented on code in PR #983:
URL: https://github.com/apache/fesod/pull/983#discussion_r3758017679
##########
website/src/pages/index.module.css:
##########
@@ -58,3 +61,60 @@
width: 20px;
height: 20px;
}
+
+.gridOverlay {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+ background-size: var(--grid-size) var(--grid-size);
+}
+
+.colLabels,
+.rowLabels {
+ position: absolute;
+ z-index: 0;
+ pointer-events: none;
+ display: flex;
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.22);
+}
+
+.colLabels {
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--grid-size);
+ padding-left: var(--grid-size);
+ mask-image: linear-gradient(to left, transparent, #000 var(--grid-fade));
+}
+
+.rowLabels {
+ top: 0;
+ left: 0;
+ flex-direction: column;
+ width: var(--grid-size);
+ height: 100%;
+ padding-top: var(--grid-size);
+ mask-image: linear-gradient(to top, transparent, #000 var(--grid-fade));
+}
Review Comment:
`mask-image` is used for the label fade-out, but WebKit/Safari still commonly requires the prefixed `-webkit-mask-image` for consistent behavior. Without it, the right/bottom fade may not apply and labels can look abruptly clipped.
##########
website/src/pages/index.module.css:
##########
@@ -58,3 +61,60 @@
width: 20px;
height: 20px;
}
+
+.gridOverlay {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+ background-size: var(--grid-size) var(--grid-size);
+}
Review Comment:
`.gridOverlay`/label strips are absolutely positioned with `z-index: 0`, while the hero content (`.container`) has no positioning/z-index. In the default stacking order, the overlay/labels can end up painting on top of the title/subtitle/buttons (reducing readability and potentially failing contrast expectations). Raise the hero content above the overlays within this banner.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@fesod.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@fesod.apache.org
For additional commands, e-mail: commits-help@fesod.apache.org