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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
