💄 Improve layout and styling (#15462)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2026-05-16 20:36:49 -04:00 · 2026-04-30 18:03:33 +02:00
parent a3ceb9ca74
commit b363a1d002
4 changed files with 123 additions and 39 deletions
--- a/README.md
+++ b/README.md
@@ -49,7 +49,7 @@ The key features are:

 <a href="https://fastapicloud.com" target="_blank" title="FastAPI Cloud. By the same team behind FastAPI. You code. We Cloud."><img src="https://fastapi.tiangolo.com/img/sponsors/fastapicloud.png"></a>

-### Gold and Silver Sponsors
+### Gold Sponsors

 <a href="https://blockbee.io?ref=fastapi" target="_blank" title="BlockBee Cryptocurrency Payment Gateway"><img src="https://fastapi.tiangolo.com/img/sponsors/blockbee.png"></a>
 <a href="https://github.com/scalar/scalar/?utm_source=fastapi&utm_medium=website&utm_campaign=main-badge" target="_blank" title="Scalar: Beautiful Open-Source API References from Swagger/OpenAPI files"><img src="https://fastapi.tiangolo.com/img/sponsors/scalar.svg"></a>
@@ -61,6 +61,9 @@ The key features are:
 <a href="https://docs.railway.com/guides/fastapi?utm_medium=integration&utm_source=docs&utm_campaign=fastapi" target="_blank" title="Deploy enterprise applications at startup speed"><img src="https://fastapi.tiangolo.com/img/sponsors/railway.png"></a>
 <a href="https://serpapi.com/?utm_source=fastapi_website" target="_blank" title="SerpApi: Web Search API"><img src="https://fastapi.tiangolo.com/img/sponsors/serpapi.png"></a>
 <a href="https://www.greptile.com/?utm_source=fastapi&utm_medium=sponsorship&utm_campaign=fastapi_sponsor_page" target="_blank" title="Greptile: The AI Code Reviewer"><img src="https://fastapi.tiangolo.com/img/sponsors/greptile.png"></a>
+
+### Silver Sponsors
+
 <a href="https://databento.com/?utm_source=fastapi&utm_medium=sponsor&utm_content=display" target="_blank" title="Pay as you go for market data"><img src="https://fastapi.tiangolo.com/img/sponsors/databento.svg"></a>
 <a href="https://www.svix.com/" target="_blank" title="Svix - Webhooks as a service"><img src="https://fastapi.tiangolo.com/img/sponsors/svix.svg"></a>
 <a href="https://www.stainlessapi.com/?utm_source=fastapi&utm_medium=referral" target="_blank" title="Stainless | Generate best-in-class SDKs"><img src="https://fastapi.tiangolo.com/img/sponsors/stainless.png"></a>
@@ -78,9 +81,6 @@ The key features are:

 <div class="only-github" markdown="1">

-| [<img height="22" src="https://fastapi.tiangolo.com/img/logos/microsoft.svg" alt="Microsoft">](https://github.com/fastapi/fastapi/pull/26 "Microsoft") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/uber.svg" alt="Uber">](https://eng.uber.com/ludwig-v0-2/ "Uber") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/netflix.svg" alt="Netflix">](https://netflixtechblog.com/introducing-dispatch-da4b8a2a8072 "Netflix") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/cisco.svg" alt="Cisco">](https://www.linkedin.com/posts/deonpillsbury_cisco-cx-python-activity-6963242628536487936-trAp/ "Cisco") |
-| :---: | :---: | :---: | :---: |
-
 "_[...] I'm using **FastAPI** a ton these days. [...] I'm actually planning to use it for all of my team's **ML services at Microsoft**. Some of them are getting integrated into the core **Windows** product and some **Office** products._"

 <div style="text-align: right; margin-right: 10%;">Kabir Khan - <strong>Microsoft</strong> <a href="https://github.com/fastapi/fastapi/pull/26"><small>(ref)</small></a></div>
@@ -111,13 +111,13 @@ The key features are:

 [**FastAPI Conf '26**](https://fastapiconf.com) is happening on **October 28, 2026** in **Amsterdam, NL**. All about FastAPI, right from the source. 🎤

-<a href="https://fastapiconf.com"><img src="https://fastapi.tiangolo.com/img/fastapi-conf.jpeg" alt="FastAPI Conf '26 - October 28, 2026 - Amsterdam, NL"></a>
+<a class="fastapi-feature-banner" href="https://fastapiconf.com"><img src="https://fastapi.tiangolo.com/img/fastapi-conf.jpeg" alt="FastAPI Conf '26 - October 28, 2026 - Amsterdam, NL"></a>

 ## FastAPI mini documentary

 There's a [FastAPI mini documentary](https://www.youtube.com/watch?v=mpR8ngthqiE) released at the end of 2025, you can watch it online:

-<a href="https://www.youtube.com/watch?v=mpR8ngthqiE"><img src="https://fastapi.tiangolo.com/img/fastapi-documentary.jpg" alt="FastAPI Mini Documentary"></a>
+<a class="fastapi-feature-banner" href="https://www.youtube.com/watch?v=mpR8ngthqiE"><img src="https://fastapi.tiangolo.com/img/fastapi-documentary.jpg" alt="FastAPI Mini Documentary"></a>

 ## **Typer**, the FastAPI of CLIs

--- a/docs/en/docs/css/custom.css
+++ b/docs/en/docs/css/custom.css
@@ -273,37 +273,51 @@ Inspired by Termynal's CSS tricks with modifications
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--md-default-fg-color--lightest);
 }
 .fastapi-opinions__tab {
+  position: relative;
  appearance: none;
  background: none;
  border: 0;
-  padding: 0.5rem;
+  padding: 0.625rem 0.5rem;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
-  border-radius: 6px;
-  transition: background-color 0.15s;
  color: inherit;
  font: inherit;
  min-height: 40px;
  min-width: 0;
 }
-.fastapi-opinions__tab:hover {
-  background-color: var(--md-default-fg-color--lightest);
+.fastapi-opinions__tab::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  bottom: -1px;
+  height: 2px;
+  background-color: var(--md-primary-fg-color);
+  opacity: 0;
+  transition: left 0.2s ease, right 0.2s ease, opacity 0.2s ease;
+}
+.fastapi-opinions__tab[aria-selected="true"]::after {
+  left: 12%;
+  right: 12%;
+  opacity: 1;
 }
 .fastapi-opinions__tab:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
+  border-radius: 4px;
 }
 .fastapi-opinions__mark {
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 20px;
+  height: 22px;
  max-width: 100%;
  filter: grayscale(1);
  opacity: 0.5;
@@ -320,9 +334,6 @@ Inspired by Termynal's CSS tricks with modifications
  filter: grayscale(0.3);
  opacity: 0.85;
 }
-.fastapi-opinions__tab[aria-selected="true"] {
-  background-color: var(--md-default-fg-color--lightest);
-}
 .fastapi-opinions__tab[aria-selected="true"] .fastapi-opinions__mark {
  filter: grayscale(0);
  opacity: 1;
@@ -340,36 +351,101 @@ Inspired by Termynal's CSS tricks with modifications
 }

 .fastapi-opinions__panel {
-  background-color: rgba(0, 148, 133, 0.06);
-  border-left: 2px solid var(--md-primary-fg-color);
-  padding: 1rem 1.25rem;
-  border-radius: 0 4px 4px 0;
+  position: relative;
+  padding: 0.5rem 1rem 0.5rem 3rem;
 }
-.fastapi-opinions__quote {
+.fastapi-opinions__panel::before {
+  content: "\201C";
+  position: absolute;
+  top: -0.75rem;
+  left: 0.25rem;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 4rem;
+  line-height: 1;
+  color: var(--md-primary-fg-color);
+  opacity: 0.18;
+  pointer-events: none;
+}
+.md-typeset blockquote.fastapi-opinions__quote {
  margin: 0;
-  font-size: 0.9rem;
+  font-size: 1rem;
  font-style: italic;
-  line-height: 1.6;
+  line-height: 1.65;
  color: var(--md-default-fg-color);
+  border-left: 0;
+  padding-left: 0;
 }
 .fastapi-opinions__quote strong { font-style: normal; }
 .fastapi-opinions__attr {
-  margin-top: 0.625rem;
-  font-size: 0.75rem;
+  margin-top: 0.875rem;
+  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
 }
 .fastapi-opinions__attr strong { color: var(--md-default-fg-color); }
 .fastapi-opinions__attr a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
-  font-size: 0.7rem;
+  font-size: 0.75rem;
  margin-left: 0.25rem;
 }
 .fastapi-opinions__attr a:hover { text-decoration: underline; }

+@media (prefers-reduced-motion: reduce) {
+  .fastapi-opinions__tab::after { transition: none; }
+}
+
@media (max-width: 600px) {
  .fastapi-opinions__tabs { gap: 0.125rem; }
  .fastapi-opinions__mark { height: 18px; }
+  .fastapi-opinions__panel { padding-left: 2.25rem; }
+  .fastapi-opinions__panel::before { font-size: 3rem; }
+}
+
+.fastapi-sponsors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem 1.25rem;
+  margin: 1rem 0 2rem;
+}
+
+.fastapi-sponsors__card {
+  transition: transform 0.15s ease;
+}
+
+.fastapi-sponsors__card:hover {
+  transform: translateY(-1px);
+}
+
+.fastapi-sponsors__card--keystone {
+  width: 100%;
+  max-width: 560px;
+}
+
+.fastapi-sponsors__banner {
+  display: block;
+  border-radius: 12px;
+}
+
+.fastapi-sponsors__card--keystone .fastapi-sponsors__banner { width: 100%; }
+.fastapi-sponsors__card--gold     .fastapi-sponsors__banner { height: 80px; }
+.fastapi-sponsors__card--silver   .fastapi-sponsors__banner { height: 60px; }
+
+@media (max-width: 600px) {
+  .fastapi-sponsors__card--gold   .fastapi-sponsors__banner { height: 64px; }
+  .fastapi-sponsors__card--silver .fastapi-sponsors__banner { height: 50px; }
+}
+
+.fastapi-feature-banner {
+  display: block;
+  max-width: 680px;
+  margin: 1rem auto 1.5rem;
+}
+.fastapi-feature-banner img {
+  display: block;
+  width: 100%;
+  border-radius: 12px;
 }

 /* Hidden in MkDocs; rendered on GitHub (which doesn't load this stylesheet) */
--- a/docs/en/docs/index.md
+++ b/docs/en/docs/index.md
@@ -54,18 +54,27 @@ The key features are:

 ### Keystone Sponsor { #keystone-sponsor }

+<div class="fastapi-sponsors fastapi-sponsors--keystone">
 {% for sponsor in sponsors.keystone -%}
-<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
+<a class="fastapi-sponsors__card fastapi-sponsors__card--keystone" href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img class="fastapi-sponsors__banner" src="{{ sponsor.img }}" alt="{{ sponsor.title }}"></a>
 {% endfor -%}
+</div>

-### Gold and Silver Sponsors { #gold-and-silver-sponsors }
+### Gold Sponsors { #gold-sponsors }

+<div class="fastapi-sponsors fastapi-sponsors--gold">
 {% for sponsor in sponsors.gold -%}
-<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
+<a class="fastapi-sponsors__card fastapi-sponsors__card--gold" href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img class="fastapi-sponsors__banner" src="{{ sponsor.img }}" alt="{{ sponsor.title }}" loading="lazy"></a>
 {% endfor -%}
-{%- for sponsor in sponsors.silver -%}
-<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
+</div>
+
+### Silver Sponsors { #silver-sponsors }
+
+<div class="fastapi-sponsors fastapi-sponsors--silver">
+{% for sponsor in sponsors.silver -%}
+<a class="fastapi-sponsors__card fastapi-sponsors__card--silver" href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img class="fastapi-sponsors__banner" src="{{ sponsor.img }}" alt="{{ sponsor.title }}" loading="lazy"></a>
 {% endfor %}
+</div>

 <!-- /sponsors -->

@@ -111,9 +120,6 @@ The key features are:

 <div class="only-github" markdown="1">

-| [<img height="22" src="https://fastapi.tiangolo.com/img/logos/microsoft.svg" alt="Microsoft">](https://github.com/fastapi/fastapi/pull/26 "Microsoft") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/uber.svg" alt="Uber">](https://eng.uber.com/ludwig-v0-2/ "Uber") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/netflix.svg" alt="Netflix">](https://netflixtechblog.com/introducing-dispatch-da4b8a2a8072 "Netflix") | [<img height="22" src="https://fastapi.tiangolo.com/img/logos/cisco.svg" alt="Cisco">](https://www.linkedin.com/posts/deonpillsbury_cisco-cx-python-activity-6963242628536487936-trAp/ "Cisco") |
-| :---: | :---: | :---: | :---: |
-
 "_[...] I'm using **FastAPI** a ton these days. [...] I'm actually planning to use it for all of my team's **ML services at Microsoft**. Some of them are getting integrated into the core **Windows** product and some **Office** products._"

 <div style="text-align: right; margin-right: 10%;">Kabir Khan - <strong>Microsoft</strong> <a href="https://github.com/fastapi/fastapi/pull/26"><small>(ref)</small></a></div>
@@ -144,13 +150,13 @@ The key features are:

 [**FastAPI Conf '26**](https://fastapiconf.com) is happening on **October 28, 2026** in **Amsterdam, NL**. All about FastAPI, right from the source. 🎤

-<a href="https://fastapiconf.com"><img src="https://fastapi.tiangolo.com/img/fastapi-conf.jpeg" alt="FastAPI Conf '26 - October 28, 2026 - Amsterdam, NL"></a>
+<a class="fastapi-feature-banner" href="https://fastapiconf.com"><img src="https://fastapi.tiangolo.com/img/fastapi-conf.jpeg" alt="FastAPI Conf '26 - October 28, 2026 - Amsterdam, NL"></a>

 ## FastAPI mini documentary { #fastapi-mini-documentary }

 There's a [FastAPI mini documentary](https://www.youtube.com/watch?v=mpR8ngthqiE) released at the end of 2025, you can watch it online:

-<a href="https://www.youtube.com/watch?v=mpR8ngthqiE"><img src="https://fastapi.tiangolo.com/img/fastapi-documentary.jpg" alt="FastAPI Mini Documentary"></a>
+<a class="fastapi-feature-banner" href="https://www.youtube.com/watch?v=mpR8ngthqiE"><img src="https://fastapi.tiangolo.com/img/fastapi-documentary.jpg" alt="FastAPI Mini Documentary"></a>

 ## **Typer**, the FastAPI of CLIs { #typer-the-fastapi-of-clis }

--- a/scripts/docs.py
+++ b/scripts/docs.py
@@ -190,12 +190,14 @@ index_sponsors_template = """
 {% for sponsor in sponsors.keystone -%}
 <a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
 {% endfor %}
-### Gold and Silver Sponsors
+### Gold Sponsors

 {% for sponsor in sponsors.gold -%}
 <a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
-{% endfor -%}
-{%- for sponsor in sponsors.silver -%}
+{% endfor %}
+### Silver Sponsors
+
+{% for sponsor in sponsors.silver -%}
 <a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
 {% endfor %}