This is an automated email from the ASF dual-hosted git repository.
delei pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fesod.git
The following commit(s) were added to refs/heads/main by this push:
new e6b6d1a3 style: redesign homepage hero as a spreadsheet grid (#983)
e6b6d1a3 is described below
commit e6b6d1a3e3114d6193b68eb67a4c07f3787beaab
Author: Nikita Kuprins <[email protected]>
AuthorDate: Sat Aug 15 14:46:50 2026 +0300
style: redesign homepage hero as a spreadsheet grid (#983)
* style: redesign homepage hero with brand-colored spreadsheet grid
* style: fade out clipped hero grid labels
* style: keep the hero grid behind the hero content
* style: extend hero column labels for wide screens
---------
Co-authored-by: DeleiGuo <[email protected]>
---
website/src/css/custom.css | 2 +-
website/src/pages/index.js | 25 ++++++++++++++++
website/src/pages/index.module.css | 61 ++++++++++++++++++++++++++++++++++++++
3 files changed, 87 insertions(+), 1 deletion(-)
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 1285023a..4167f5e3 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -52,7 +52,7 @@
}
.hero {
- background: radial-gradient(circle, #00b95f 20%, #69CD37 50%, #14824b
100%);
+ background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0,
0) 100%) #14824b;
}
.header-github-link::before {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index cf1104f8..be9f5545 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -27,10 +27,35 @@ import Translate from '@docusaurus/Translate';
import Heading from '@theme/Heading';
import styles from './index.module.css';
+const COLUMN_COUNT = 120;
+const ROW_COUNT = 18;
+
+function columnLetter(index) {
+ let n = index + 1;
+ let label = '';
+ while (n > 0) {
+ const remainder = (n - 1) % 26;
+ label = String.fromCharCode(65 + remainder) + label;
+ n = Math.floor((n - 1) / 26);
+ }
+ return label;
+}
+
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
+ <div className={styles.gridOverlay} aria-hidden="true" />
+ <div className={styles.colLabels} aria-hidden="true">
+ {Array.from({length: COLUMN_COUNT}, (_, i) => (
+ <span key={i}>{columnLetter(i)}</span>
+ ))}
+ </div>
+ <div className={styles.rowLabels} aria-hidden="true">
+ {Array.from({length: ROW_COUNT}, (_, i) => (
+ <span key={i}>{i + 1}</span>
+ ))}
+ </div>
<div className="container">
<Heading as="h1" className="hero__title">
{siteConfig.title}
diff --git a/website/src/pages/index.module.css
b/website/src/pages/index.module.css
index dead0f1c..5863ec4b 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -23,14 +23,18 @@
*/
.heroBanner {
+ --grid-size: 48px;
+ --grid-fade: 10px;
padding: 6rem 0;
text-align: center;
position: relative;
overflow: hidden;
+ isolation: isolate;
}
@media screen and (max-width: 996px) {
.heroBanner {
+ --grid-size: 32px;
padding: 2rem;
}
}
@@ -58,3 +62,60 @@
width: 20px;
height: 20px;
}
+
+.gridOverlay {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ 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: -1;
+ 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));
+}
+
+.colLabels span,
+.rowLabels span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: var(--grid-size);
+ height: var(--grid-size);
+}
+
+@media screen and (max-width: 996px) {
+ .colLabels,
+ .rowLabels {
+ font-size: 0.6rem;
+ }
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
