Copilot commented on code in PR #3934:
URL: https://github.com/apache/hertzbeat/pull/3934#discussion_r2650125981
##########
home/src/pages/components/Feature.js:
##########
@@ -1,11 +1,17 @@
import React from 'react'
import clsx from 'clsx'
+import styles from '../styles.module.css'
-export default function Feature({ title, description }) {
+export default function Feature({ title, description, index = 0 }) {
return (
- <div className={clsx('col col--4')}>
- <h3 style={{textAlign: 'center', fontSize: 'x-large'}}>{title}</h3>
- <p>{description}</p>
+ <div
+ className={clsx('featureCard', styles.featureCard)}
Review Comment:
The animation delay is being set via inline styles, but the corresponding
animation is defined in styles.module.css as `fadeInUp` with the class
`animateFadeInUp`. However, this animation class is not being applied to the
feature card. The inline `animationDelay` will have no effect without the
animation being triggered. Either apply the `animateFadeInUp` class to the div,
or remove the unused animation delay.
```suggestion
className={clsx('featureCard', styles.featureCard,
styles.animateFadeInUp)}
```
##########
home/src/css/custom.css:
##########
@@ -165,3 +193,77 @@ article thead {
padding-left: 20px;
padding-right: 20px;
}
+
+body {
+ background-color: var(--md-surface);
+ color: var(--md-on-surface);
+}
+
+.button {
+ border-radius: 9999px !important;
+ transition: all var(--md-transition-medium) !important;
+ font-weight: 500;
+}
+
+.button--primary {
+ background-color: var(--ifm-color-primary) !important;
+ color: var(--md-on-primary) !important;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.button--primary:hover {
+ background-color: rgba(114, 40, 181, 0.9) !important;
+ box-shadow: 0 4px 12px rgba(114, 40, 181, 0.3) !important;
+ transform: translateY(-1px);
+}
+
+.button--primary:active {
+ transform: scale(0.95) translateY(0);
+ box-shadow: 0 2px 6px rgba(114, 40, 181, 0.2) !important;
+}
Review Comment:
Hard-coded color values are used in button hover and active states instead
of CSS variables. Using rgba(114, 40, 181, 0.9) and specific rgba values for
box shadows makes the styles less maintainable and inconsistent with the
Material Design variable system established elsewhere. Consider using CSS
variable-based calculations or defining new variables for these hover/active
states.
##########
home/src/pages/styles.module.css:
##########
@@ -5,37 +5,231 @@
* and scoped locally.
*/
+.section {
+ padding: 4rem 0;
+ width: 100%;
+ background: var(--md-surface);
+}
+
+.sectionRow {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+}
+
.heroBanner {
- padding: 1rem 0 5rem;
+ padding: 3rem 0 5rem;
text-align: center;
position: relative;
- overflow: hidden;
+ overflow: visible;
}
@media screen and (max-width: 966px) {
.heroBanner {
- padding: 2rem;
+ padding: 2rem 1rem 4rem;
}
}
-.buttons {
+.swiperContainer {
+ position: relative;
+ background: linear-gradient(180deg,
+ var(--md-surface) 0%,
+ var(--md-surface-container) 100%);
+ padding: 3rem 0;
+ overflow: hidden;
+}
+
+.swiperContainer::before {
+ content: '';
+ position: absolute;
+ width: 600px;
+ height: 600px;
+ background: var(--md-secondary-container);
+ border-radius: 50%;
+ filter: blur(100px);
+ opacity: 0.2;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ pointer-events: none;
+}
+
+.swiperContainer .swiper {
+ position: relative;
+ z-index: 1;
+ padding: 1rem 0;
+}
+
+.swiperContainer .swiper-slide {
display: flex;
- flex-wrap: wrap;
align-items: center;
justify-content: center;
- margin: 30px 0 0;
+ padding: 1rem;
+}
+
+.swiperContainer .swiper-slide img {
+ width: 100%;
+ max-width: 1200px;
+ height: auto;
+ border-radius: 24px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all var(--md-transition-medium);
+}
+
+.swiperContainer .swiper-slide img:hover {
+ box-shadow: 0 8px 30px rgba(103, 80, 164, 0.15);
+ transform: scale(1.01);
+}
+
+@media (max-width: 1200px) {
+ .swiperContainer .swiper-slide img {
+ max-width: 100%;
+ border-radius: 16px;
+ }
+}
+
+@media (max-width: 768px) {
+ .swiperContainer {
+ padding: 2rem 0;
+ }
+}
+
+.featuresSection {
+ background: var(--md-surface);
+ padding: 5rem 0;
+ position: relative;
+}
+
+.featuresSection::before {
+ content: '';
+ position: absolute;
+ width: 400px;
+ height: 400px;
+ background: var(--md-tertiary-container);
+ border-radius: 50%;
+ filter: blur(90px);
+ opacity: 0.15;
+ top: 20%;
+ right: -100px;
+ pointer-events: none;
+}
+
+.featuresRow {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ position: relative;
+ z-index: 1;
}
-.buttons > a {
- margin: 0 5px;
+@media (max-width: 996px) {
+ .featuresRow {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ }
}
@media (max-width: 650px) {
- .buttons > a {
- margin: 10px 5px;
+ .featuresRow {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animateFadeInUp {
+ animation: fadeInUp 0.6s var(--md-easing) forwards;
+}
+
+.featureCard {
+ background: var(--md-surface-container);
+ border-radius: 24px;
+ padding: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+ transition: all var(--md-transition-medium);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+.featureCard::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg,
+ var(--md-primary) 0%,
+ var(--md-tertiary) 100%);
+ opacity: 0;
+ transition: opacity var(--md-transition-medium);
+}
+
+.featureCard:hover {
+ box-shadow: 0 8px 24px rgba(103, 80, 164, 0.15);
+ transform: translateY(-4px) scale(1.02);
Review Comment:
Hard-coded rgba color values (103, 80, 164) are used instead of referencing
CSS variables. This pattern repeats throughout the file (lines 81, 185) and
makes the styles less maintainable and inconsistent with the established
Material Design variable system.
##########
home/src/pages/styles.module.css:
##########
@@ -5,37 +5,231 @@
* and scoped locally.
*/
+.section {
+ padding: 4rem 0;
+ width: 100%;
+ background: var(--md-surface);
+}
+
+.sectionRow {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+}
+
.heroBanner {
- padding: 1rem 0 5rem;
+ padding: 3rem 0 5rem;
text-align: center;
position: relative;
- overflow: hidden;
+ overflow: visible;
}
@media screen and (max-width: 966px) {
.heroBanner {
- padding: 2rem;
+ padding: 2rem 1rem 4rem;
}
}
-.buttons {
+.swiperContainer {
+ position: relative;
+ background: linear-gradient(180deg,
+ var(--md-surface) 0%,
+ var(--md-surface-container) 100%);
+ padding: 3rem 0;
+ overflow: hidden;
+}
+
+.swiperContainer::before {
+ content: '';
+ position: absolute;
+ width: 600px;
+ height: 600px;
+ background: var(--md-secondary-container);
+ border-radius: 50%;
+ filter: blur(100px);
+ opacity: 0.2;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ pointer-events: none;
+}
+
+.swiperContainer .swiper {
+ position: relative;
+ z-index: 1;
+ padding: 1rem 0;
+}
+
+.swiperContainer .swiper-slide {
display: flex;
- flex-wrap: wrap;
align-items: center;
justify-content: center;
- margin: 30px 0 0;
+ padding: 1rem;
+}
+
+.swiperContainer .swiper-slide img {
+ width: 100%;
+ max-width: 1200px;
+ height: auto;
+ border-radius: 24px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all var(--md-transition-medium);
+}
+
+.swiperContainer .swiper-slide img:hover {
+ box-shadow: 0 8px 30px rgba(103, 80, 164, 0.15);
Review Comment:
Hard-coded rgba color values with specific color values (103, 80, 164) are
used in multiple places for shadows and effects. These should reference the
Material Design color system variables to maintain consistency and support
theme switching. The value appears to approximate --md-primary but without
using the actual variable.
```suggestion
box-shadow: 0 8px 30px color-mix(in srgb, var(--md-primary) 15%,
transparent);
```
##########
home/src/css/hero.css:
##########
@@ -1,34 +1,181 @@
.hero--primary {
- --ifm-hero-background-color: #fff;
- --ifm-hero-text-color: #000;
+ --ifm-hero-background-color: var(--md-surface);
+ --ifm-hero-text-color: var(--md-on-surface);
+ position: relative;
+ overflow: visible;
+ min-height: 600px;
+ display: flex;
+ align-items: center;
}
html[data-theme=dark] .hero--primary {
- --ifm-hero-background-color: #0c0c0c;
- --ifm-hero-text-color: #fff;
+ --ifm-hero-background-color: #121212;
+ --ifm-hero-text-color: var(--md-surface);
+}
+
+.hero--primary::before,
+.hero--primary::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.25;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.hero--primary::before {
+ width: 500px;
+ height: 500px;
+ background: var(--md-primary);
+ top: -100px;
+ right: -150px;
+ animation: float 8s ease-in-out infinite;
+}
+
+.hero--primary::after {
+ width: 400px;
+ height: 400px;
+ background: var(--md-secondary-container);
+ bottom: -50px;
+ left: -100px;
+ animation: float 10s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(0, 0);
+ }
+ 50% {
+ transform: translate(20px, -20px);
+ }
+}
+
+.hero--primary .container {
+ position: relative;
+ z-index: 1;
}
.hero__title {
background-size: 110%;
color: transparent;
width: 100%;
- max-width: 600px;
+ max-width: 700px;
margin: 0 auto;
- height: 280px;
+ height: auto;
+ min-height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero__title img {
+ width: 100%;
+ max-width: 600px;
+ height: auto;
+ margin-top: 0;
+ filter: drop-shadow(0 4px 20px rgba(103, 80, 164, 0.15));
+ transition: transform var(--md-transition-medium);
+}
+
+.hero__title img:hover {
+ transform: scale(1.02);
}
.hero__subtitle {
- font-size: 3em;
- font-weight: bolder;
- font-family: monospace;
- color: #d97700;
+ font-size: 2.5rem;
+ font-weight: 700;
+ font-family: 'Roboto', sans-serif;
+ background: linear-gradient(135deg, var(--md-primary) 0%, #A228E5 100%);
Review Comment:
Hard-coded color value #A228E5 is used in the gradient instead of the CSS
variable --ifm-color-primary-lightest which has the same value. Using the
variable would be more maintainable and consistent with the theme system.
```suggestion
background: linear-gradient(135deg, var(--md-primary) 0%,
var(--ifm-color-primary-lightest) 100%);
```
##########
home/src/pages/styles.module.css:
##########
@@ -5,37 +5,231 @@
* and scoped locally.
*/
+.section {
+ padding: 4rem 0;
+ width: 100%;
+ background: var(--md-surface);
+}
+
+.sectionRow {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+}
+
.heroBanner {
- padding: 1rem 0 5rem;
+ padding: 3rem 0 5rem;
text-align: center;
position: relative;
- overflow: hidden;
+ overflow: visible;
}
@media screen and (max-width: 966px) {
.heroBanner {
- padding: 2rem;
+ padding: 2rem 1rem 4rem;
}
}
-.buttons {
+.swiperContainer {
+ position: relative;
+ background: linear-gradient(180deg,
+ var(--md-surface) 0%,
+ var(--md-surface-container) 100%);
+ padding: 3rem 0;
+ overflow: hidden;
+}
+
+.swiperContainer::before {
+ content: '';
+ position: absolute;
+ width: 600px;
+ height: 600px;
+ background: var(--md-secondary-container);
+ border-radius: 50%;
+ filter: blur(100px);
+ opacity: 0.2;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ pointer-events: none;
+}
+
+.swiperContainer .swiper {
+ position: relative;
+ z-index: 1;
+ padding: 1rem 0;
+}
+
+.swiperContainer .swiper-slide {
display: flex;
- flex-wrap: wrap;
align-items: center;
justify-content: center;
- margin: 30px 0 0;
+ padding: 1rem;
+}
+
+.swiperContainer .swiper-slide img {
+ width: 100%;
+ max-width: 1200px;
+ height: auto;
+ border-radius: 24px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ transition: all var(--md-transition-medium);
+}
+
+.swiperContainer .swiper-slide img:hover {
+ box-shadow: 0 8px 30px rgba(103, 80, 164, 0.15);
+ transform: scale(1.01);
+}
+
+@media (max-width: 1200px) {
+ .swiperContainer .swiper-slide img {
+ max-width: 100%;
+ border-radius: 16px;
+ }
+}
+
+@media (max-width: 768px) {
+ .swiperContainer {
+ padding: 2rem 0;
+ }
+}
+
+.featuresSection {
+ background: var(--md-surface);
+ padding: 5rem 0;
+ position: relative;
+}
+
+.featuresSection::before {
+ content: '';
+ position: absolute;
+ width: 400px;
+ height: 400px;
+ background: var(--md-tertiary-container);
+ border-radius: 50%;
+ filter: blur(90px);
+ opacity: 0.15;
+ top: 20%;
+ right: -100px;
+ pointer-events: none;
+}
+
+.featuresRow {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ position: relative;
+ z-index: 1;
}
-.buttons > a {
- margin: 0 5px;
+@media (max-width: 996px) {
+ .featuresRow {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ }
}
@media (max-width: 650px) {
- .buttons > a {
- margin: 10px 5px;
+ .featuresRow {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animateFadeInUp {
+ animation: fadeInUp 0.6s var(--md-easing) forwards;
+}
+
Review Comment:
The class name 'animateFadeInUp' is defined but never used anywhere in the
codebase. The fadeInUp animation appears intended for the feature cards based
on the animationDelay being set in Feature.js, but the class is not applied.
Either apply this class to elements that should animate or remove the unused
CSS definition.
```suggestion
```
##########
home/src/css/hero.css:
##########
@@ -1,34 +1,181 @@
.hero--primary {
- --ifm-hero-background-color: #fff;
- --ifm-hero-text-color: #000;
+ --ifm-hero-background-color: var(--md-surface);
+ --ifm-hero-text-color: var(--md-on-surface);
+ position: relative;
+ overflow: visible;
+ min-height: 600px;
+ display: flex;
+ align-items: center;
}
html[data-theme=dark] .hero--primary {
- --ifm-hero-background-color: #0c0c0c;
- --ifm-hero-text-color: #fff;
+ --ifm-hero-background-color: #121212;
+ --ifm-hero-text-color: var(--md-surface);
+}
+
+.hero--primary::before,
+.hero--primary::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.25;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.hero--primary::before {
+ width: 500px;
+ height: 500px;
+ background: var(--md-primary);
+ top: -100px;
+ right: -150px;
+ animation: float 8s ease-in-out infinite;
+}
+
+.hero--primary::after {
+ width: 400px;
+ height: 400px;
+ background: var(--md-secondary-container);
+ bottom: -50px;
+ left: -100px;
+ animation: float 10s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(0, 0);
+ }
+ 50% {
+ transform: translate(20px, -20px);
+ }
+}
+
+.hero--primary .container {
+ position: relative;
+ z-index: 1;
}
.hero__title {
background-size: 110%;
color: transparent;
width: 100%;
- max-width: 600px;
+ max-width: 700px;
margin: 0 auto;
- height: 280px;
+ height: auto;
+ min-height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero__title img {
+ width: 100%;
+ max-width: 600px;
+ height: auto;
+ margin-top: 0;
+ filter: drop-shadow(0 4px 20px rgba(103, 80, 164, 0.15));
Review Comment:
Hard-coded rgba color value (103, 80, 164) is used instead of referencing
CSS variables. This should use a Material Design variable to maintain
consistency with the theme system and support proper color adaptation.
##########
home/src/css/hero.css:
##########
@@ -1,34 +1,181 @@
.hero--primary {
- --ifm-hero-background-color: #fff;
- --ifm-hero-text-color: #000;
+ --ifm-hero-background-color: var(--md-surface);
+ --ifm-hero-text-color: var(--md-on-surface);
+ position: relative;
+ overflow: visible;
+ min-height: 600px;
+ display: flex;
+ align-items: center;
}
html[data-theme=dark] .hero--primary {
- --ifm-hero-background-color: #0c0c0c;
- --ifm-hero-text-color: #fff;
+ --ifm-hero-background-color: #121212;
+ --ifm-hero-text-color: var(--md-surface);
Review Comment:
Using hard-coded #121212 for dark theme background instead of a Material
Design variable. For consistency with the MD color system being implemented,
consider defining --md-surface-dark or similar variable and using that here.
##########
home/src/css/hero.css:
##########
@@ -1,34 +1,181 @@
.hero--primary {
- --ifm-hero-background-color: #fff;
- --ifm-hero-text-color: #000;
+ --ifm-hero-background-color: var(--md-surface);
+ --ifm-hero-text-color: var(--md-on-surface);
+ position: relative;
+ overflow: visible;
+ min-height: 600px;
+ display: flex;
+ align-items: center;
}
html[data-theme=dark] .hero--primary {
- --ifm-hero-background-color: #0c0c0c;
- --ifm-hero-text-color: #fff;
+ --ifm-hero-background-color: #121212;
+ --ifm-hero-text-color: var(--md-surface);
+}
+
+.hero--primary::before,
+.hero--primary::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.25;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.hero--primary::before {
+ width: 500px;
+ height: 500px;
+ background: var(--md-primary);
+ top: -100px;
+ right: -150px;
+ animation: float 8s ease-in-out infinite;
+}
+
+.hero--primary::after {
+ width: 400px;
+ height: 400px;
+ background: var(--md-secondary-container);
+ bottom: -50px;
+ left: -100px;
+ animation: float 10s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(0, 0);
+ }
+ 50% {
+ transform: translate(20px, -20px);
+ }
+}
+
+.hero--primary .container {
+ position: relative;
+ z-index: 1;
}
.hero__title {
background-size: 110%;
color: transparent;
width: 100%;
- max-width: 600px;
+ max-width: 700px;
margin: 0 auto;
- height: 280px;
+ height: auto;
+ min-height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero__title img {
+ width: 100%;
+ max-width: 600px;
+ height: auto;
+ margin-top: 0;
+ filter: drop-shadow(0 4px 20px rgba(103, 80, 164, 0.15));
+ transition: transform var(--md-transition-medium);
+}
+
+.hero__title img:hover {
+ transform: scale(1.02);
}
.hero__subtitle {
- font-size: 3em;
- font-weight: bolder;
- font-family: monospace;
- color: #d97700;
+ font-size: 2.5rem;
+ font-weight: 700;
+ font-family: 'Roboto', sans-serif;
+ background: linear-gradient(135deg, var(--md-primary) 0%, #A228E5 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
Review Comment:
The subtitle uses transparent text fill with a gradient background
(-webkit-text-fill-color: transparent). This technique can cause accessibility
issues as the text becomes invisible when CSS fails to load, high contrast mode
is enabled, or when users have custom stylesheets. Consider providing a
fallback color or using a different approach that degrades gracefully.
##########
home/src/pages/components/Section.js:
##########
@@ -1,14 +1,15 @@
import React from 'react'
+import clsx from 'clsx'
+import styles from '../styles.module.css'
-export default function Section({children }) {
+export default function Section({ children, className }) {
return (
- <section style={{padding: '4rem 0', width: '100%' }}>
+ <section className={clsx(styles.section, className)}>
<div className="container">
- <div className="row">
+ <div className={styles.sectionRow}>
{children}
</div>
</div>
</section>
)
}
Review Comment:
The Section component is no longer being used in the index.js file but has
been updated in this PR. The component import was removed but the component
file was modified. This creates dead code that should either be utilized or
removed to keep the codebase clean.
##########
home/src/css/custom.css:
##########
@@ -1,22 +1,50 @@
+@import
url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url(navbar.css);
@import url(hero.css);
:root {
+ --md-primary: #6750A4;
+ --md-on-primary: #FFFFFF;
+ --md-primary-container: #EADDFF;
+ --md-on-primary-container: #21005D;
+ --md-secondary: #625B71;
+ --md-secondary-container: #E8DEF8;
+ --md-on-secondary-container: #1D192B;
+ --md-tertiary: #7D5260;
+ --md-tertiary-container: #FFD8E4;
+ --md-surface: #FFFBFE;
+ --md-surface-dim: #DDD8E1;
+ --md-surface-bright: #FFFBFE;
+ --md-surface-container-low: #F7F2FA;
+ --md-surface-container: #F3EDF7;
+ --md-surface-container-high: #ECE6F0;
+ --md-on-surface: #1C1B1F;
+ --md-on-surface-variant: #49454F;
+ --md-outline: #79747E;
+ --md-outline-variant: #CAC4D0;
+
--ifm-color-primary: #7228B5;
--ifm-color-primary-dark: #6228B5;
--ifm-color-primary-darker: #5228B5;
--ifm-color-primary-darkest: #5128B5;
- --ifm-color-primary-light: #7228B5;
- --ifm-color-primary-lighter: #8228B5;
- --ifm-color-primary-lightest: #9228B5;
+ --ifm-color-primary-light: #8228C5;
+ --ifm-color-primary-lighter: #9228D5;
+ --ifm-color-primary-lightest: #A228E5;
--ifm-navbar-link-hover-color: var(--ifm-color-primary);
--ifm-code-font-size: 95%;
- --ifm-font-family-base: Verdana, Arial, Helvetica, sans-serif;
- --ifm-font-family-monospace: sans-serif;
- --ifm-button-padding-horizontal: 0.55rem;
- --ifm-button-padding-vertical: .7rem;
- --ifm-navbar-height: 85px;
+
+ --ifm-font-family-base: 'Roboto', Verdana, Arial, Helvetica, sans-serif;
+ --ifm-font-family-monospace: 'Courier New', monospace;
+
+ --ifm-button-padding-horizontal: 1.5rem;
+ --ifm-button-padding-vertical: 0.75rem;
+ --ifm-button-border-radius: 9999px;
--ifm-button-border-width: 0;
+ --ifm-navbar-height: 85px;
+
+ --md-easing: cubic-bezier(0.2, 0, 0, 1);
+ --md-transition-fast: 200ms var(--md-easing);
+ --md-transition-medium: 300ms var(--md-easing);
}
Review Comment:
The Material Design color variables are only defined for light mode in the
:root selector, but there's no dark mode theme definition (e.g.,
html[data-theme='dark']). This means when users switch to dark mode, the site
will still use light mode colors for all MD variables like --md-surface,
--md-on-surface, etc. This will likely result in poor contrast and readability
issues in dark mode. Add appropriate dark mode color definitions for all
Material Design variables.
```suggestion
html[data-theme='dark'] {
--md-primary: #D0BCFF;
--md-on-primary: #381E72;
--md-primary-container: #4F378B;
--md-on-primary-container: #EADDFF;
--md-secondary: #CCC2DC;
--md-secondary-container: #4A4458;
--md-on-secondary-container: #E8DEF8;
--md-tertiary: #EFB8C8;
--md-tertiary-container: #633B48;
--md-surface: #141218;
--md-surface-dim: #141218;
--md-surface-bright: #3B383E;
--md-surface-container-low: #1D1B20;
--md-surface-container: #211F26;
--md-surface-container-high: #2B2930;
--md-on-surface: #E6E1E5;
--md-on-surface-variant: #CAC4D0;
--md-outline: #938F99;
--md-outline-variant: #49454F;
}
```
--
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]
