From efca412ed2e40dfb5dff2e1fb97b3ed16f543d55 Mon Sep 17 00:00:00 2001 From: Niels Bantilan Date: Thu, 3 Oct 2024 16:39:08 -0400 Subject: [PATCH] add css styling (#5803) * add css styling Signed-off-by: Niels Bantilan * update logo height Signed-off-by: Niels Bantilan --------- Signed-off-by: Niels Bantilan --- docs/_static/custom.css | 113 ++++++++++++++++++++++++++++++++++++ docs/_static/custom.js | 10 ++++ docs/_templates/layout.html | 6 +- docs/api/index.md | 1 + docs/conf.py | 27 +++++++-- docs/index.md | 77 ++++++++++++------------ docs/user_guide/index.md | 1 - 7 files changed, 189 insertions(+), 46 deletions(-) create mode 100644 docs/_static/custom.css create mode 100644 docs/_static/custom.js diff --git a/docs/_static/custom.css b/docs/_static/custom.css new file mode 100644 index 0000000000..faa3b25f33 --- /dev/null +++ b/docs/_static/custom.css @@ -0,0 +1,113 @@ +html[data-theme=light], html[data-theme=dark] { + --pst-color-primary: #7652A2; + --pst-color-link: #7652A2; + --pst-color-link-hover: #7652A2; +} + + +/* Styling for page layout */ +.bd-page-width { + max-width: 100%; +} + +/* style the main title logo */ +.navbar-brand:hover, .navbar-brand:visited:hover { + text-decoration: none; +} + +.navbar-brand img { + height: 70%; +} + +/* +Center the main page content only when the sidebar has the .hide-on-wide +class, which is only on the root page +*/ +.bd-sidebar.hide-on-wide + main.bd-main .bd-content { + justify-content: center; +} + +/* left sidebar nav width */ +.bd-sidebar-primary { + width: 15%; + min-width: 250px; + padding: 1rem; +} + +/* make the scroll bar sleeker */ +.bd-sidebar::-webkit-scrollbar { + width: 3px; + height: 3px; + background: transparent; +} + +.bd-sidebar::-webkit-scrollbar-thumb { + background: var(--pst-color-border); +} + +/* make sure page content fills up the page */ +.bd-main .bd-content { + justify-content: left; +} + +.bd-main .bd-content .bd-article-container { + padding: 2.5rem; + max-width: 75em; +} + +/* aligh navbar items with the sidebar */ +.bd-header .navbar-header-items__start { + width: 15%; + min-width: 250px; +} + +/* styles for the main page subtitle and badges */ +div.sd-card.sd-shadow-sm.subtitle-and-badges { + border: none; + box-shadow: none !important; +} + +div.subtitle-and-badges .sd-card-body { + padding: 0; +} + +div.subtitle-and-badges .sd-card-title { + color: #808080; + font-weight: 350 !important; + font-size: 25px; + padding-top: 10px; + padding-bottom: 10px; +} + +div.subtitle-and-badges a { + text-decoration: none; +} + +div.subtitle-and-badges a img { + margin: 2px 0; +} + +/* update table hover color to neutral color */ +.table tbody tr:hover { + background-color: var(--pst-color-table-inner-border); +} + +/* custom footer style */ +div.custom-footer { + text-align: center; + background-color: var(--pst-color-surface); + padding: 15px 0; + color: var(--pst-color-text-muted); +} + +/* anchor link hover style */ +a:hover, +nav.bd-links li>a:active, +nav.bd-links li>a:hover, +.bd-header ul.navbar-nav>li.nav-item>.nav-link:hover { + color: var(--pst-color-primary); +} + +.bd-header ul.navbar-nav>li.nav-item>.nav-link:hover:before { + border-bottom: max(3px, .1875rem, .12em) solid var(--pst-color-primary); +} diff --git a/docs/_static/custom.js b/docs/_static/custom.js new file mode 100644 index 0000000000..573b21e6fd --- /dev/null +++ b/docs/_static/custom.js @@ -0,0 +1,10 @@ +window.addEventListener("DOMContentLoaded", function() { + // Select all elements with class "external" + var externalLinks = document.querySelectorAll("a.external"); + + // Loop through each element with class "external" + externalLinks.forEach(function(link) { + // Set the target attribute to "_blank" + link.setAttribute("target", "_blank"); + }); +}); diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html index a53f62a53f..fa6329208f 100644 --- a/docs/_templates/layout.html +++ b/docs/_templates/layout.html @@ -42,9 +42,11 @@ runllm-keyboard-shortcut="Mod+j" runllm-slack-community-url="https://flyte-org.slack.com/join/shared_invite/zt-2eq2fgs5f-UGUWnMYVB9agervilmlyaw#/shared-invite/email" runllm-name="RunLLM"> - + +
{% trans copyright=copyright|e -%} Copyright © {{ copyright }} - {%- endtrans %} + {%- endtrans %} +
{% endblock %} diff --git a/docs/api/index.md b/docs/api/index.md index 0b24d8f157..cde46b40a7 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -2,6 +2,7 @@ ::::{grid} 2 +:gutter: 2 :::{grid-item-card} {octicon}`rocket` Flytekit SDK :link: flytekit/docs_index diff --git a/docs/conf.py b/docs/conf.py index 5581a70265..6b0191c890 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -385,14 +385,31 @@ html_theme_options = { # custom flyteorg pydata theme options - "github_url": "https://github.com/flyteorg/flyte", + # "github_url": "https://github.com/flyteorg/flyte", "logo": { - "text": "Flyte Docs", + "text": "Flyte", }, + "external_links": [ + {"name": "Flyte", "url": "https://flyte.org"}, + ], "icon_links": [ { "name": "GitHub", + "icon": "fa-brands fa-github", + "type": "fontawesome", "url": "https://github.com/flyteorg/flyte", + }, + { + "name": "Slack", + "url": "https://slack.flyte.org", + "icon": "fa-brands fa-slack", + "type": "fontawesome", + }, + { + "name": "Flyte", + "url": "https://flyte.org", + "icon": "fa-solid fa-dragon", + "type": "fontawesome", } ], "use_edit_page_button": True, @@ -403,9 +420,9 @@ # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". -# html_static_path = [] -# html_css_files = [] -# html_js_files = [] +html_static_path = ["_static"] +html_css_files = ["custom.css"] +html_js_files = ["custom.js"] # Custom sidebar templates, must be a dictionary that maps document names # to template names. diff --git a/docs/index.md b/docs/index.md index 61bb687131..d5fcfbbb8b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,54 +1,55 @@ # Welcome to Flyte! -```{eval-rst} -.. raw:: html +````{card} The highly scalable and flexible workflow orchestrator that unifies data, ML and analytics. +:class-card: subtitle-and-badges -

- The highly scalable and flexible workflow orchestrator that unifies data, ML and analytics. -

- -.. image:: https://img.shields.io/badge/Graduate%20Project-Linux%20Foundation-purple?style=for-the-badge - :target: https://lfaidata.foundation/projects/flyte/ - :alt: Linux Foundation - -.. image:: https://img.shields.io/github/stars/flyteorg/flyte?label=github&logo=github&style=for-the-badge - :target: https://github.com/flyteorg/flyte - :alt: GitHub Repo stars +```{image} https://img.shields.io/badge/Graduate%20Project-Linux%20Foundation-purple?style=for-the-badge +:target: https://lfaidata.foundation/projects/flyte/ +:alt: Linux Foundation +``` -.. image:: https://img.shields.io/github/release/flyteorg/flyte.svg?style=for-the-badge&color=blue - :target: https://github.com/flyteorg/flyte/releases/latest - :alt: Flyte Release +```{image} https://img.shields.io/github/stars/flyteorg/flyte?label=github&logo=github&style=for-the-badge +:target: https://github.com/flyteorg/flyte +:alt: GitHub Repo stars +``` -.. image:: https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/tests.yml?label=tests&style=for-the-badge - :target: https://github.com/flyteorg/flyte/actions/workflows/tests.yml - :alt: GitHub Test Status +```{image} https://img.shields.io/github/release/flyteorg/flyte.svg?style=for-the-badge&color=blue +:target: https://github.com/flyteorg/flyte/releases/latest +:alt: Flyte Release +``` -.. image:: https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/sandbox.yml?label=Sandbox%20docker%20image&style=for-the-badge - :target: https://github.com/flyteorg/flyte/actions/workflows/sandbox.yml - :alt: GitHub Sandbox Status +```{image} https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/tests.yml?label=tests&style=for-the-badge +:target: https://github.com/flyteorg/flyte/actions/workflows/tests.yml +:alt: GitHub Test Status +``` -.. image:: https://img.shields.io/github/milestones/closed/flyteorg/flyte?style=for-the-badge - :target: https://github.com/flyteorg/flyte/milestones?state=closed - :alt: Completed Milestones +```{image} https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/sandbox.yml?label=Sandbox%20docker%20image&style=for-the-badge +:target: https://github.com/flyteorg/flyte/actions/workflows/sandbox.yml +:alt: GitHub Sandbox Status +``` -.. image:: https://img.shields.io/pypi/dm/flytekit?color=blue&label=flytekit%20downloads&style=for-the-badge&logo=pypi&logoColor=white - :target: https://github.com/flyteorg/flytekit - :alt: Flytekit Downloads +```{image} https://img.shields.io/github/milestones/closed/flyteorg/flyte?style=for-the-badge +:target: https://github.com/flyteorg/flyte/milestones?state=closed +:alt: Completed Milestones +``` -.. image:: https://img.shields.io/badge/Slack-Chat-pink?style=for-the-badge&logo=slack - :target: https://slack.flyte.org - :alt: Flyte Slack +```{image} https://img.shields.io/pypi/dm/flytekit?color=blue&label=flytekit%20downloads&style=for-the-badge&logo=pypi&logoColor=white +:target: https://github.com/flyteorg/flytekit +:alt: Flytekit Downloads +``` -.. image:: https://img.shields.io/badge/LICENSE-Apache2.0-ff69b4.svg?style=for-the-badge - :target: http://www.apache.org/licenses/LICENSE-2.0.html - :alt: License +```{image} https://img.shields.io/badge/Slack-Chat-pink?style=for-the-badge&logo=slack +:target: https://slack.flyte.org +:alt: Flyte Slack +``` -.. |br| raw:: html +```{image} https://img.shields.io/badge/LICENSE-Apache2.0-ff69b4.svg?style=for-the-badge +:target: http://www.apache.org/licenses/LICENSE-2.0.html +:alt: License +``` -
-
+```` -``` [Flyte](https://github.com/flyteorg/flyte) is an open-source, Kubernetes-native workflow orchestrator implemented in [Go](https://go.dev/). It enables highly diff --git a/docs/user_guide/index.md b/docs/user_guide/index.md index 44c975f6ae..ae439c8760 100644 --- a/docs/user_guide/index.md +++ b/docs/user_guide/index.md @@ -94,7 +94,6 @@ concepts/component_architecture/index :hidden: flytekit-java -unionml pterodactyl latch sdk ```