Browse Source

💄 Improve layout and styling

pull/15462/head
Alejandra 1 month ago
parent
commit
0260deaf10
  1. 116
      docs/en/docs/css/custom.css
  2. 23
      docs/en/docs/index.md
  3. 8
      scripts/docs.py

116
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__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) */

23
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 -->
@ -144,13 +153,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

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

Loading…
Cancel
Save