DOC: update main landing page style

Co-authored-by: Jake VanderPlas <jakevdp@google.com>
This commit is contained in:
barnesjoseph 2024-11-15 13:44:31 -08:00 committed by Jake VanderPlas
parent d8085008b7
commit 81cdc882ae
5 changed files with 394 additions and 9 deletions

118
docs/_static/jax-hero.svg vendored Normal file
View File

@ -0,0 +1,118 @@
<svg width="386" height="272" viewBox="0 0 386 272" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_618_1196)">
<path d="M35 113.579L216.379 29" stroke="url(#paint0_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M58.1655 69.235L248.978 166.459" stroke="url(#paint1_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M139.08 253.294L307.211 338.96" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M72 232L226.836 310.893" stroke="url(#paint2_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M29.894 -8.39824L266.418 112.118" stroke="url(#paint3_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M10.545 -8.39824L141.946 58.5537" stroke="url(#paint4_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M371.357 97.0868L409.611 79.2486" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M304.358 119.834L409.611 70.7544" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M307.231 240.64L383.543 205.055" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M306 293.091L376.964 260" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M352.699 46.7118L409.611 20.174" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M182 -83V210.85" stroke="#12B5CB" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M299.634 128.691V199.745" stroke="#12B5CB" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M379.753 -3V248.185" stroke="#12B5CB" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M342.545 170.014V295.305" stroke="url(#paint5_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M107.248 136.495C109.593 136.495 111.495 134.593 111.495 132.248C111.495 129.902 109.593 128 107.248 128C104.902 128 103 129.902 103 132.248C103 134.593 104.902 136.495 107.248 136.495Z" fill="#78D9EC"/>
<path d="M136.253 256.036C138.599 256.036 140.501 254.134 140.501 251.788C140.501 249.442 138.599 247.541 136.253 247.541C133.908 247.541 132.006 249.442 132.006 251.788C132.006 254.134 133.908 256.036 136.253 256.036Z" fill="#78D9EC"/>
<path d="M59.7533 72.5065C61.2738 72.5065 62.5065 71.2738 62.5065 69.7533C62.5065 68.2327 61.2738 67 59.7533 67C58.2327 67 57 68.2327 57 69.7533C57 71.2738 58.2327 72.5065 59.7533 72.5065Z" fill="#78D9EC"/>
<path d="M265.753 114.507C267.274 114.507 268.507 113.274 268.507 111.753C268.507 110.233 267.274 109 265.753 109C264.233 109 263 110.233 263 111.753C263 113.274 264.233 114.507 265.753 114.507Z" fill="#78D9EC"/>
<path d="M379.753 250.94C381.274 250.94 382.506 249.708 382.506 248.187C382.506 246.666 381.274 245.434 379.753 245.434C378.233 245.434 377 246.666 377 248.187C377 249.708 378.233 250.94 379.753 250.94Z" fill="#78D9EC"/>
<path d="M94.2063 4.65355C96.5521 4.65355 98.4538 2.75188 98.4538 0.406044C98.4538 -1.93979 96.5521 -3.84146 94.2063 -3.84146C91.8605 -3.84146 89.9588 -1.93979 89.9588 0.406044C89.9588 2.75188 91.8605 4.65355 94.2063 4.65355Z" fill="#78D9EC"/>
<path d="M234.832 188.548L174.436 157.774L101.581 191.747V206.673L161.978 237.446L234.832 203.474V188.548Z" fill="black"/>
<path d="M161.978 222.521L234.832 188.548L174.436 157.774L101.581 191.747L161.978 222.521Z" fill="url(#paint6_linear_618_1196)"/>
<path d="M288.251 34.3186L405.519 -20.364L348.042 -42L238.614 9.02734L288.251 34.3186Z" fill="url(#paint7_linear_618_1196)"/>
<path d="M405.518 47.8546V-20.364L288.25 34.3185L288.362 34.3757V102.485L405.518 47.8546Z" fill="url(#paint8_linear_618_1196)"/>
<path d="M238.609 9.02446V77.1355L288.363 102.486V34.3754L238.609 9.02446Z" fill="url(#paint9_linear_618_1196)"/>
<path d="M254.921 138.889V142.202L353.648 192.508L405.518 168.32V68.6644L254.921 138.889Z" fill="black"/>
<path d="M405.518 68.6644L254.921 138.889L353.648 189.195L405.518 165.007V68.6644Z" fill="url(#paint10_linear_618_1196)"/>
<path d="M346.882 216.603L278.482 181.749L208.153 214.544V234.833L276.554 269.686L346.882 236.892V216.603Z" fill="black"/>
<path d="M346.882 216.603L278.482 181.749L208.153 214.544L276.554 249.397L346.882 216.603Z" fill="url(#paint11_linear_618_1196)"/>
<path d="M198.85 77.3811L139 46.8848V174.013L198.852 204.51L198.85 204.508V77.3811Z" fill="url(#paint12_linear_618_1196)"/>
<path d="M198.852 77.3819L198.85 77.3811V204.508L198.852 204.51L232.919 188.624V61.4971L198.852 77.3819Z" fill="url(#paint13_linear_618_1196)"/>
<path d="M232.919 61.4971L173.066 31L139 46.8848L198.852 77.382L232.919 61.4971Z" fill="url(#paint14_linear_618_1196)"/>
<path d="M110.074 133.815L205.481 182.427" stroke="#78D9EC" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M313 246.986L358.004 226" stroke="url(#paint15_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M279.997 49.4654V203.887" stroke="#12B5CB" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M114 210L216.28 262.114" stroke="url(#paint16_linear_618_1196)" stroke-width="0.828297" stroke-miterlimit="10"/>
<path d="M279.997 52.2188C281.518 52.2188 282.751 50.9861 282.751 49.4655C282.751 47.9449 281.518 46.7122 279.997 46.7122C278.477 46.7122 277.244 47.9449 277.244 49.4655C277.244 50.9861 278.477 52.2188 279.997 52.2188Z" fill="#78D9EC"/>
<path d="M279.997 206.64C281.518 206.64 282.751 205.407 282.751 203.886C282.751 202.366 281.518 201.133 279.997 201.133C278.477 201.133 277.244 202.366 277.244 203.886C277.244 205.407 278.477 206.64 279.997 206.64Z" fill="#78D9EC"/>
<path d="M342.545 -10.5152V132.614" stroke="#12B5CB" stroke-width="0.828297" stroke-miterlimit="10"/>
</g>
<defs>
<linearGradient id="paint0_linear_618_1196" x1="125.69" y1="29" x2="125.69" y2="113.579" gradientUnits="userSpaceOnUse">
<stop stop-color="#78D9EC"/>
<stop offset="0.63" stop-color="#202124"/>
</linearGradient>
<linearGradient id="paint1_linear_618_1196" x1="153.572" y1="69.235" x2="153.572" y2="166.459" gradientUnits="userSpaceOnUse">
<stop stop-color="#78D9EC"/>
<stop offset="0.57" stop-color="#202124"/>
</linearGradient>
<linearGradient id="paint2_linear_618_1196" x1="149.418" y1="232" x2="149.418" y2="310.893" gradientUnits="userSpaceOnUse">
<stop offset="0.42" stop-color="#202124"/>
<stop offset="1" stop-color="#78D9EC"/>
</linearGradient>
<linearGradient id="paint3_linear_618_1196" x1="148.156" y1="10" x2="148.156" y2="112.118" gradientUnits="userSpaceOnUse">
<stop stop-color="#202124"/>
<stop offset="1" stop-color="#78D9EC"/>
</linearGradient>
<linearGradient id="paint4_linear_618_1196" x1="76.2455" y1="8.5" x2="76.2455" y2="58.5537" gradientUnits="userSpaceOnUse">
<stop stop-color="#202124"/>
<stop offset="1" stop-color="#78D9EC"/>
</linearGradient>
<linearGradient id="paint5_linear_618_1196" x1="343.045" y1="59.5" x2="343.045" y2="295.305" gradientUnits="userSpaceOnUse">
<stop stop-color="#202124" stop-opacity="0.352941"/>
<stop offset="1" stop-color="#12B5CB"/>
</linearGradient>
<linearGradient id="paint6_linear_618_1196" x1="191.065" y1="118.567" x2="136.696" y2="202.786" gradientUnits="userSpaceOnUse">
<stop stop-color="#50FFEF"/>
<stop offset="1" stop-color="#12655B"/>
</linearGradient>
<linearGradient id="paint7_linear_618_1196" x1="350.641" y1="-50.8035" x2="194.834" y2="68.36" gradientUnits="userSpaceOnUse">
<stop stop-color="#E7366A"/>
<stop offset="1" stop-color="#34CEFE"/>
</linearGradient>
<linearGradient id="paint8_linear_618_1196" x1="453.5" y1="-20" x2="334.769" y2="-32.0106" gradientUnits="userSpaceOnUse">
<stop stop-color="#1E31EE"/>
<stop offset="1" stop-color="#070C4F"/>
</linearGradient>
<linearGradient id="paint9_linear_618_1196" x1="342" y1="-26" x2="274.124" y2="-37.2198" gradientUnits="userSpaceOnUse">
<stop stop-color="#1E31EE"/>
<stop offset="1" stop-color="#070C4F"/>
</linearGradient>
<linearGradient id="paint10_linear_618_1196" x1="379.599" y1="85.7844" x2="285.111" y2="114.119" gradientUnits="userSpaceOnUse">
<stop stop-color="#38FFF8"/>
<stop offset="1" stop-color="#348FFD"/>
</linearGradient>
<linearGradient id="paint11_linear_618_1196" x1="256.329" y1="225.062" x2="300.822" y2="217.014" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE48C4"/>
<stop offset="1" stop-color="#801CA5"/>
</linearGradient>
<linearGradient id="paint12_linear_618_1196" x1="284" y1="162" x2="138.262" y2="156.836" gradientUnits="userSpaceOnUse">
<stop stop-color="#5771B9"/>
<stop offset="0.399077" stop-color="#9B27AF"/>
<stop offset="1" stop-color="#310A49"/>
</linearGradient>
<linearGradient id="paint13_linear_618_1196" x1="235.337" y1="150.08" x2="205.234" y2="149.898" gradientUnits="userSpaceOnUse">
<stop stop-color="#5771B9"/>
<stop offset="1" stop-color="#9B27AF"/>
</linearGradient>
<linearGradient id="paint14_linear_618_1196" x1="185.959" y1="31" x2="185.959" y2="77.382" gradientUnits="userSpaceOnUse">
<stop stop-color="#EA80FC"/>
<stop offset="1" stop-color="#BE4CD2"/>
</linearGradient>
<linearGradient id="paint15_linear_618_1196" x1="335.502" y1="226" x2="335.502" y2="246.986" gradientUnits="userSpaceOnUse">
<stop stop-color="#78D9EC"/>
<stop offset="0.785" stop-color="#202124"/>
</linearGradient>
<linearGradient id="paint16_linear_618_1196" x1="165.14" y1="210" x2="165.14" y2="262.114" gradientUnits="userSpaceOnUse">
<stop stop-color="#202124"/>
<stop offset="1" stop-color="#78D9EC"/>
</linearGradient>
<clipPath id="clip0_618_1196">
<rect width="409.786" height="337.68" fill="white" transform="translate(0 -42)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.3 KiB

255
docs/_static/style.css vendored
View File

@ -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));
}

8
docs/hero.html Normal file
View File

@ -0,0 +1,8 @@
<div class="hero">
<div class="hero-left">
<img src="./_static/jax_logo_250px.png"/>
<h2>High performance array computing</h2>
<p>JAX is a Python library for accelerator-oriented array computation and program transformation, designed for high-performance numerical computing and large-scale machine learning.</p>
</div>
<img src="./_static/jax-hero.svg"/>
</div>

View File

@ -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
<script>
/* Along with some CSS settings in style.css (look for `body:has(.hero)`)
this will ensure that the menu sidebar is hidden on the main page. */
if (window.innerWidth >= 960) {
document.getElementById("__primary").checked = true;
}
</script>
.. 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**

View File

@ -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