From 8b8956e7d14c9aa5459d1c8e6485f50ccfbbe672 Mon Sep 17 00:00:00 2001 From: Seth Falco Date: Fri, 17 May 2024 12:07:13 +0100 Subject: [PATCH] chore: implement website redesign --- docusaurus.config.js | 2 +- src/components/DefaulBadge/index.module.css | 4 +- src/components/HomepageFeatures/index.jsx | 64 ++-- .../HomepageFeatures/index.module.css | 81 ++++- src/components/PluginParams/index.module.css | 2 +- src/css/custom.css | 58 +-- src/pages/index.js | 56 +-- src/pages/index.module.css | 84 ++++- src/theme/DocItem/Content/index.js | 2 +- src/theme/DocItem/Content/index.module.css | 10 +- src/theme/DocItem/Layout/styles.module.css | 2 +- src/theme/Footer/Layout/index.js | 32 +- src/theme/Footer/Layout/index.module.css | 12 +- src/theme/Navbar/Logo/index.module.css | 6 +- src/theme/TOCItems/index.module.css | 6 +- src/vectors/logo.svg | 14 +- src/vectors/svgo_hackerman.svg | 182 ++++++++++ src/vectors/svgo_integrations.svg | 333 ++++++++++++++++++ src/vectors/svgo_oss.svg | 237 +++++++++++++ src/vectors/svgo_trixie.svg | 239 +++++++++++++ src/vectors/undraw_mountain.svg | 1 - src/vectors/undraw_react.svg | 1 - src/vectors/undraw_tree.svg | 1 - 23 files changed, 1303 insertions(+), 126 deletions(-) create mode 100644 src/vectors/svgo_hackerman.svg create mode 100644 src/vectors/svgo_integrations.svg create mode 100644 src/vectors/svgo_oss.svg create mode 100644 src/vectors/svgo_trixie.svg delete mode 100644 src/vectors/undraw_mountain.svg delete mode 100644 src/vectors/undraw_react.svg delete mode 100644 src/vectors/undraw_tree.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index 0db031d..5a7f858 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -32,7 +32,7 @@ const config = { i18n: { defaultLocale: "en", locales: [ - "en" + "en" ], }, markdown: { diff --git a/src/components/DefaulBadge/index.module.css b/src/components/DefaulBadge/index.module.css index d51ea57..5b8ec5f 100644 --- a/src/components/DefaulBadge/index.module.css +++ b/src/components/DefaulBadge/index.module.css @@ -1,6 +1,6 @@ .badge { - padding: .3em .6em; - border-radius: 1em; + padding: .3rem .6rem; + border-radius: 1rem; color: var(--svgo-pill-fg-color); background-color: var(--svgo-pill-bg-color); } diff --git a/src/components/HomepageFeatures/index.jsx b/src/components/HomepageFeatures/index.jsx index f2d4cb6..21917bb 100644 --- a/src/components/HomepageFeatures/index.jsx +++ b/src/components/HomepageFeatures/index.jsx @@ -1,51 +1,55 @@ import React from 'react'; import clsx from 'clsx'; import styles from './index.module.css'; -import UndrawMountain from '../../vectors/undraw_mountain.svg'; -import UndrawReact from '../../vectors/undraw_react.svg'; -import UndrawTree from '../../vectors/undraw_tree.svg'; +import SvgoHackerman from '../../vectors/svgo_hackerman.svg'; +import SvgoIntegrations from '../../vectors/svgo_integrations.svg'; +import SvgoOss from '../../vectors/svgo_oss.svg'; const FeatureList = [ { title: 'Easy to Use', - Svg: UndrawMountain, + Svg: SvgoHackerman, description: ( <> - Easy to use through both the command-line interface and JavaScript - API. + SVGO can be used through both the command-line interface and JavaScript + API, with help pages and documentation available for both. ), }, { title: 'Integrations', - Svg: UndrawTree, + Svg: SvgoIntegrations, description: ( <> - Many applications and frameworks depend on or have supported integrations - for SVGO already, like Docusaurus and Webpack. + Many libraries, frameworks, or tools bundle or have integrations available + for SVGO already, like Docusaurus, PostCSS, and webpack. ), }, { title: 'Open-Source', - Svg: UndrawReact, + Svg: SvgoOss, description: ( <> - We welcome contributions, so feel free to join us on GitHub! + We welcome contributions! Feel free to to file a bug report, feature + request, or open pull requests on GitHub. - ), + ) }, ]; -function Feature({Svg, title, description}) { +function Feature({ Svg, title, description }) { return ( -
-
- -
-
-

{title}

-

{description}

+
+
+
+
+ +
+
+

{title}

+

{description}

+
); @@ -53,10 +57,20 @@ function Feature({Svg, title, description}) { export default function HomepageFeatures() { return ( -
- {FeatureList.map((props, idx) => ( - - ))} -
+ <> + + + + + + + + +
+ {FeatureList.map((props, idx) => ( + + ))} +
+ ); } diff --git a/src/components/HomepageFeatures/index.module.css b/src/components/HomepageFeatures/index.module.css index 2dc083a..97eb3ef 100644 --- a/src/components/HomepageFeatures/index.module.css +++ b/src/components/HomepageFeatures/index.module.css @@ -1,19 +1,82 @@ .features { display: flex; - flex-wrap: wrap; + flex-direction: column; + align-items: center; +} + +.featureWrapper { + margin-top: -4rem; + padding: 4rem 1rem 4rem 1rem; + position: relative; + width: 100%; + display: flex; justify-content: center; - align-items: stretch; - padding: 2rem 0; - margin: -1em .5em; +} + +.featureWrapper:nth-child(2) .feature { + flex-direction: row-reverse; } .feature { - width: 360px; - max-width: 360px; - margin: 1em; + max-width: var(--svgo-global-width); + width: 100%; + justify-content: space-around; +} + +.featureBackground::after { + content: ""; + top: 0; + left: 0; + z-index: -1; + height: 100%; + width: calc(100vw - (100vw - 100%)); + position: absolute; + background: linear-gradient(to bottom, #367fc126, #39aee400); + clip-path: url(#featureMobilePath); +} + +@media (prefers-color-scheme: dark) { + .featureBackground::after { + background: linear-gradient(to bottom, #39aee440, #39aee400); + } +} + +.featureWrapper:nth-child(2) .featureBackground::after { + transform: scaleX(-1); +} + +.featureText { + display: flex; + flex-direction: column; + justify-content: center; +} + +.featureTitle { + font-size: 2rem; + font-weight: 700; +} + +.featureDescription { + font-size: 1.4rem; } .featureSvg { - height: 200px; - width: 200px; + max-height: 250px; + margin-bottom: 2rem; +} + +@media (min-width: 997px) { + .featureBackground::after { + clip-path: url(#featureDesktopPath); + } + + .feature { + display: flex; + flex-direction: row; + } + + .featureSvg { + height: 350px; + max-height: 350px; + } } diff --git a/src/components/PluginParams/index.module.css b/src/components/PluginParams/index.module.css index 44ca193..2b616f1 100644 --- a/src/components/PluginParams/index.module.css +++ b/src/components/PluginParams/index.module.css @@ -1,3 +1,3 @@ .leftMargin { - margin-left: 1em; + margin-left: 1rem; } diff --git a/src/css/custom.css b/src/css/custom.css index 72f1828..2222f78 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,23 +1,26 @@ :root { --svgo-font-mono: 'Liberation Mono', Monaco, Cousine, Consolas, monospace; --svgo-font-sans: 'Nimbus Sans', Helvetica, Arial, Roboto, 'Liberation Sans', 'DejaVu Sans', Arimo, sans-serif; - --svgo-global-width: 1400px; - --svgo-pri-fg-color: #1d1d1b; - --svgo-pri-bg-color: #f9f9fa; - --svgo-sec-bg-color: #f6f5f4; - --svgo-tir-bg-color: #e8e8e8; - --svgo-pill-fg-color: #0b5cad; + --svgo-global-width: 1200px; --svgo-pill-bg-color: #cbe2f9; + --svgo-pill-fg-color: #0b5cad; + --svgo-pri-bg-color: #fff; + --svgo-pri-fg-color: #153243; --svgo-search-bg-color: var(--svgo-tir-bg-color); --svgo-search-bg-hover: #dbdbdb; - --ifm-navbar-background-color: var(--svgo-sec-bg-color); + --svgo-sec-bg-color: #f6f5f4; + --svgo-tir-bg-color: #e8e8e8; + --svgo-logo-fg-color: #1d1d1b; + --svgo-button-hover-background-color: #1b4055; --ifm-background-color: var(--svgo-pri-bg-color) !important; - --ifm-footer-link-hover-color: #3578e5; - --ifm-color-primary: #216be2; --ifm-card-background-color: var(--svgo-sec-bg-color); --ifm-code-font-size: 95%; - --ifm-footer-padding-horizontal: 1em; + --ifm-color-primary: #216be2; --ifm-container-width-xl: var(--svgo-global-width); + --ifm-footer-padding-horizontal: 1rem; + --ifm-navbar-background-color: var(--svgo-pri-bg-color); + --ifm-navbar-shadow: 0 1rem 1rem 0 #0a1e291a; + --ifm-spacing-horizontal: 1rem; --search-local-hit-background: var(--svgo-sec-bg-color); font-family: var(--svgo-font-sans); @@ -26,18 +29,31 @@ @media (prefers-color-scheme: dark) { :root { - --svgo-pri-fg-color: #fff; - --svgo-pri-bg-color: #283643; - --svgo-sec-bg-color: #1c262d; - --svgo-tir-bg-color: #5a6a74; - --svgo-pill-fg-color: #cbe2f9; --svgo-pill-bg-color: #0b5cad; + --svgo-pill-fg-color: #cbe2f9; + --svgo-pri-bg-color: #142631; + --svgo-pri-fg-color: #fff; --svgo-search-bg-color: #5a6a74; --svgo-search-bg-hover: #647682; + --svgo-sec-bg-color: #1c262d; + --svgo-tir-bg-color: #5a6a74; + --svgo-logo-fg-color: #fff; + --svgo-button-hover-background-color: #e6e6e6; --ifm-color-primary: #66b5ff; + --ifm-navbar-shadow: 0 1rem 1rem 0 #0a1e29; } } +/* Button overrides */ +.button { + --ifm-button-color: var(--svgo-pri-bg-color); + --ifm-button-background-color: var(--svgo-pri-fg-color); + --ifm-button-border-color: var(--svgo-pri-fg-color); +} +.button:hover { + --ifm-button-background-color: var(--svgo-button-hover-background-color); +} + /* Navbar overrides */ .navbar__inner { max-width: var(--svgo-global-width); @@ -73,9 +89,11 @@ nav div kbd { /* Footer overrides */ footer { - --ifm-footer-color: var(--svgo-pri-fg-color); - --ifm-footer-title-color: var(--svgo-pri-fg-color); - --ifm-footer-link-color: var(--svgo-pri-fg-color); - --ifm-footer-link-hover-color: var(--ifm-color-primary); - --ifm-footer-background-color: var(--svgo-sec-bg-color); + --ifm-link-color: #fff; + --ifm-link-hover-color: #cac4ce; + --ifm-footer-background-color: none; + --ifm-footer-color: #fff; + --ifm-footer-link-color: #fff; + --ifm-footer-link-hover-color: #cac4ce; + --ifm-footer-title-color: #fff; } diff --git a/src/pages/index.js b/src/pages/index.js index 87fe9c0..01f72a6 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,38 +5,48 @@ import Layout from '@theme/Layout'; import CopyIcon from '@theme/Icon/Copy'; import SuccessIcon from '@theme/Icon/Success'; import Head from '@docusaurus/Head'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import HomepageFeatures from '../../src/components/HomepageFeatures'; import styles from './index.module.css'; +import SvgoTrixie from '../vectors/svgo_trixie.svg'; + +const INSTALL_COMMAND = "npm i -g svgo"; const onClick = async () => { - navigator.clipboard.writeText("npx svgo"); + navigator.clipboard.writeText(INSTALL_COMMAND); } function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Get Started - +
+
+
+

+ SVG Optimizer for Node.js and CLI +

+

+ SVGO and its various integrations will enable you to optimize + SVGs and serve your web applications faster. +

+
+ + Get Started + +
+
+ $ {INSTALL_COMMAND} + █ + + + + + + +
-
- $ npx svgo - █ - - - - - - +
+
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 1077588..6d47a96 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,29 +1,81 @@ -.heroBanner { - padding: 2rem; - text-align: center; - position: relative; - overflow: hidden; +.hero { + margin: 1rem; } @media (min-width: 997px) { - .heroBanner { + .hero { padding: 4rem 0; } } -.heroTitle { - font-size: 5em; - font-weight: 800; +.heroSplit { + display: flex; } -.buttons { - display: flex; - align-items: center; - justify-content: center; +.infoSection { + margin: auto 0; +} + +.mascotSection { + display: none; + position: relative; +} +.mascotSection::after { + content: ""; + top: 15%; + right: 0; + position: absolute; + aspect-ratio: 1; + width: 80%; + border-radius: 100%; + z-index: -1; + background: linear-gradient(to bottom, #e0ebf6, #39aee410); +} +@media (prefers-color-scheme: dark) { + .mascotSection::after { + background: linear-gradient(to bottom, #39aee440, #39aee410); + } +} + +.mascot { + width: 100%; + margin: 0 2rem 2rem 0; +} +@media (min-width: 577px) { + .infoSection { + width: 60%; + } + + .mascotSection { + width: 40%; + padding-left: 1rem; + display: flex; + } +} +@media (min-width: 997px) { + .mascotSection { + padding-left: 4rem; + } + + .mascot { + margin-bottom: 0; + } +} + +.tagline { + line-height: 2.4rem; + font-size: 2rem; + font-weight: 700; +} + +.subtitle { + font-size: 1.4rem; + line-height: 2rem; } .installInstructions { - padding: 1em 2em; - margin-top: .5em; + font-size: 1.2rem; + padding: 1rem 0; + margin-top: .5rem; position: relative; display: inline-flex; align-items: center; @@ -51,7 +103,7 @@ /* Copy icon */ .icon { position: absolute; - right: .5em; + right: -1.5em; opacity: 0; display: flex; transition: opacity .1s; diff --git a/src/theme/DocItem/Content/index.js b/src/theme/DocItem/Content/index.js index 06a10dc..13d329f 100644 --- a/src/theme/DocItem/Content/index.js +++ b/src/theme/DocItem/Content/index.js @@ -29,7 +29,7 @@ export default function DocItemContent({ children }) {
{syntheticTitle && (
- {syntheticTitle} + {syntheticTitle} {frontMatter.svgo?.defaultPlugin && (
diff --git a/src/theme/DocItem/Content/index.module.css b/src/theme/DocItem/Content/index.module.css index 47e3ad1..97dcd3e 100644 --- a/src/theme/DocItem/Content/index.module.css +++ b/src/theme/DocItem/Content/index.module.css @@ -3,8 +3,14 @@ align-items: center; } +.pageTitle { + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + .badge { - margin-left: 1em; - margin-bottom: 1em; + margin-left: 1rem; + margin-bottom: 1rem; justify-self: end; } diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css index 04ddd4b..6bbc300 100644 --- a/src/theme/DocItem/Layout/styles.module.css +++ b/src/theme/DocItem/Layout/styles.module.css @@ -20,7 +20,7 @@ @media (min-width: 1024px) { .toc { - margin-right: 1em; + margin-right: 1rem; display: block; flex-shrink: 0; } diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js index 26edb04..0703312 100644 --- a/src/theme/Footer/Layout/index.js +++ b/src/theme/Footer/Layout/index.js @@ -2,17 +2,27 @@ import React from 'react'; import clsx from 'clsx'; import styles from './index.module.css'; -export default function FooterLayout({links, copyright}) { +export default function FooterLayout({ links, copyright }) { return ( -
-
- {links} - {copyright && ( -
- {copyright} -
- )} -
-
+ <> + + + + + + + + +
+
+ {links} + {copyright && ( +
+ {copyright} +
+ )} +
+
+ ); } diff --git a/src/theme/Footer/Layout/index.module.css b/src/theme/Footer/Layout/index.module.css index 42bcbc9..4c5c992 100644 --- a/src/theme/Footer/Layout/index.module.css +++ b/src/theme/Footer/Layout/index.module.css @@ -1,7 +1,11 @@ .wrapper { - padding: 2em 1em; + padding: 6rem 1rem 2rem 1rem; + background: linear-gradient(to right, #0771d5, #27489f); + clip-path: url(#footerMobilePath); } - -.footer { - max-width: var(--svgo-global-width); +@media (min-width: 997px) { + .wrapper { + background: linear-gradient(to right, #0771d5, #27489f); + clip-path: url(#footerDesktopPath); + } } diff --git a/src/theme/Navbar/Logo/index.module.css b/src/theme/Navbar/Logo/index.module.css index c812bba..deac671 100644 --- a/src/theme/Navbar/Logo/index.module.css +++ b/src/theme/Navbar/Logo/index.module.css @@ -1,9 +1,9 @@ .logoWrapper { display: flex; - margin-right: 1.5em; + margin-right: 1.5rem; } .logo { - height: 2em; - color: var(--svgo-pri-fg-color); + height: 2rem; + color: var(--svgo-logo-fg-color); } diff --git a/src/theme/TOCItems/index.module.css b/src/theme/TOCItems/index.module.css index fad7e18..c354dd0 100644 --- a/src/theme/TOCItems/index.module.css +++ b/src/theme/TOCItems/index.module.css @@ -8,7 +8,7 @@ .noSeperator { border: none; - margin-left: -.6em; + margin-left: -.5rem; } .topBorder { @@ -16,6 +16,6 @@ } .extraTocEntries { - font-size: .8em; - padding-top: 1em; + font-size: .8rem; + padding-top: 1rem; } diff --git a/src/vectors/logo.svg b/src/vectors/logo.svg index 5f362a8..a33d7e8 100644 --- a/src/vectors/logo.svg +++ b/src/vectors/logo.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + + + + + + diff --git a/src/vectors/svgo_hackerman.svg b/src/vectors/svgo_hackerman.svg new file mode 100644 index 0000000..b5e13dc --- /dev/null +++ b/src/vectors/svgo_hackerman.svg @@ -0,0 +1,182 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vectors/svgo_integrations.svg b/src/vectors/svgo_integrations.svg new file mode 100644 index 0000000..f115160 --- /dev/null +++ b/src/vectors/svgo_integrations.svg @@ -0,0 +1,333 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vectors/svgo_oss.svg b/src/vectors/svgo_oss.svg new file mode 100644 index 0000000..4b074c5 --- /dev/null +++ b/src/vectors/svgo_oss.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vectors/svgo_trixie.svg b/src/vectors/svgo_trixie.svg new file mode 100644 index 0000000..913c1fb --- /dev/null +++ b/src/vectors/svgo_trixie.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vectors/undraw_mountain.svg b/src/vectors/undraw_mountain.svg deleted file mode 100644 index 54beb3b..0000000 --- a/src/vectors/undraw_mountain.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vectors/undraw_react.svg b/src/vectors/undraw_react.svg deleted file mode 100644 index c02301c..0000000 --- a/src/vectors/undraw_react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vectors/undraw_tree.svg b/src/vectors/undraw_tree.svg deleted file mode 100644 index 771f6d2..0000000 --- a/src/vectors/undraw_tree.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file