Skip to content

Commit 6969326

Browse files
xmnlabxmnlab
committed
fix: Fix Partner page
1 parent 4b1da1e commit 6969326

File tree

3 files changed

+153
-28
lines changed

3 files changed

+153
-28
lines changed

‎mkdocs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ extra_css:
2323
- css/footer.css
2424
- css/home.css
2525
- css/nav.css
26+
- css/partners.css
2627
- css/search.css
2728
- css/tokens.css
2829
- css/utilities.css

‎theme/css/partners.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* ===== Partners grid (dark/light friendly, glass cards) ===== */
2+
3+
:root{
4+
--pc-text: var(--fg, #e8eaf0);
5+
--pc-bg: rgba(16,18,27,.6);
6+
--pc-border: rgba(255,255,255,.12);
7+
--pc-hover: rgba(255,255,255,.06);
8+
}
9+
[data-bs-theme="light"]{
10+
--pc-text: #111827;
11+
--pc-bg: #ffffff;
12+
--pc-border: rgba(0,0,0,.08);
13+
--pc-hover: rgba(0,0,0,.04);
14+
}
15+
16+
.partners-grid .partner-card{
17+
background: var(--pc-bg);
18+
border: 1px solid var(--pc-border);
19+
border-radius: 1rem;
20+
backdrop-filter: blur(10px);
21+
-webkit-backdrop-filter: blur(10px);
22+
box-shadow: 0 10px 24px rgba(0,0,0,.08);
23+
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
24+
position: relative;
25+
}
26+
.partners-grid .partner-card:hover{
27+
transform: translateY(-2px);
28+
box-shadow: 0 16px 36px rgba(0,0,0,.16);
29+
border-color: color-mix(in oklab, var(--pc-border) 60%, var(--brand, #3b82f6));
30+
}
31+
32+
.partners-grid .partner-body{
33+
color: var(--pc-text);
34+
}
35+
.partners-grid .partner-title a{
36+
color: inherit;
37+
text-decoration: none;
38+
}
39+
.partners-grid .partner-title a:hover{
40+
text-decoration: underline;
41+
}
42+
.partners-grid .partner-summary{
43+
color: color-mix(in oklab, var(--pc-text) 80%, transparent);
44+
margin-bottom: .75rem;
45+
}
46+
47+
.partners-grid .icon{ width: 18px; height: 18px; }
48+
49+
.partners-grid .icon-btn{
50+
--_bd: var(--pc-border);
51+
--_fg: var(--pc-text);
52+
display: inline-flex; align-items: center; justify-content: center;
53+
gap: .35rem;
54+
border: 1px solid var(--_bd);
55+
border-radius: 999px;
56+
padding: .35rem .45rem;
57+
line-height: 1;
58+
color: var(--_fg);
59+
background: transparent;
60+
text-decoration: none;
61+
transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
62+
}
63+
.partners-grid .icon-btn:hover{
64+
background: var(--pc-hover);
65+
border-color: color-mix(in oklab, var(--_bd) 60%, var(--brand, #3b82f6));
66+
}
67+
.partners-grid .icon-btn:active{ transform: translateY(1px); }
68+
69+
/* Logo band: fixed height + hidden overflow so nothing spills into the title */
70+
.partners-grid .logo-wrap{
71+
height: 110px; /* was 130px */
72+
padding: 12px 16px;
73+
overflow: hidden; /* hard stop */
74+
display: flex; align-items: center; justify-content: center;
75+
border-bottom: 1px dashed var(--pc-border);
76+
background: color-mix(in oklab, var(--pc-bg) 92%, transparent);
77+
border-top-left-radius: 1rem; border-top-right-radius: 1rem;
78+
}
79+
80+
/* Logos: clamp both height and width so tall/wide marks don’t dominate */
81+
.partners-grid .logo-wrap img{
82+
display: block;
83+
object-fit: contain;
84+
width: auto;
85+
max-width: 80%; /* prevent super-wide brands from touching edges */
86+
max-height: clamp(44px, 8vw, 78px); /* scale responsively but never huge */
87+
transform: scale(var(--logo-scale, 1)); /* per-partner fine-tune (see below) */
88+
transform-origin: center;
89+
}
90+
91+
/* Slightly larger on very wide screens, still bounded */
92+
@media (min-width: 1400px){
93+
.partners-grid .logo-wrap{ height: 120px; }
94+
.partners-grid .logo-wrap img{ max-height: 84px; }
95+
}
96+
97+
/* And a touch smaller on tight screens to avoid crowding */
98+
@media (max-width: 480px){
99+
.partners-grid .logo-wrap{ height: 96px; }
100+
.partners-grid .logo-wrap img{ max-height: 64px; }
101+
}
102+
103+
/* Optional: keep long names tidy */
104+
.partners-grid .partner-title{
105+
display: -webkit-box;
106+
-webkit-line-clamp: 2; /* clamp to 2 lines */
107+
-webkit-box-orient: vertical;
108+
overflow: hidden;
109+
}

‎theme/partners.html‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,54 @@
11
{% extends "main.html" %}
22

3-
{% set colors=["", "bg-light"] %}
3+
{% block header_extra %}
4+
<link rel="stylesheet" href="/css/partners.css">
5+
{% endblock header_extra %}
46

57
{% block content_inner %}
68
{{ page.content }}
79

8-
<div class="row">
9-
<div class="col-md-12 pt-3">
10-
11-
{% for partner in page.meta["partners"] %}
12-
13-
<div class="row {{ colors[loop.index % 2] }}">
14-
<div class="col-4 text-center">
15-
<a href="{{ partner.url }}">
16-
<img src="{{ partner.thumbnail }}" style="height: 150px;"/>
17-
</a>
18-
</div>
19-
<div class="col-8">
20-
<h2>
21-
{{ partner.name }}
22-
{% if "github" in partner %}
23-
<a href="{{ partner.github }}"><i
24-
class="fa fa-brands fa-github-square position-static text-dark"></i>
25-
</a>
10+
<div class="partners-grid row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 mt-2">
11+
12+
{% for partner in page.meta["partners"] %}
13+
{% set logo = (partner.thumbnail if 'thumbnail' in partner else (partner.logo if 'logo' in partner else None)) %}
14+
{% set site = partner.url if 'url' in partner else None %}
15+
16+
<div class="col">
17+
<article class="partner-card h-100 d-flex flex-column">
18+
<div class="logo-wrap p-4">
19+
{% if logo %}
20+
<a href="{{ site or '#' }}" class="d-inline-flex" target="_blank" rel="noopener">
21+
<img src="{{ logo }}" alt="{{ partner.name }}">
22+
</a>
2623
{% endif %}
27-
{% if "twitter" in partner %}
28-
<a href="{{ partner.twitter }}"><i
29-
class="fa fa-brands fa-twitter-square"></i>
30-
</a>
24+
</div>
25+
26+
<div class="partner-body px-4 pb-4 pt-3 d-flex flex-column flex-grow-1">
27+
<h3 class="h5 partner-title mb-2">
28+
{% if site %}
29+
<a href="{{ site }}" class="stretched-link" target="_blank" rel="noopener">{{ partner.name }}</a>
30+
{% else %}
31+
{{ partner.name }}
32+
{% endif %}
33+
</h3>
34+
35+
{% if 'summary' in partner and partner.summary %}
36+
<p class="partner-summary">{{ partner.summary }}</p>
3137
{% endif %}
32-
</h2>
33-
<p>{{ partner.summary }}</p>
34-
</div>
38+
39+
<div class="mt-auto d-flex flex-wrap gap-2">
40+
{# Social icons (only render if URL exists). These IDs come from base.html sprite. #}
41+
{% if 'github' in partner %}<a href="{{ partner.github }}" class="icon-btn" target="_blank" rel="noopener" aria-label="GitHub"><svg class="icon"><use xlink:href="#github"/></svg></a>{% endif %}
42+
{% if 'twitter' in partner %}<a href="{{ partner.twitter }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Twitter / X"><svg class="icon"><use xlink:href="#twitter"/></svg></a>{% endif %}
43+
{% if 'linkedin' in partner %}<a href="{{ partner.linkedin }}" class="icon-btn" target="_blank" rel="noopener" aria-label="LinkedIn"><svg class="icon"><use xlink:href="#linkedin"/></svg></a>{% endif %}
44+
{% if 'facebook' in partner %}<a href="{{ partner.facebook }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Facebook"><svg class="icon"><use xlink:href="#facebook"/></svg></a>{% endif %}
45+
{% if 'discord' in partner %}<a href="{{ partner.discord }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Discord"><svg class="icon"><use xlink:href="#discord"/></svg></a>{% endif %}
46+
{% if 'rss' in partner %}<a href="{{ partner.rss }}" class="icon-btn" target="_blank" rel="noopener" aria-label="RSS"><svg class="icon"><use xlink:href="#rss"/></svg></a>{% endif %}
47+
</div>
48+
</div>
49+
</article>
3550
</div>
36-
{% endfor %}
37-
</div>
51+
{% endfor %}
52+
3853
</div>
3954
{% endblock content_inner %}

0 commit comments

Comments
 (0)