This is an automated email from the ASF dual-hosted git repository.
chaokunyang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fory-site.git
The following commit(s) were added to refs/heads/main by this push:
new 8eecb862e6 Polish homepage and docs layout (#465)
8eecb862e6 is described below
commit 8eecb862e6b4c080797ac29e878b34a9d188c86d
Author: Shawn Yang <[email protected]>
AuthorDate: Thu Jun 4 23:15:21 2026 +0800
Polish homepage and docs layout (#465)
---
src/components/home/HomepageLanding.module.css | 28 +++++++--------
src/components/home/HomepageLanding.tsx | 4 ---
src/css/custom.css | 47 +++++++++++++++++---------
3 files changed, 45 insertions(+), 34 deletions(-)
diff --git a/src/components/home/HomepageLanding.module.css
b/src/components/home/HomepageLanding.module.css
index a67fbb7698..269100579d 100644
--- a/src/components/home/HomepageLanding.module.css
+++ b/src/components/home/HomepageLanding.module.css
@@ -12,17 +12,17 @@
.hero {
align-items: center;
background:
- linear-gradient(90deg, rgba(255, 112, 1, 0.055), transparent 32%),
- linear-gradient(180deg, var(--ifm-background-color), #f9fafb);
+ linear-gradient(90deg, rgba(255, 112, 1, 0.04), transparent 34%),
+ linear-gradient(180deg, var(--ifm-background-color), #fafbfc);
display: grid;
- gap: 2rem;
- grid-template-columns: minmax(0, 0.9fr) minmax(440px, 0.82fr);
- min-height: 560px;
- padding: 4rem max(2rem, calc((100vw - 1180px) / 2)) 4rem;
+ gap: 3rem;
+ grid-template-columns: minmax(0, 1fr) minmax(430px, 0.78fr);
+ min-height: 520px;
+ padding: 4.25rem max(2rem, calc((100vw - var(--fory-marketing-width,
1240px)) / 2)) 4.5rem;
}
.heroContent {
- max-width: 690px;
+ max-width: 730px;
}
.eyebrow,
@@ -41,7 +41,7 @@
.sectionHeader h2,
.performanceCopy h2,
.ecosystem h2 {
- font-size: 3.65rem;
+ font-size: 3.75rem;
line-height: 1.02;
margin: 0;
}
@@ -50,8 +50,8 @@
color: var(--ifm-color-emphasis-800);
font-size: 1.2rem;
line-height: 1.72;
- margin: 1.35rem 0 0;
- max-width: 650px;
+ margin: 1.2rem 0 0;
+ max-width: 690px;
}
.heroActions {
@@ -130,14 +130,14 @@
.surfacePanel {
justify-self: end;
- max-width: 540px;
+ max-width: 520px;
min-width: 0;
width: 100%;
}
.surfaceOptions {
display: grid;
- gap: 0.85rem;
+ gap: 0.95rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -156,8 +156,8 @@
color: var(--ifm-font-color-base);
display: grid;
gap: 0.7rem;
- min-height: 136px;
- padding: 1rem;
+ min-height: 128px;
+ padding: 1.05rem;
text-decoration: none;
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms
ease, transform 160ms ease;
}
diff --git a/src/components/home/HomepageLanding.tsx
b/src/components/home/HomepageLanding.tsx
index 1770c9e56b..762b3c2895 100644
--- a/src/components/home/HomepageLanding.tsx
+++ b/src/components/home/HomepageLanding.tsx
@@ -29,7 +29,6 @@ type RuntimeExample = {
};
type Copy = {
- heroEyebrow: string;
heroTitle: string;
heroSubtitle: string;
heroPrimary: string;
@@ -60,7 +59,6 @@ type Copy = {
const copies: Record<"en" | "zh", Copy> = {
en: {
- heroEyebrow: "Apache Fory™ - Blazingly-Fast Multi-language Serialization",
heroTitle: "Apache Fory™",
heroSubtitle:
"A blazingly-fast multi-language serialization framework for idiomatic
domain objects, Schema IDL, and cross-language data exchange.",
@@ -96,7 +94,6 @@ const copies: Record<"en" | "zh", Copy> = {
"Choose the wire mode for each boundary, promote shared models into Fory
IDL when contracts need to last, then validate the exact path with per-language
benchmarks.",
},
zh: {
- heroEyebrow: "Apache Fory™ - 高性能多语言序列化",
heroTitle: "Apache Fory™",
heroSubtitle:
"一个面向原生领域对象、Schema IDL 和跨语言数据交换的高性能多语言序列化框架。",
@@ -666,7 +663,6 @@ function HomepageLanding(): JSX.Element {
<main className={styles.homepage}>
<section className={styles.hero}>
<div className={styles.heroContent}>
- <div className={styles.eyebrow}>{copy.heroEyebrow}</div>
<h1>{copy.heroTitle}</h1>
<p className={styles.heroSubtitle}>{copy.heroSubtitle}</p>
<div className={styles.heroActions}>
diff --git a/src/css/custom.css b/src/css/custom.css
index de2b646a46..98d24b3830 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,7 +6,8 @@
/* You can override the default Infima variables here. */
:root {
- --fory-layout-width: 1180px;
+ --fory-layout-width: 1280px;
+ --fory-marketing-width: 1240px;
--ifm-navbar-height: 4rem;
--ifm-color-primary: #ff6f01d2;
--ifm-color-primary-dark: #FF7001;
@@ -33,8 +34,8 @@
@media (min-width: 997px) {
.navbar {
- padding-left: 2rem;
- padding-right: 2rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
}
.navbar__inner {
@@ -43,8 +44,8 @@
max-width: var(--fory-layout-width);
}
-.navbar__brand {
- margin-right: 1.5rem;
+ .navbar__brand {
+ margin-right: 1.75rem;
}
}
@@ -73,8 +74,8 @@
.navbar__link {
color: var(--ifm-navbar-link-color);
font-size: .9375rem;
- padding-left: .55rem;
- padding-right: .55rem;
+ padding-left: .65rem;
+ padding-right: .65rem;
}
.navbar__items--right .dropdown > .navbar__link {
@@ -173,16 +174,16 @@
/* Docs reading surface */
:root {
- --fory-doc-content-width: 860px;
- --fory-doc-shell-width: 908px;
- --fory-doc-wide-width: 860px;
- --fory-doc-gutter-width: 24px;
- --fory-doc-sidebar-inset: 2.75rem;
- --fory-doc-toc-right-inset: 5.5rem;
+ --fory-doc-content-width: 940px;
+ --fory-doc-shell-width: 988px;
+ --fory-doc-wide-width: 988px;
+ --fory-doc-gutter-width: 18px;
+ --fory-doc-sidebar-inset: 2rem;
+ --fory-doc-toc-right-inset: 1.5rem;
}
html:root {
- --doc-sidebar-width: 310px;
+ --doc-sidebar-width: 300px;
}
.theme-doc-breadcrumbs,
@@ -250,7 +251,21 @@ html:root {
margin-left: auto;
margin-right: auto;
max-width: none;
- width: calc(100% - 4rem);
+ width: 100%;
+ }
+
+ html body [class*="docItemCol_"] {
+ flex: 0 0 80% !important;
+ max-width: 80% !important;
+ min-width: 0;
+ width: 80% !important;
+ }
+
+ html body [class*="docItemCol_"] + .col.col--3 {
+ --ifm-col-width: 20%;
+ flex: 0 0 20% !important;
+ max-width: 20% !important;
+ width: 20% !important;
}
.theme-doc-breadcrumbs,
@@ -330,7 +345,7 @@ html:root {
@media (min-width: 997px) {
.theme-doc-sidebar-menu {
- padding-left: max(.75rem, calc((100vw - var(--fory-layout-width)) / 2 -
.5rem));
+ padding-left: max(.75rem, calc((100vw - var(--fory-layout-width)) / 2));
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
