mirror
/
tiangolo.fastapi
mirror of https://github.com/tiangolo/fastapi
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

💄 Improve layout and styling (#15462) 

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
pull/15467/head
Alejandra 1 month ago
committed by GitHub
parent
a3ceb9ca74
commit
b363a1d002
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
4 changed files with 123 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      README.md
  2. 116
      docs/en/docs/css/custom.css
  3. 26
      docs/en/docs/index.md
  4. 8
      scripts/docs.py

12
README.md
View File

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

116
docs/en/docs/css/custom.css
View File

@ -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__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;
}
.fastapi-opinions__quote {
.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) */

26
docs/en/docs/index.md
View File

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

8
scripts/docs.py
View File

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

Write Preview
Loading…
Cancel
Save