mirror of
https://github.com/vinta/awesome-python.git
synced 2026-11-08 02:15:12 -06:00
Merge branch 'fix/minor-fixes'
This commit is contained in:
Vinta Chen
@@ -18,3 +18,5 @@ Apply [CONTRIBUTING.md](CONTRIBUTING.md) (admission, entry format, ordering) whe
|
||||
## Website
|
||||
|
||||
Read [DESIGN.md](DESIGN.md) before changing anything under `website/templates/` or `website/static/`.
|
||||
|
||||
When showing the user a website change, keep a desktop view and a phone view of the same branch build open at the same time, in separate browser tabs, so the user never has to switch the viewport. An emulated viewport can reset between turns, so build the phone view as a page of 375px-wide iframes (home, sponsorship, one category page) pointing at that build. Show each visual change as before/after images at both widths.
|
||||
|
||||
@@ -147,7 +147,7 @@ Hard-won sizing rules (do not relax):
|
||||
Depth comes from **tonal layers**, not heavy shadows.
|
||||
|
||||
- The page is a quiet warm canvas (`--bg-page`). The content shell is slightly brighter paper (`--bg-paper`). CTA backgrounds and inline decorative blocks step up to `--bg-paper-strong`; the sponsor band steps further, to `--sponsor-bg`.
|
||||
- The hero and the category guide band are the only places with real atmosphere: warm gradients on a dark earthy ground (`--hero-bg-start` → `--hero-bg-mid` → `--hero-bg-end`). Only the hero adds the subtle grid and slow sheen. The sheen and any other motion respect `prefers-reduced-motion`.
|
||||
- The hero and the category guide band are the only places with real atmosphere: warm gradients on a dark earthy ground (`--hero-bg-start` → `--hero-bg-mid` → `--hero-bg-end`). Only the hero adds the subtle grid. The hero background holds still: a moving stripe on a narrow phone hero reads as a loading bar. Any motion elsewhere respects `prefers-reduced-motion`.
|
||||
- The footer is a single tonal block in `--footer-bg`, no internal gradients.
|
||||
- Two depth treatments are allowed and only these two. The search input combines a 1px inset highlight (`--search-inset`) with a soft warm drop shadow (`--search-shadow`, intensified by `--search-focus-shadow` on focus). The primary CTA button (`.hero-action-primary`) carries a warm drop shadow for press affordance. Both shadows are soft, warm-tinted, and tied to interactive elements. No new drop shadows on cards, panels, rows, or static decoration.
|
||||
- No glassmorphism as default decoration.
|
||||
@@ -169,7 +169,7 @@ The component vocabulary is small and table-led. Source of truth: `website/stati
|
||||
- **Table-driven index** (the hero of the page). Sticky header, sortable columns, click-to-expand rows that indent under the Name column. Modeled on placestoread.xyz. Not a card grid.
|
||||
- **Group rows**. Section, subcategory, and group pages list rows in README order. Section pages add one H2 row per use case; group pages add one per section, linking to that section's page. A note replaces the sort arrow until someone sorts a column, which flattens the list and hides the group rows.
|
||||
- **Filter tags** (`.tag`). `--accent-soft` background with `--accent-deep` text. Pill shape. Hover swaps to `--highlight` background with `--tag-hover-border` border and ink text. Active state uses the warm `--tag-active-start` → `--tag-active-end` gradient with hero-ink text. Tag variants (`tag-group`, `tag-source`) inherit the base `.tag` style today and differ only at narrow widths (`tag-group` hides under 960px). Add a new variant only when a real visual difference is needed.
|
||||
- **Hero**. Magazine-cover headline, dark earthy ground, kicker and proof microcopy, primary CTA button using `--hero-btn-start` / `--hero-btn-end`. Subtle grid plus slow sheen. Respects `prefers-reduced-motion`.
|
||||
- **Hero**. Magazine-cover headline, dark earthy ground, kicker and proof microcopy, primary CTA button using `--hero-btn-start` / `--hero-btn-end`. Subtle grid on a still background.
|
||||
- **Jump links**. One per use case in a category hero, plus one for the guide. Underlined like the intro's links, with a trailing ↓. Never tag-styled: tags filter the table or open another page, jump links only scroll.
|
||||
- **Guide band**. Everything in a category intro after its "How to choose" list. It sits below the table on the hero's dark gradient, with its H2 above the text.
|
||||
- **Sponsor band**. Sits below the hero on the home page and category pages, on `--sponsor-bg` with a `--line-strong` bottom border. Editorial layout, not a logo wall. Sponsor links share the global accent treatment; each sponsor name ends in a small ↗ in `--accent-deep` to mark it as an outbound link.
|
||||
|
||||
+1
-3
@@ -833,7 +833,6 @@ def build(repo_root: Path) -> None:
|
||||
total_entries=total_entries,
|
||||
total_categories=len(categories),
|
||||
repo_stars=repo_stars,
|
||||
build_date=build_date.strftime("%B %d, %Y"),
|
||||
sponsors=sponsors,
|
||||
category_urls=category_urls,
|
||||
filter_urls=filter_urls,
|
||||
@@ -937,7 +936,6 @@ def build(repo_root: Path) -> None:
|
||||
hero_stats: list[str] = []
|
||||
if repo_stars:
|
||||
hero_stats.append(f"{repo_stars}+ stars on GitHub")
|
||||
hero_stats.append(f"Updated {build_date.strftime('%B %d, %Y')}")
|
||||
(sponsorship_dir / "index.html").write_text(
|
||||
tpl_sponsorship.render(
|
||||
hero_stats=hero_stats,
|
||||
@@ -994,7 +992,7 @@ def build(repo_root: Path) -> None:
|
||||
llms_template,
|
||||
readme_text=readme_text,
|
||||
subtitle=subtitle,
|
||||
build_date=build_date.strftime("%Y/%m/%d"),
|
||||
build_date=build_date.date().isoformat(),
|
||||
stars_data=stars_data,
|
||||
downloads_data=downloads_data,
|
||||
categories=categories,
|
||||
|
||||
@@ -78,16 +78,6 @@ if (window.location.hash === "#library-index") {
|
||||
);
|
||||
}
|
||||
|
||||
// Pause hero animations when scrolled out of view
|
||||
(function () {
|
||||
const hero = document.querySelector(".hero");
|
||||
if (!hero || !("IntersectionObserver" in window)) return;
|
||||
const observer = new IntersectionObserver(function (entries) {
|
||||
hero.classList.toggle("offscreen", !entries[0].isIntersecting);
|
||||
});
|
||||
observer.observe(hero);
|
||||
})();
|
||||
|
||||
function relativeTime(isoStr) {
|
||||
const date = new Date(isoStr);
|
||||
const now = new Date();
|
||||
|
||||
+28
-22
@@ -177,25 +177,12 @@ kbd {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-sheen,
|
||||
.hero-noise {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-sheen {
|
||||
background:
|
||||
linear-gradient(118deg, transparent 35%, oklch(100% 0 0 / 0.09) 49%, transparent 63%);
|
||||
transform: translateX(-30%);
|
||||
animation: sheen-drift 18s linear 3;
|
||||
}
|
||||
|
||||
.hero.offscreen .hero-sheen,
|
||||
.hero.offscreen .hero-noise {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.hero-noise {
|
||||
opacity: 0.1;
|
||||
background-image:
|
||||
@@ -339,6 +326,11 @@ kbd {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Keeps each stat whole when the line wraps */
|
||||
.proof-stat {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero-proof a {
|
||||
color: var(--hero-text);
|
||||
text-decoration: underline;
|
||||
@@ -1417,6 +1409,11 @@ th[data-sort].sort-asc::after {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* With the <wbr> after "@", the address breaks only there, never at the domain's hyphen */
|
||||
.email-domain {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sponsorship-lede {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: 1.45;
|
||||
@@ -1725,15 +1722,6 @@ th[data-sort].sort-asc::after {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sheen-drift {
|
||||
from {
|
||||
transform: translateX(-30%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(35%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.hero-shell {
|
||||
padding-bottom: 2rem;
|
||||
@@ -1746,6 +1734,16 @@ th[data-sort].sort-asc::after {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sponsor-meta {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.sponsor-link {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.sponsorship-meta {
|
||||
position: static;
|
||||
}
|
||||
@@ -1798,6 +1796,14 @@ th[data-sort].sort-asc::after {
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.proof-stat {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.proof-sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-topbar {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
{% endblock %}
|
||||
{% block header %}
|
||||
<header class="category-hero">
|
||||
<div class="hero-sheen" aria-hidden="true"></div>
|
||||
<div class="hero-noise" aria-hidden="true"></div>
|
||||
|
||||
<div class="category-hero-shell">
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
{% endblock %}
|
||||
{% block header %}
|
||||
<header class="hero">
|
||||
<div class="hero-sheen" aria-hidden="true"></div>
|
||||
<div class="hero-noise" aria-hidden="true"></div>
|
||||
|
||||
<div class="hero-shell">
|
||||
@@ -28,11 +27,10 @@
|
||||
<h1>Awesome Python</h1>
|
||||
<p class="hero-sub">{{ subtitle }}</p>
|
||||
<p class="hero-proof">
|
||||
{% if repo_stars %}{{ repo_stars }}+ stars on GitHub{% endif %} {% if repo_stars and build_date %}/{% endif %} {% if build_date %}Updated {{ build_date }}{% endif %} {% if repo_stars or
|
||||
build_date %}/{% endif %} Maintained by
|
||||
{% if repo_stars %}<span class="proof-stat">{{ repo_stars }}+ stars on GitHub</span> <span class="proof-sep">/</span>{% endif %} <span class="proof-stat">Maintained by
|
||||
<a href="https://github.com/vinta" target="_blank" rel="noopener">@vinta</a>
|
||||
and
|
||||
<a href="https://github.com/JinyangWang27" target="_blank" rel="noopener">@JinyangWang27</a>
|
||||
<a href="https://github.com/JinyangWang27" target="_blank" rel="noopener">@JinyangWang27</a></span>
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
{% endblock %}
|
||||
{% block header %}
|
||||
<header class="category-hero sponsorship-hero">
|
||||
<div class="hero-sheen" aria-hidden="true"></div>
|
||||
<div class="hero-noise" aria-hidden="true"></div>
|
||||
|
||||
<div class="category-hero-shell">
|
||||
@@ -38,7 +37,7 @@
|
||||
|
||||
{% if hero_stats %}
|
||||
<p class="hero-proof sponsorship-proof">
|
||||
{% for stat in hero_stats %}{{ stat }}{% if not loop.last %}
|
||||
{% for stat in hero_stats %}<span class="proof-stat">{{ stat }}</span>{% if not loop.last %}
|
||||
<span class="proof-sep">/</span> {% endif %}{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -48,7 +47,7 @@
|
||||
href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
|
||||
data-tier="general"
|
||||
class="hero-action hero-action-primary"
|
||||
>Email sponsorship@awesome-python.com</a
|
||||
>Email us</a
|
||||
>
|
||||
<a
|
||||
href="https://github.com/vinta/awesome-python/blob/master/SPONSORSHIP.md"
|
||||
@@ -234,7 +233,7 @@
|
||||
<a
|
||||
href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
|
||||
data-tier="general"
|
||||
>sponsorship@awesome-python.com</a
|
||||
>sponsorship@<wbr /><span class="email-domain">awesome-python.com</span></a
|
||||
>
|
||||
with the four items below.
|
||||
</p>
|
||||
@@ -274,7 +273,7 @@
|
||||
href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
|
||||
data-tier="general"
|
||||
class="hero-action hero-action-primary"
|
||||
>Email sponsorship@awesome-python.com</a
|
||||
>Email us</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user