From f852b62ea1cf558f6872473458e708393f68e32b Mon Sep 17 00:00:00 2001 From: Giuseppe Ambrosio Date: Tue, 17 Dec 2024 17:39:46 +0100 Subject: [PATCH] feat(mkdocs): restyle like site --- docs/assets/logo.svg | 718 ++++++++++++++++++++++++++++- docs/assets/stylesheets/custom.css | 94 +++- mkdocs.yaml | 20 +- 3 files changed, 783 insertions(+), 49 deletions(-) diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg index bfaf9f6..1bdd861 100644 --- a/docs/assets/logo.svg +++ b/docs/assets/logo.svg @@ -1,60 +1,742 @@ - + - + + + + + + + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/stylesheets/custom.css b/docs/assets/stylesheets/custom.css index 02249d9..a35e2fa 100644 --- a/docs/assets/stylesheets/custom.css +++ b/docs/assets/stylesheets/custom.css @@ -1,22 +1,86 @@ -/* Light mode (default scheme) */ -[data-md-color-scheme="default"] { - --md-primary-fg-color: #63dca7; - --md-primary-bg-color: #000000; - --md-accent-fg-color: #025ee6; - --md-typeset-a-color: #025ee6; -} -[data-md-color-scheme=slate][data-md-color-primary=indigo] { - --md-typeset-a-color: #63dca7; -} /* Dark mode (slate scheme) */ [data-md-color-scheme="slate"] { - --md-primary-fg-color: #025ee6; - --md-primary-bg-color: #000000; + --md-primary-fg-color: #000000; + --md-primary-bg-color: #FFFFFF; --md-accent-fg-color: #63dca7; --md-typeset-a-color: #63dca7; + + /* Background and font colors */ + --md-default-bg-color: #191414; + --md-default-fg-color: #FFFFFF; + + /* App bar color */ + --md-header-bg-color: #000000; + --md-header-fg-color: #FFFFFF; +} + +body, h2 { + font-weight: 400; + /* Regular weight */ +} + +h1, h2, body{ + font-family: 'DM Sans', sans-serif; + font-weight: 500; + /* Medium weight */ +} + +code, +pre { + font-family: 'DM Mono', monospace; + font-weight: 400; + /* Regular weight */ +} + +/* Active tabs and links */ +.md-tabs__item.md-tabs__item--active, +.md-nav__link.md-nav__link--active { + font-weight: bold !important; +} + +.md-nav__link.md-nav__link--active { + color: #FFFFFF; +} + +@keyframes gradient-animation { + 0% { + background-image: linear-gradient(to right, #025EE6, #63DCA7); + /* Blue to teal */ + } + + 50% { + background-image: linear-gradient(to right, #63DCA7, #025EE6); + /* Teal to green */ + } + + 100% { + background-image: linear-gradient(to right, #025EE6, #63DCA7); + /* Back to blue to teal */ + } +} + +/* Hover effects */ +.md-tabs__link:hover, +.md-ellipsis:hover { + animation: gradient-animation 1s normal; + /* 1-second animation normal */ + background-image: linear-gradient(to right, #025EE6, #63DCA7) !important; + /* Gradient effect */ + background-position: top left !important; + background-clip: text !important; + -webkit-background-clip: text !important; + /* Clip the gradient to the text */ + -webkit-text-fill-color: transparent !important; + /* Make the text transparent */ + transition: all .3s linear !important; + /* Smooth transition for the gradient */ } -/* Override the first child of md-header__topic */ -.md-header__topic:first-child { - font-weight: 350; /* Adjust to a normal font weight, 400 or another value */ +/* Fallback for older browsers without gradient support */ +@supports not (-webkit-background-clip: text) { + .md-tabs__link:hover, + .md-ellipsis:hover { + color: #63DCA7 !important; + /* Default accent color */ + } } diff --git a/mkdocs.yaml b/mkdocs.yaml index 7c83908..053ccd8 100644 --- a/mkdocs.yaml +++ b/mkdocs.yaml @@ -6,19 +6,7 @@ edit_uri: edit/main/docs theme: name: material palette: - - scheme: default - media: "(prefers-color-scheme: light)" - toggle: - icon: material/weather-sunny - name: Switch to dark mode - scheme: slate - media: "(prefers-color-scheme: dark)" - toggle: - icon: material/weather-night - name: Switch to light mode - font: - text: Merriweather Sans - code: Red Hat Mono logo: assets/logo.svg favicon: assets/favicon.svg icon: @@ -30,6 +18,7 @@ theme: extra_css: - assets/stylesheets/custom.css + - https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=DM+Mono&display=swap # Load Google Fonts (DM Sans Regular, Medium, and DM Mono) plugins: - search @@ -43,9 +32,9 @@ plugins: nav: - Home: - - Focoos AI: index.md - - Datasets: datasets.md - - Models: models.md + - Focoos AI: index.md + - Datasets: datasets.md + - Models: models.md - Getting Started: - Introduction: getting_started/introduction.md - Installation: getting_started/installation.md @@ -82,7 +71,6 @@ markdown_extensions: class: mermaid format: !!python/name:pymdownx.superfences.fence_code_format - extra: version: provider: mike