diff --git a/docs/_static/jax-hero.svg b/docs/_static/jax-hero.svg new file mode 100644 index 000000000..04626f43e --- /dev/null +++ b/docs/_static/jax-hero.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/_static/style.css b/docs/_static/style.css index 2c1dfcbcb..32033940e 100644 --- a/docs/_static/style.css +++ b/docs/_static/style.css @@ -1,34 +1,279 @@ @import url("theme.css"); +/* Base LP sidebar modifications */ +body:has(.hero) .sidebar-toggle, +body:has(.hero) .bd-sidebar-secondary { + display: none !important; +} + +body:has(.hero) .search-button { + display: flex !important; +} + +body:has(.hero) .primary-toggle { + display: inline-block !important; +} + +body:has(.hero) .prev-next-footer { + display: none; +} + +body:has(.hero) .bd-article-container { + max-width: unset !important; +} + +body:has(.hero) .bd-page-width { + max-width: unset !important; +} + +body:has(.hero) .bd-article { + display: flex; + flex-direction: column; + padding: 0; +} + +body:has(.hero) .bd-container { + flex-direction: column; +} + +@media (min-width: 960px) { + body:has(.hero) .bd-header-article { + justify-content: center; + } + + body:has(.hero) .header-article-items, + body:has(.hero) .bd-article > section { + max-width: 65rem !important; + align-self: center; + width: -moz-available; + width: -webkit-fill-available; + width: fill-available; + } +} + +/* Custom CSS */ + :root { --block-bg-opacity: .5; } +.bd-main .bd-content .bd-article-container .bd-article:has(.hero) { + padding: 0; +} + +.bd-main .bd-content .bd-article-container .bd-article:has(.hero) > section > * { + padding-inline: 2rem !important; +} + +@media (max-width: 768px) { + .bd-main .bd-content .bd-article-container .bd-article:has(.hero) > section > * { + padding-inline: 1rem !important; + } +} + +.bd-main .bd-content .bd-article-container .bd-article:has(.hero) h1 { + display: none; +} + .wy-side-nav-search { background-color: #fff; } +.getting-started, +.user-guides, .installation { - background-color: rgba(78, 150, 253, var(--block-bg-opacity)); + background: #3C4043; + color: white; + height: 170px; + border: none !important; + border-radius: 12px; } -.getting-started { - background-color: rgba(0, 169, 154, var(--block-bg-opacity)); +.getting-started:hover, +.user-guides:hover, +.installation:hover { + background: #AECBFA; + color: #202124; + transform: unset !important; } -.user-guides { - background-color: rgba(171, 0, 182, var(--block-bg-opacity)); +.getting-started .sd-card-body, +.user-guides .sd-card-body, +.installation .sd-card-body { + display: flex; + align-items: center; + justify-content: center; + font: 500 24px 'Roboto'; +} + +.getting-started .sd-card-title, +.user-guides .sd-card-title, +.installation .sd-card-title { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.getting-started svg, +.user-guides svg, +.installation svg { + color: #8AB4F8; +} + +.getting-started:hover svg, +.user-guides:hover svg, +.installation:hover svg { + color: #3C4043; +} + +.bd-main .bd-content .bd-article-container .bd-article:has(.hero) > section > .hero { + padding-inline: 2rem 0 !important; +} + +.hero { + display: grid; + grid: auto-flow / 1fr .6fr; + align-items: center; + background: rgb(32,33,36); + background: linear-gradient(90deg, rgba(32,33,36,1) 0%, rgba(39,45,56,1) 100%); + position: relative; + overflow: hidden; + border-radius: 24px; +} + +.hero > img { + position: absolute; + top: 0; + right: 0; + height: 100%; + background: transparent !important; +} + +.hero-left { + padding-block: 24px; + display: flex; + flex-direction: column; +} + +.hero-left img { + width: 100px; + height: auto; + position: relative; + margin-bottom: 16px; + background: transparent !important; +} + +.hero-left h2 { + font: 500 32px 'Google Sans'; + color: white; + margin-top: 0; +} + +.hero-left p { + font: 400 16px 'Roboto'; + color: white; +} + +@media (max-width: 1295px) { + .hero > img { + right: -75px; + } +} + +@media (max-width: 750px) { + .hero { + grid: auto-flow / 1fr; + } + + .hero-left { + padding-right: 2rem; + } + + .hero > img { + display: none; + } +} + +.product-offerings { + margin-block: 32px !important; +} + +.product-offerings .sd-card-title { + font: 400 24px 'Google Sans'; +} + +.color-cards { + background: #E8EAED; + color: #222832; + padding: 48px 12px 0 12px; + margin-bottom: 0 !important; + border-radius: 24px 24px 0 0; +} + +.color-cards > div { + gap: 24px 0; +} + +.color-cards + p { + background: #E8EAED; + padding: 24px 12px 48px 12px; + font-weight: 600; + color: #222832; + border-radius: 0 0 24px 24px; +} + +.color-cards + p > a { + color: #222832; +} + +.color-cards + p > a:hover, +html[data-theme="dark"] .color-cards + p > a:hover { + color: #e89217; +} + +html[data-theme="dark"] .color-cards, +html[data-theme="dark"] .hero, +html[data-theme="dark"] .color-cards + p, +html[data-theme="dark"] .color-cards + p > a { + background: #202124; + color: white; } .ecosystem-grid { font-size: smaller; } +.ecosystem-grid > div { + gap: 20px; +} + +.ecosystem-grid .sd-col { + border: 1px solid #dadce0; + border-radius: 8px; + width: calc(50% - 10px); + padding: 16px; +} + +.ecosystem-grid .sd-col > p { + display: flex; + flex-direction: column; + gap: 10px; +} + +.ecosystem-grid .sd-col > p > svg { + color: #00897B; +} + .ecosystem-grid ul { list-style-type: none; padding-inline-start: 0.5em; } +.ecosystem-grid a { + text-decoration: none; +} + div.red-background pre { background-color: rgba(244, 204, 204, var(--block-bg-opacity)); } diff --git a/docs/hero.html b/docs/hero.html new file mode 100644 index 000000000..a2ee3b8e2 --- /dev/null +++ b/docs/hero.html @@ -0,0 +1,8 @@ +
+
+ +

High performance array computing

+

JAX is a Python library for accelerator-oriented array computation and program transformation, designed for high-performance numerical computing and large-scale machine learning.

+
+ +
\ No newline at end of file diff --git a/docs/index.rst b/docs/index.rst index 5f3bce5cf..ba8ebcbdd 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -1,10 +1,22 @@ JAX: High performance array computing ===================================== -JAX is a Python library for accelerator-oriented array computation and program transformation, -designed for high-performance numerical computing and large-scale machine learning. +.. raw:: html + + + + +.. raw:: html + :file: hero.html .. grid:: 3 + :class-container: product-offerings :margin: 0 :padding: 0 :gutter: 0 @@ -31,6 +43,7 @@ designed for high-performance numerical computing and large-scale machine learni The same code executes on multiple backends, including CPU, GPU, & TPU .. grid:: 3 + :class-container: color-cards .. grid-item-card:: :material-regular:`laptop_chromebook;2em` Installation :columns: 12 6 6 4 @@ -59,7 +72,7 @@ JAX itself is narrowly-scoped and focuses on efficient array operations & progra transformations. Built around JAX is an evolving ecosystem of machine learning and numerical computing tools; the following is just a small sample of what is out there: -.. grid:: 4 +.. grid:: 2 :class-container: ecosystem-grid .. grid-item:: :material-outlined:`hub;2em` **Neural networks** diff --git a/docs/requirements.txt b/docs/requirements.txt index 41d8aa6d9..bfbb4e271 100644 --- a/docs/requirements.txt +++ b/docs/requirements.txt @@ -1,7 +1,8 @@ absl-py ipython>=8.8.0 # 8.7.0 has ipython3 lexer error +pydata-sphinx-theme==0.14.4 # v0.15 breaks sidebar toggling sphinx>=7.3.2,<8.0 # 7.3.0 breaks sphinx-book-theme; 8.0 breaks myst-nb 1.1 -sphinx-book-theme>=1.0.1 # Older versions fail to pin pydata-sphinx-theme +sphinx-book-theme==1.1.1 # v1.1.2 requires pydata-sphinx-theme v0.15 sphinx-copybutton>=0.5.0 sphinx-remove-toctrees sphinx-design