diff --git a/src/components/caseCard/index.js b/src/components/caseCard/index.js index 6844bd3e15..880ef86c4f 100644 --- a/src/components/caseCard/index.js +++ b/src/components/caseCard/index.js @@ -4,33 +4,39 @@ import Translate from "@docusaurus/Translate"; import "./styles.scss"; export default function CaseCard(props) { - const { - title = "", - subTitle = "", - date = "", - desc = "", - imgUrl = "", - link = "", - } = props; - const history = useHistory(); + const { + title = "", + subTitle = "", + date = "", + desc = "", + imgUrl = "", + link = "", + } = props; + const history = useHistory(); - return ( -
-

history.push(link)}> - {title} -

-
-

{subTitle}

-

{desc}

-
{date}
- history.push(link)}> - READ CASE STUDY - + const handleClick = (e) => { + e.preventDefault(); + history.push(link); + }; + + return ( +
+ {imgUrl && ( +
+ {title} +
+ )} +
+

{title}

+

{subTitle}

+

{desc}

+
+ {date} +
- ); -} \ No newline at end of file +
+
+ ); +} diff --git a/src/components/caseCard/styles.scss b/src/components/caseCard/styles.scss index 52649ce774..18719da9d1 100644 --- a/src/components/caseCard/styles.scss +++ b/src/components/caseCard/styles.scss @@ -1,78 +1,98 @@ .case-card { - min-height: 280px; - min-width: 35px; - border-radius: 10px; - border: 1px solid rgba(0, 0, 0, 0.06); - display: grid; - grid-template-areas: - "title desc" - "hr desc" - "sub desc" - "sub desc" - "date btn"; - grid-template-columns: 6fr 5fr; - grid-template-rows: auto auto auto 1fr; - grid-column-gap: 40px; - padding: 36px; - background-repeat: no-repeat; - background-size: cover; + background: var(--ifm-card-background-color); + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; + cursor: pointer; + overflow: hidden; + height: 100%; + display: flex; + flex-direction: column; + max-width: 400px; + margin: 0 auto; - .title { - grid-area: title; - color: #fff; - font-size: 36px; - margin-bottom: 18px; - cursor: pointer; + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } - hr { - grid-area: hr; - background: #fff; - height: 4px !important; - width: 40px !important; - margin: 0; + .image-wrapper { + width: 100%; + height: 160px; + overflow: hidden; + + .cover-image { + width: 100%; + height: 100%; + object-fit: cover; + } } - .sub { - grid-area: sub; - font-size: 30px; - color: #62a1ff; - margin-top: 20px; + .content { + padding: 1.5rem; + display: flex; + flex-direction: column; + flex: 1; } - .date { - grid-area: date; - color: #fff; - display: flex; - align-items: flex-end; + .title { + font-size: 1.25rem; + font-weight: 700; + color: var(--ifm-heading-color); + margin-bottom: 0.5rem; + line-height: 1.3; } - .desc { - grid-area: desc; - font-size: 16px; - color: #fff; - letter-spacing: 0.02em; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; + .subtitle { + font-size: 1rem; + font-weight: 600; + color: var(--ifm-color-emphasis-700); + margin-bottom: 1rem; + } + + .description { + font-size: 0.9rem; + line-height: 1.5; + color: var(--ifm-color-emphasis-700); + margin-bottom: 1.5rem; + flex-grow: 1; + } + + .card-footer { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + margin-top: auto; } .date { - font-size: 12px; + font-size: 0.875rem; + color: var(--ifm-color-emphasis-600); } - a { - grid-area: btn; - font-size: 16px; - padding-left: 20px; - padding-right: 20px; - background-color: #1c77c8; + .read-more { + background: var(--ifm-color-primary); + color: white; + border: none; + border-radius: 6px; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background: var(--ifm-color-primary-dark); + } } } -html[data-theme="dark"] { - .case-card { - background-color: #242526; - border: 1px solid rgba(255, 255, 255, 0.06); +html[data-theme='dark'] .case-card { + background: var(--ifm-card-background-color); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } } \ No newline at end of file diff --git a/src/components/tagToggle/index.js b/src/components/tagToggle/index.js index e1458c6122..ad9cbe4c95 100644 --- a/src/components/tagToggle/index.js +++ b/src/components/tagToggle/index.js @@ -5,45 +5,45 @@ import Translate from "@docusaurus/Translate"; import "./index.scss"; export default function TagToggle({ selected, onChange }) { - const [activeIndex, setActiveIndex] = React.useState(0); - const { i18n } = useDocusaurusContext(); + const [activeIndex, setActiveIndex] = React.useState(0); + const { i18n } = useDocusaurusContext(); - const tagType = useMemo(() => { - if (i18n.currentLocale === "en") { - return TAG_Type_EN; - } + const tagType = useMemo(() => { + if (i18n.currentLocale === "en") { + return TAG_Type_EN; + } - return TAG_TYPE_ZH; - }, []); + return TAG_TYPE_ZH; + }, []); - const handleOnclick = (tag, index) => { - setActiveIndex(index); + const handleOnclick = (tag, index) => { + setActiveIndex(index); - if (index === 0) { - onChange(""); - } else { - onChange(tag); - } - }; + if (index === 0) { + onChange(""); + } else { + onChange(tag); + } + }; - return ( -
-
-
- Case Category -
-
- {tagType.map((tag, index) => ( -
handleOnclick(tag, index)} - > - {tag} -
- ))} -
+ return ( +
+
+
+ Case Category +
+
+ {tagType.map((tag, index) => ( +
handleOnclick(tag, index)} + > + {tag}
+ ))}
- ); -} \ No newline at end of file +
+
+ ); +} diff --git a/src/components/tagToggle/index.scss b/src/components/tagToggle/index.scss index 91d4f0afcb..8b8595adb3 100644 --- a/src/components/tagToggle/index.scss +++ b/src/components/tagToggle/index.scss @@ -4,15 +4,14 @@ height: 60px; align-items: center; vertical-align: top; - padding: 16px 40px; - box-shadow: 0 1px 5px rgba(45, 47, 51, 0.1); - background-color: var(--ifm-navbar-background-color); gap: 24px; + border-radius: 8px; .title { height: 30px; padding: 3px 12px; display: flex; + font-weight: 900; align-items: center; } @@ -35,16 +34,10 @@ &.active { border: 1px solid #3578e5; color: #3578e5; + border-radius: 4px; } } } } } -html[data-theme="dark"] { - .tag-toggle-container { - .tag-toggle-list { - box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3); - } - } -} \ No newline at end of file diff --git a/src/pages/case-studies/index.js b/src/pages/case-studies/index.js index a619d33124..0974933f02 100644 --- a/src/pages/case-studies/index.js +++ b/src/pages/case-studies/index.js @@ -10,62 +10,69 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import "./index.scss"; export default function CaseStudies() { - const { i18n } = useDocusaurusContext(); - const { casestudiesGlobalData } = usePluginData( - "casestudies-global-dataPlugin" - ); - const [filters, setFilters] = React.useState(); + const { i18n } = useDocusaurusContext(); + const { casestudiesGlobalData } = usePluginData( + "casestudies-global-dataPlugin" + ); + const [filters, setFilters] = React.useState(); - const casestudiesGlobalDataMemo = React.useMemo(() => { - if (filters) { - return casestudiesGlobalData.filter((item) => - (item.metadata?.frontMatter?.tags ?? []).includes(filters) - ); - } + const casestudiesGlobalDataMemo = React.useMemo(() => { + if (filters) { + return casestudiesGlobalData.filter((item) => + (item.metadata?.frontMatter?.tags ?? []).includes(filters) + ); + } - return casestudiesGlobalData; - }, [filters]); + return casestudiesGlobalData; + }, [filters]); - return ( - -
-
-

- Case Studies -

-

- Showcase of KubeEdge based solutions and successful stories of using KubeEdge in various business scenarios and the positive effects brought by them -

- -
-
- setFilters(e)} /> - - {casestudiesGlobalDataMemo.map((item, index) => ( - - - - ))} - -
-
- - ); + return ( + +
+
+

+ Case Studies +

+

+ + Showcase of KubeEdge based solutions and successful stories of + using KubeEdge in various business scenarios and the positive + effects brought by them + +

+ +
+
+ setFilters(e)} /> + + {casestudiesGlobalDataMemo.map((item, index) => ( + + + + ))} + +
+
+ + ); } diff --git a/src/pages/case-studies/index.scss b/src/pages/case-studies/index.scss index 2d8d512896..a1b0772c6e 100644 --- a/src/pages/case-studies/index.scss +++ b/src/pages/case-studies/index.scss @@ -12,10 +12,9 @@ flex-direction: column; justify-content: center; align-items: center; - background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), - url("/img/casestudies/header.jpg"); background-repeat: no-repeat; background-size: cover; + padding: 0 20px; .button { background-color: #f8f9fa; @@ -25,18 +24,32 @@ text-decoration: none; display: inline-block; font-size: 16px; + transition: all 0.3s ease; } + .button:hover { + background-color: #e2e6ea; + text-decoration: none; + } + a{ + text-decoration: none; + color: #1C77C8; + } .case-studies { font-size: 40px; font-weight: 700; - color: white; + color: #1C77C8; } .case-studies-subtitle { font-weight: 500; font-size: 20px; - color: white; + color: var(--ifm-font-color-base); + max-width: 800px; + text-align: center; + html[data-theme='dark'] & { + color: #ffffff; + } } } @@ -60,4 +73,25 @@ } } } +} + +@media screen and (max-width: 768px) { + .case-studies-container { + .case-studies-header { + .case-studies-subtitle { + font-size: 16px; + } + } + } +} + +@media screen and (max-width: 480px) { + .case-studies-container { + .case-studies-header { + .case-studies-subtitle { + font-size: 10px; + padding: 0 8px; + } + } + } } \ No newline at end of file