From 86d91def955823c42a596e6efa1c997308c230fe Mon Sep 17 00:00:00 2001 From: Bruno Camarneiro Date: Sun, 13 Oct 2024 18:51:10 +0200 Subject: [PATCH] feat(new-styling): :lipstick: update footer and tags styling --- docs/Open-source/code-of-conduct.md | 1 - docs/Open-source/contributing.md | 1 - docs/Open-source/repositories.md | 1 - docs/index.md | 1 - docs/learn/delivery-acknowledgements.md | 1 - docs/learn/developers.md | 1 - docs/learn/index.md | 1 - docs/learn/services.md | 1 - docs/learn/the-network.md | 1 - docs/learn/token-and-economics.md | 1 - docs/node/analyzing-logs.md | 1 - docs/node/configuration.md | 1 - docs/node/diagnostics.md | 1 - docs/node/health-check.md | 1 - docs/node/index.md | 1 - docs/node/install.md | 1 - docs/node/lightning-cli.md | 1 - docs/node/requirements.md | 1 - docs/node/systemd-service.md | 1 - docs/node/testnet-onboarding.md | 1 - docs/roadmap.md | 1 - docs/whitepaper.md | 1 - docusaurus.config.js | 32 +++++---- src/components/Author/styles.css | 5 +- src/css/breadcrumbs.css | 20 ++++++ src/css/custom.css | 76 +++++++++++++++++----- src/css/pagination-nav.css | 14 ++++ src/css/sidebar.css | 21 +++--- src/css/tags.css | 12 ++++ src/css/typography.css | 12 ++++ src/theme/Footer/Layout/index.js | 7 +- src/theme/Footer/Layout/styles.module.css | 18 +++++ src/theme/Navbar/Content/index.js | 3 +- src/theme/Navbar/Content/styles.module.css | 14 ++++ src/theme/Navbar/styles.css | 1 - static/img/logo+named.svg | 15 ----- 36 files changed, 190 insertions(+), 82 deletions(-) create mode 100644 src/css/breadcrumbs.css create mode 100644 src/css/pagination-nav.css create mode 100644 src/css/tags.css create mode 100644 src/css/typography.css create mode 100644 src/theme/Footer/Layout/styles.module.css delete mode 100644 static/img/logo+named.svg diff --git a/docs/Open-source/code-of-conduct.md b/docs/Open-source/code-of-conduct.md index 262993fd2..1497feeff 100644 --- a/docs/Open-source/code-of-conduct.md +++ b/docs/Open-source/code-of-conduct.md @@ -10,7 +10,6 @@ tags: - pledge - contribute - code of conduct -hide_table_of_contents: true --- diff --git a/docs/Open-source/contributing.md b/docs/Open-source/contributing.md index ad68e18f7..e41d3f11b 100644 --- a/docs/Open-source/contributing.md +++ b/docs/Open-source/contributing.md @@ -10,7 +10,6 @@ tags: - repository - contribute - open source -hide_table_of_contents: true --- # Contributing to Lightning diff --git a/docs/Open-source/repositories.md b/docs/Open-source/repositories.md index 6a2c9e3ec..7ff510534 100644 --- a/docs/Open-source/repositories.md +++ b/docs/Open-source/repositories.md @@ -8,7 +8,6 @@ category: Documentation keywords: [repositories] tags: - repository -hide_table_of_contents: true --- The Fleek Network's repositories contain a collection of source code, libraries, and other software artifacts that are used to build and maintain our products collaboratively. diff --git a/docs/index.md b/docs/index.md index dd092fc14..f22865af4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -8,7 +8,6 @@ date: 2023-08-15T09:00:00.000+00:00 description: Welcome to the documentation site for Fleek Network, the decentralized content and application layer built on established decentralized storage protocols combined with high-speed caching and an effective delivery layer. category: Documentation keywords: [introduction, documentation, getting started] -hide_table_of_contents: true tags: - Edge Platform - Guide diff --git a/docs/learn/delivery-acknowledgements.md b/docs/learn/delivery-acknowledgements.md index 975562cd4..e98aa22f3 100644 --- a/docs/learn/delivery-acknowledgements.md +++ b/docs/learn/delivery-acknowledgements.md @@ -6,7 +6,6 @@ description: Dive into Fleek Network's Delivery Acknowledgements, immutable proo tags: - snarks sidebarCollapsible: false -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/learn/developers.md b/docs/learn/developers.md index 95734521e..02b0f8b90 100644 --- a/docs/learn/developers.md +++ b/docs/learn/developers.md @@ -12,7 +12,6 @@ tags: - Guide - Learn - Fleek Network -hide_table_of_contents: true --- :::info diff --git a/docs/learn/index.md b/docs/learn/index.md index 959ac6248..beac14e8a 100644 --- a/docs/learn/index.md +++ b/docs/learn/index.md @@ -8,7 +8,6 @@ tags: - learn - fleek network - whitepaper -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/learn/services.md b/docs/learn/services.md index 6631991a4..dcd981f60 100644 --- a/docs/learn/services.md +++ b/docs/learn/services.md @@ -16,7 +16,6 @@ tags: - develop - sdk - toolkit -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/learn/the-network.md b/docs/learn/the-network.md index 23e0cebf6..83f5c6649 100644 --- a/docs/learn/the-network.md +++ b/docs/learn/the-network.md @@ -15,7 +15,6 @@ tags: - reputation - ports sidebarCollapsible: false -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/learn/token-and-economics.md b/docs/learn/token-and-economics.md index ba7bb77dc..97edcb326 100644 --- a/docs/learn/token-and-economics.md +++ b/docs/learn/token-and-economics.md @@ -12,7 +12,6 @@ tags: - incentives sidebarCollapsible: false sidebar_position: 1 -hide_table_of_contents: true --- ## Overview diff --git a/docs/node/analyzing-logs.md b/docs/node/analyzing-logs.md index 642172eea..fc4ac33c0 100644 --- a/docs/node/analyzing-logs.md +++ b/docs/node/analyzing-logs.md @@ -5,7 +5,6 @@ hide_title: true tags: - logs - diagnostic -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/configuration.md b/docs/node/configuration.md index a403620b1..2368b94a6 100644 --- a/docs/node/configuration.md +++ b/docs/node/configuration.md @@ -3,7 +3,6 @@ title: Configuration tags: - Configuration sidebarCollapsible: false -hide_table_of_contents: true --- TODO: Configuration \ No newline at end of file diff --git a/docs/node/diagnostics.md b/docs/node/diagnostics.md index 5ccad9df8..cedc2a4bf 100644 --- a/docs/node/diagnostics.md +++ b/docs/node/diagnostics.md @@ -3,7 +3,6 @@ title: Diagnostics tags: - Diagnostics sidebarCollapsible: false -hide_table_of_contents: true --- TODO: Diagnostics \ No newline at end of file diff --git a/docs/node/health-check.md b/docs/node/health-check.md index 26f0e6bd5..7bee0ab94 100644 --- a/docs/node/health-check.md +++ b/docs/node/health-check.md @@ -6,7 +6,6 @@ tags: - healthcheck - verification - node status -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/index.md b/docs/node/index.md index e51814db3..3d243af98 100644 --- a/docs/node/index.md +++ b/docs/node/index.md @@ -5,7 +5,6 @@ hide_title: true description: Learn about server requirements, installation, configuration, and more. Become a Node Operator and contribute to the network's growth. tags: - build -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/install.md b/docs/node/install.md index b598a5b40..08cf0f50e 100644 --- a/docs/node/install.md +++ b/docs/node/install.md @@ -16,7 +16,6 @@ tags: - build - wizard - manual -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/lightning-cli.md b/docs/node/lightning-cli.md index f1d28dd67..07d687c7c 100644 --- a/docs/node/lightning-cli.md +++ b/docs/node/lightning-cli.md @@ -7,7 +7,6 @@ tags: - cli - lightning - lgtn -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/requirements.md b/docs/node/requirements.md index d499d73fe..d1a924b5f 100644 --- a/docs/node/requirements.md +++ b/docs/node/requirements.md @@ -6,7 +6,6 @@ tags: - requirements - server sidebarCollapsible: false -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/systemd-service.md b/docs/node/systemd-service.md index e9548e07f..b18c09085 100644 --- a/docs/node/systemd-service.md +++ b/docs/node/systemd-service.md @@ -7,7 +7,6 @@ tags: - systemctl - control - manage -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/node/testnet-onboarding.md b/docs/node/testnet-onboarding.md index f0efdc37a..6785b81e5 100644 --- a/docs/node/testnet-onboarding.md +++ b/docs/node/testnet-onboarding.md @@ -9,7 +9,6 @@ tags: - phases - getting started sidebarCollapsible: false -hide_table_of_contents: true --- import Author from '@site/src/components/Author'; diff --git a/docs/roadmap.md b/docs/roadmap.md index 5f7a4f7a9..4c365ccc2 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -8,7 +8,6 @@ keywords: [roadmap] tags: - Roadmap - Fleek Network -hide_table_of_contents: true --- ## Introduction diff --git a/docs/whitepaper.md b/docs/whitepaper.md index 44ecd717f..2c1e4fef5 100644 --- a/docs/whitepaper.md +++ b/docs/whitepaper.md @@ -11,7 +11,6 @@ tags: - CDN - Fleek Network - Whitepaper -hide_table_of_contents: true --- This section provides in-depth documentation and materials about the Fleek Network technology stack. diff --git a/docusaurus.config.js b/docusaurus.config.js index 28c034ca0..e7f1b8a5f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -17,6 +17,8 @@ const commonDiscord = 'https://discord.gg/fleek'; const commonTwitter = 'https://twitter.com/fleek_net'; const commonHome = 'https://fleek.network'; const commonCompanyUrl = 'https://fleek.network/'; +const fleekXyzUrl = 'https://fleek.xyz/'; +const fleekNetworkGithubUrl = 'https://github.com/fleek-network'; const copyright = `Copyright © ${new Date().getFullYear()} Fleek`; const commonNavbarItems = [{ @@ -126,34 +128,38 @@ const config = { style: 'light', links: [ { - title: 'Resources', items: [ - ...commonNavbarItems, + { + label: 'Discord', + href: commonDiscord, + }, + { + label: 'X', + href: commonTwitter, + }, ], }, { - title: 'Community', items: [ { - label: 'Discord', - href: commonDiscord, + label: 'Whitepaper', + to: '/docs/whitepaper', }, { - label: 'Twitter', - href: commonTwitter, + label: 'Documentation', + href: '/docs', }, ], }, { - title: 'Company', items: [ { - label: 'Home', - href: commonCompanyUrl, + label: 'Github', + href: fleekNetworkGithubUrl, }, { - label: 'Contact us', - href: commonDiscord, + label: 'Fleek Platform', + href: fleekXyzUrl, }, ], }, @@ -161,7 +167,7 @@ const config = { // copyright: `Copyright © ${new Date().getFullYear()} Fleek. All rights reserved.`, logo: { alt: 'Fleek Network', - src: 'img/logo+named.svg?202301101154', + src: 'img/logo.svg?202301101154', href: 'https://fleek.network', width: 160 }, diff --git a/src/components/Author/styles.css b/src/components/Author/styles.css index 75177b97a..7db8c6c14 100644 --- a/src/components/Author/styles.css +++ b/src/components/Author/styles.css @@ -30,8 +30,6 @@ } .author_card>div { - /* display: flex; - gap: 1rem; */ display: grid; grid-template-columns: auto auto; gap: 1rem; @@ -64,6 +62,9 @@ .author_card .name { font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height) var(--ifm-font-family-base); + a { + color: var(--text-color); + } } diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css new file mode 100644 index 000000000..5b2a652cb --- /dev/null +++ b/src/css/breadcrumbs.css @@ -0,0 +1,20 @@ +.breadcrumbs__item--active .breadcrumbs__link { + color: var(--text-color) !important; +} + +.breadcrumbs__item [aria-label="Home page"], .breadcrumbs__item [aria-label="Home page"]:hover { + line-height: 1.6; + svg { + color: var(--text-color) + } +} + +.breadcrumbs__item:not(:last-child)::after { + content: "/" !important; + color: var(--text-color); + filter: none; + background: none; + opacity: 1; + height: 1.5rem; + font-weight: var(--ifm-font-weight-light); +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 26b7d9fb4..21ef01645 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -5,16 +5,14 @@ */ /* You can override the default Infima variables here. */ -@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap'); @font-face { - font-family: 'Atyp'; /* You can name it anything */ - src: url('/fonts/AtypDisplay-Bold.woff2') format('woff2'), - url('/fonts/AtypDisplay-Medium.woff2') format('woff2'), - url('/fonts/AtypDisplay-Regular.woff2') format('woff2'), - url('/fonts/AtypDisplay-Semibold.woff2') format('woff2'); - /* font-weight: normal; - font-style: normal; */ + font-family: 'Atyp'; + src: url('/fonts/AtypDisplay-Regular.woff2') format('woff2') font-weight 400; + src: url('/fonts/AtypDisplay-Medium.woff2') format('woff2') font-weight 500; + src: url('/fonts/AtypDisplay-Semibold.woff2') format('woff2') font-weight 600; + src: url('/fonts/AtypDisplay-Bold.woff2') format('woff2') font-weight 700; } :root { @@ -41,11 +39,14 @@ --sidebar-menu-item_border: #d9d9d9; --ifm-color-primary-darker: var(--link-active); - -} -h1, h2, h3, h4, h5, h6 { - font-family: 'Atyp', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-footer-link-color: var(--text-color); + --ifm-footer-link-hover-color: var(--link-active); + --ifm-footer-padding-vertical: 0; + + --ifm-color-content-secondary: var(--text-color); + --ifm-pagination-nav-color-hover: var(--link-active); + --ifm-font-weight-base: var(--ifm-font-weight-light); } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -63,6 +64,10 @@ h1, h2, h3, h4, h5, h6 { @import url('../theme/Navbar/styles.css'); @import url('../components/Author/styles.css'); @import url('./sidebar.css'); +@import url('./tags.css'); +@import url('./pagination-nav.css'); +@import url('./breadcrumbs.css'); +@import url('./typography.css'); :root { --docsearch-modal-background: #000 !important; @@ -96,9 +101,14 @@ html[data-theme='dark'] { } .alert { - background: #1C1C1C; - border-left: 4px solid #C9FF57; + background: transparent; + border: 1px solid var(--sidebar-menu-item_border); border-radius: 0px; + color: var(--text-color); + + svg { + fill: var(--link-active) !important; + } } .alert a { @@ -130,7 +140,35 @@ div[class*="docItemContainer"] { @media (min-width: 996px) { .footer .container { padding: 0; + + .footer__title { + display: none; + } + + .footer__links { + margin-bottom: 0; + padding: 2rem var(--ifm-footer-padding-horizontal); + } + } +} + +@media (max-width: 996px) { + .footer__col { + margin-bottom: 0; + flex-basis: 0; + } + + .footer__links { + margin-bottom: 0; + padding: 2rem var(--ifm-footer-padding-horizontal); + padding-left: 4rem; + } + + + .footer__title { + display: none; } + } /* Main wrapper */ @@ -141,16 +179,22 @@ div[class*="docItemContainer"] { width: 100%; } +main > .container > .row { + margin: 0; +} .DocSearch-Button-Container svg, .DocSearch-Form .DocSearch-LoadingIndicator svg, .DocSearch-Form .DocSearch-MagnifierLabel svg { width: 14px; height: 14px; + padding-top: 2px; } .DocSearch-Button-Container .DocSearch-Button-Placeholder { - padding: 0 0.5rem; + padding: 2px 0.5rem 0 0.5rem; + font-family: var(--ifm-font-family-base); + font-weight: 300; } .DocSearch-Button svg { @@ -161,7 +205,7 @@ div[class*="docItemContainer"] { .DocSearch-Button:hover svg { opacity: 1; } - +§ .DocSearch-Container > .DocSearch-Modal, .DocSearch-Modal .DocSearch-Form { box-shadow: none; diff --git a/src/css/pagination-nav.css b/src/css/pagination-nav.css new file mode 100644 index 000000000..168f6dca9 --- /dev/null +++ b/src/css/pagination-nav.css @@ -0,0 +1,14 @@ +.pagination-nav__link { + transition: ease-in-out 0.2s border-color; + + .pagination-nav__sublabel, .pagination-nav__label { + color: var(--text-color); + transition: ease-in-out 0.2s color; + } +} + +.pagination-nav__link:hover { + .pagination-nav__sublabel, .pagination-nav__label { + color: var(--link-active); + } +} \ No newline at end of file diff --git a/src/css/sidebar.css b/src/css/sidebar.css index a039ebbb4..85c839b94 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -1,10 +1,3 @@ -@media (min-width: 996px) { - [class^="sidebar_"] .menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module { - padding: 1rem 0; - } -} - - .menu .menu__list { padding-right: 2rem; } @@ -28,7 +21,8 @@ nav>.menu__list { border-radius: 0; } -.menu__link--active, .menu__link--active:hover { +.menu__link--active, +.menu__link--active:hover { color: var(--link-active); border-color: var(--link-active); } @@ -58,4 +52,13 @@ nav>.menu__list { .menu__list-item--collapsed.theme-doc-sidebar-item-category::after { top: 0; transform: rotate(0deg); -} \ No newline at end of file +} + +@media (min-width: 997px) { + aside .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-Sidebar-styles-module { + top: 36px; + position: sticky; + height: inherit; + max-height: inherit; + } +} \ No newline at end of file diff --git a/src/css/tags.css b/src/css/tags.css new file mode 100644 index 000000000..3d2c9cde4 --- /dev/null +++ b/src/css/tags.css @@ -0,0 +1,12 @@ +.theme-doc-footer-tags-row { + a { + color: var(--text-color); + border-color: var(--text-color); + transition: ease-in-out 0.2s color, ease-in-out 0.2s border-color; + } + + a:hover { + color: var(--link-active); + border-color: var(--link-active); + } +} \ No newline at end of file diff --git a/src/css/typography.css b/src/css/typography.css new file mode 100644 index 000000000..a51e3826d --- /dev/null +++ b/src/css/typography.css @@ -0,0 +1,12 @@ + +h1, h2, h3, h4, h5, h6 { + font-family: 'Atyp', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.markdown { + font-weight: var(--ifm-font-weight-light); + + h1, h2, h3, h4, h5, h6 { + font-weight: 400; + } +} \ No newline at end of file diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js index 664bd967d..ec408d585 100644 --- a/src/theme/Footer/Layout/index.js +++ b/src/theme/Footer/Layout/index.js @@ -1,19 +1,22 @@ import React from 'react'; import clsx from 'clsx'; +import styles from './styles.module.css'; export default function FooterLayout({style, links, logo, copyright}) { return ( ); diff --git a/src/theme/Footer/Layout/styles.module.css b/src/theme/Footer/Layout/styles.module.css new file mode 100644 index 000000000..3f5d8695c --- /dev/null +++ b/src/theme/Footer/Layout/styles.module.css @@ -0,0 +1,18 @@ +.container { + display: flex; + flex-direction: row; +} + +.links { + margin: 0 0 0 auto; + max-width: 750px; + flex-grow: 1; + + a { + text-decoration: none; + + svg { + display: none; + } + } +} \ No newline at end of file diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index 4d745ae41..3a7d19cf0 100644 --- a/src/theme/Navbar/Content/index.js +++ b/src/theme/Navbar/Content/index.js @@ -48,13 +48,12 @@ export default function NavbarContent() {
{!mobileSidebar.disabled && } - - {!searchBarItem && ( )} +
Whitepaper diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css index 2fdf008ec..2d4d38feb 100644 --- a/src/theme/Navbar/Content/styles.module.css +++ b/src/theme/Navbar/Content/styles.module.css @@ -27,6 +27,20 @@ Hide color mode toggle in small viewports max-width: 1440px; margin: 0 auto; width: 100%; + + @media (max-width: 996px) { + .whitepaperLink { + display: none; + } + + [class^="navbar__search"] { + display: none; + } + + [class="navbar__logo"] { + margin-left: 1rem; + } + } } .navbar__items { diff --git a/src/theme/Navbar/styles.css b/src/theme/Navbar/styles.css index f6a1de76b..9721a0fa7 100644 --- a/src/theme/Navbar/styles.css +++ b/src/theme/Navbar/styles.css @@ -11,7 +11,6 @@ .DocSearch-Button, .DocSearch-Button:hover { - width: 250px; border-radius: 0px; color: var(--text-color); border: 1px solid var(--text-color); diff --git a/static/img/logo+named.svg b/static/img/logo+named.svg deleted file mode 100644 index cb750b469..000000000 --- a/static/img/logo+named.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - -