Copilot commented on code in PR #74:
URL: https://github.com/apache/groovy-website/pull/74#discussion_r2868688950
##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+ /* Core HSL Tokens */
+ --primary-h: 198; /* Groovy Blue */
+ --primary-s: 47%;
+ --primary-l: 49%;
+
+ --accent-h: 20; /* Groovy Orange/Red */
+ --accent-s: 100%;
+ --accent-l: 43%;
+
+ --bg-dark: hsl(var(--primary-h), 20%, 10%);
+ --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+ --text-main: hsl(var(--primary-h), 10%, 90%);
+ --text-muted: hsl(var(--primary-h), 10%, 70%);
+
+ --glass-bg: hsla(0, 0%, 100%, 0.05);
+ --glass-border: hsla(0, 0%, 100%, 0.1);
+
+ --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+ --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+ background-color: var(--bg-dark) !important;
+ color: var(--text-main) !important;
+ transition: var(--transition-standard);
+ font-size: 16px !important;
+ letter-spacing: 0.01em;
+}
Review Comment:
`body` is forcing a light text color (`--text-main`) with `!important`, but
the existing layout/styles keep major containers like `#content` on a white
background (see `style.css`), which will make large portions of the site render
as light text on white (poor contrast / unreadable). Either scope the dark
theme styles to a specific wrapper/class, or update the main content container
backgrounds/text colors together (e.g., ensure `#content`/page backgrounds are
dark when body text is light).
##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+ /* Core HSL Tokens */
+ --primary-h: 198; /* Groovy Blue */
+ --primary-s: 47%;
+ --primary-l: 49%;
+
+ --accent-h: 20; /* Groovy Orange/Red */
+ --accent-s: 100%;
+ --accent-l: 43%;
+
+ --bg-dark: hsl(var(--primary-h), 20%, 10%);
+ --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+ --text-main: hsl(var(--primary-h), 10%, 90%);
+ --text-muted: hsl(var(--primary-h), 10%, 70%);
+
+ --glass-bg: hsla(0, 0%, 100%, 0.05);
+ --glass-border: hsla(0, 0%, 100%, 0.1);
+
+ --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+ --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+ background-color: var(--bg-dark) !important;
+ color: var(--text-main) !important;
+ transition: var(--transition-standard);
+ font-size: 16px !important;
+ letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+ background: var(--glass-bg) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border-bottom: 1px solid var(--glass-border) !important;
+ box-shadow: var(--shadow-soft);
+ transition: var(--transition-standard);
+}
+
+.navbar-brand {
+ font-weight: 700 !important;
+ letter-spacing: -0.02em;
+ color: white !important;
+ text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+ color: var(--text-muted) !important;
+ transition: var(--transition-standard);
+ border-radius: 8px;
+ margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+ background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l),
0.2) !important;
+ color: white !important;
+ transform: translateY(-1px);
+}
+
+/* Premium Hero Section */
+.band {
+ background: linear-gradient(135deg,
+ hsl(var(--primary-h), 60%, 40%) 0%,
+ hsl(var(--primary-h), 30%, 20%) 100%
+ ) !important;
Review Comment:
`.band` sets a new `background: ... !important;`, which will override the
existing `#band`/`.svg #band` background-image rules that currently render the
Groovy logo in the hero. Since the `div` is otherwise empty, this change likely
removes the homepage hero logo entirely. Consider layering the gradient with
the existing background image (or otherwise reintroducing the logo/content) so
the hero isn’t blank.
```suggestion
/* Use background-color so existing #band/.svg #band background-image is
preserved */
background-color: hsl(var(--primary-h), 30%, 20%) !important;
```
##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+ /* Core HSL Tokens */
+ --primary-h: 198; /* Groovy Blue */
+ --primary-s: 47%;
+ --primary-l: 49%;
+
+ --accent-h: 20; /* Groovy Orange/Red */
+ --accent-s: 100%;
+ --accent-l: 43%;
+
+ --bg-dark: hsl(var(--primary-h), 20%, 10%);
+ --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+ --text-main: hsl(var(--primary-h), 10%, 90%);
+ --text-muted: hsl(var(--primary-h), 10%, 70%);
+
+ --glass-bg: hsla(0, 0%, 100%, 0.05);
+ --glass-border: hsla(0, 0%, 100%, 0.1);
+
+ --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+ --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+ background-color: var(--bg-dark) !important;
+ color: var(--text-main) !important;
+ transition: var(--transition-standard);
+ font-size: 16px !important;
+ letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+ background: var(--glass-bg) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border-bottom: 1px solid var(--glass-border) !important;
+ box-shadow: var(--shadow-soft);
+ transition: var(--transition-standard);
+}
+
+.navbar-brand {
+ font-weight: 700 !important;
+ letter-spacing: -0.02em;
+ color: white !important;
+ text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+ color: var(--text-muted) !important;
+ transition: var(--transition-standard);
+ border-radius: 8px;
+ margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+ background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l),
0.2) !important;
+ color: white !important;
+ transform: translateY(-1px);
Review Comment:
The navbar link styling only defines a hover state; there’s no corresponding
`:focus`/`:focus-visible` treatment. With the new dark/glass styling, keyboard
users may get little/no visible focus indication. Add explicit focus styles
(ideally matching hover) and ensure outlines aren’t removed without a
replacement.
```suggestion
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:focus-visible {
background-color: hsla(var(--accent-h), var(--accent-s),
var(--accent-l), 0.2) !important;
color: white !important;
transform: translateY(-1px);
outline: 2px solid hsla(var(--accent-h), var(--accent-s),
var(--accent-l), 0.8);
outline-offset: 2px;
```
##########
site/src/site/assets/css/modern-design.css:
##########
@@ -0,0 +1,130 @@
+/*
+ * Modern Design System for Apache Groovy
+ * Features: HSL Variables, Glassmorphism, Premium Typography, Micro-animations
+ */
+
+:root {
+ /* Core HSL Tokens */
+ --primary-h: 198; /* Groovy Blue */
+ --primary-s: 47%;
+ --primary-l: 49%;
+
+ --accent-h: 20; /* Groovy Orange/Red */
+ --accent-s: 100%;
+ --accent-l: 43%;
+
+ --bg-dark: hsl(var(--primary-h), 20%, 10%);
+ --bg-card: hsla(var(--primary-h), 20%, 15%, 0.7);
+ --text-main: hsl(var(--primary-h), 10%, 90%);
+ --text-muted: hsl(var(--primary-h), 10%, 70%);
+
+ --glass-bg: hsla(0, 0%, 100%, 0.05);
+ --glass-border: hsla(0, 0%, 100%, 0.1);
+
+ --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+ --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Base Modernization */
+body {
+ background-color: var(--bg-dark) !important;
+ color: var(--text-main) !important;
+ transition: var(--transition-standard);
+ font-size: 16px !important;
+ letter-spacing: 0.01em;
+}
+
+/* Glassmorphism Navbar */
+.navbar-default {
+ background: var(--glass-bg) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border-bottom: 1px solid var(--glass-border) !important;
+ box-shadow: var(--shadow-soft);
+ transition: var(--transition-standard);
+}
+
+.navbar-brand {
+ font-weight: 700 !important;
+ letter-spacing: -0.02em;
+ color: white !important;
+ text-shadow: 0 0 10px hsla(var(--primary-h), 100%, 50%, 0.3);
+}
+
+.navbar-nav > li > a {
+ color: var(--text-muted) !important;
+ transition: var(--transition-standard);
+ border-radius: 8px;
+ margin: 0 4px;
+}
+
+.navbar-nav > li > a:hover {
+ background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l),
0.2) !important;
+ color: white !important;
+ transform: translateY(-1px);
+}
+
+/* Premium Hero Section */
+.band {
+ background: linear-gradient(135deg,
+ hsl(var(--primary-h), 60%, 40%) 0%,
+ hsl(var(--primary-h), 30%, 20%) 100%
+ ) !important;
+ position: relative;
+ overflow: hidden;
+}
+
+.band::after {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: radial-gradient(circle at 70% 30%, hsla(var(--accent-h), 100%,
50%, 0.15) 0%, transparent 50%);
+ pointer-events: none;
+}
+
+/* Buttons */
+#big-download-button, .btn-primary {
+ background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l))
!important;
+ border: none !important;
+ box-shadow: 0 4px 14px 0 hsla(var(--accent-h), var(--accent-s),
var(--accent-l), 0.39);
+ transition: var(--transition-standard) !important;
+}
+
+#big-download-button:hover, .btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23);
+ background-color: hsl(var(--accent-h), var(--accent-s), 50%) !important;
+}
Review Comment:
Buttons get new hover transforms/shadows, but there’s no explicit
`:focus`/`:focus-visible` styling to keep a clear focus indicator, and the
added motion isn’t disabled for users who prefer reduced motion. Add
focus-visible styles for `#big-download-button`/`.btn-primary` and consider a
`prefers-reduced-motion: reduce` override to disable transforms/transitions.
--
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]
