Skip to content

Commit e532c9e

Browse files
kastnerpclaude
kastnerp
and
claude
committed
Restore Bootstrap utilities v1 dropped: home logo and team grid
Two visual regressions from the v1 migration, same root cause: pre-v1 al-folio loaded bootstrap.min.css and mdb.min.css from a CDN. v1 dropped both for al_folio_core's Tailwind layer, which reimplements many of the same class names — some with different semantics. Home page logo The hero logo comes from the org profile README via `{% remote_include %}` in _pages/about.md, as <img src="assets/img/cd/...svg" class="img-fluid theme-aware-logo">. That `src` is relative to the *other* repo and 404s here; the image is only ever visible because `.theme-aware-logo { content: url(...) }` swaps in a local wordmark. Since the class lives in a remote file, grepping this repo finds nothing, which is why the earlier pass mistook it for dead CSS and dropped it with _sass/_themes.scss. Restored for dark, light and system themes. The obsolete `#light-toggle-*` rules from that block stay gone — v1 renders the tri-state toggle itself. Team page rendered as boxed cards _includes/team_member.liquid is written against Bootstrap 4 + MDB: .h-100 Tailwind reads as 100 spacing units (25rem), not `height: 100%` .card al_folio_core adds a background and drop shadow .card-body gem padding (1.25rem) outranks the element's `.p-2` .card-title inherits gem heading sizing (32px) rather than h5's 20px Scoped to a new `.team-member` hook, pinned to the pre-migration computed values. These utility names appear nowhere else in the repo. Also restored site-wide, matching the values Bootstrap 4 served, because neither al_folio_core nor al_folio_bootstrap_compat ships them: `.text-muted` (51 uses), `.bg-transparent`, `.border-0`, and the `.row-cols-*` family (the team grid needs row-cols-lg-5 for its 5-across layout). Not enabling al_folio_bootstrap_compat: its utilities are Tailwind-scale, so it would define `.h-100` as 25rem and make this worse, and its `.bg-transparent` lacks the `!important` needed to beat `.card`. Verified against the live site with matching computed styles: card background transparent, no shadow, card-title 20px/400, card-body 8px padding, columns flex 0 0 20%, text-muted #6c757d, and the logo resolving to the white wordmark in dark/system and black in light. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent f3a8892 commit e532c9e

2 files changed

Lines changed: 219 additions & 3 deletions

File tree

‎_includes/team_member.liquid‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<div class="col mb-4">
1+
{% comment %}
2+
`team-member` is a styling hook for _sass/_custom.scss. The Bootstrap/MDB utility
3+
classes below (h-100, mb-4, p-2, card) were authored against the Bootstrap 4 + MDB
4+
CDN that pre-v1 al-folio loaded. v1 reimplements some of those names with Tailwind
5+
semantics — notably `h-100`, which means 25rem here rather than `height: 100%` —
6+
so the card is pinned to the pre-v1 rendering under this class instead.
7+
{% endcomment %}
8+
<div class="col mb-4 team-member">
29
{% assign avatar_url = nil %}
310
{% assign avatar_path = nil %}
411
{% if project.github %}

‎_sass/_custom.scss‎

Lines changed: 211 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,220 @@
22
//
33
// In al-folio v1.x the base stylesheets are gem-owned (al_folio_core). This file
44
// holds the rules that used to live as local edits inside the pre-v1 `_sass/_base.scss`
5-
// and `_sass/_themes.scss` monoliths, so those two files no longer need to shadow
6-
// their gem counterparts.
5+
// and `_sass/_themes.scss` monoliths, plus the handful of Bootstrap/MDB utilities
6+
// this site's content depends on that v1 no longer ships (see below).
77
//
88
// Loaded from `assets/css/main.scss`, last, so it can adjust gem defaults.
99

10+
@use "sass:math";
11+
12+
// -----------------------------------------------------------------------------
13+
// Theme-aware logo
14+
// -----------------------------------------------------------------------------
15+
// The home page hero logo comes from the org profile README, pulled in by
16+
// `{% remote_include %}` in _pages/about.md. That markup is:
17+
//
18+
// <img src="assets/img/cd/sustainlab-logo-wordmark-color-white.svg"
19+
// class="img-fluid theme-aware-logo" ...>
20+
//
21+
// The `src` is relative to *that* repo and 404s here, so the image is only ever
22+
// visible because `content: url(...)` replaces it with a local wordmark. Because
23+
// the class lives in a remote file, grepping this repo for it finds nothing —
24+
// it is not dead CSS. Removing these rules leaves a broken image on the home page.
25+
26+
html[data-theme-setting="dark"] {
27+
.theme-aware-logo {
28+
content: url("/assets/img/brand/sustainlab-logo-wordmark-color-white.svg");
29+
}
30+
}
31+
32+
html[data-theme-setting="light"] {
33+
.theme-aware-logo {
34+
content: url("/assets/img/brand/sustainlab-logo-wordmark-color-black.svg");
35+
}
36+
}
37+
38+
// v1 renders the tri-state toggle itself, so the old `#light-toggle-*` display
39+
// rules are gone — but the system state still needs the logo picked by media query.
40+
html[data-theme-setting="system"] {
41+
@media (prefers-color-scheme: dark) {
42+
.theme-aware-logo {
43+
content: url("/assets/img/brand/sustainlab-logo-wordmark-color-white.svg");
44+
}
45+
}
46+
47+
@media (prefers-color-scheme: light) {
48+
.theme-aware-logo {
49+
content: url("/assets/img/brand/sustainlab-logo-wordmark-color-black.svg");
50+
}
51+
}
52+
}
53+
54+
// -----------------------------------------------------------------------------
55+
// Bootstrap 4 / MDB utilities dropped in v1
56+
// -----------------------------------------------------------------------------
57+
// Pre-v1 al-folio loaded bootstrap.min.css and mdb.min.css from a CDN. v1 replaced
58+
// both with al_folio_core's own Tailwind layer, which reimplements most of the
59+
// classes this site uses but not these. Values match what Bootstrap 4 served, so
60+
// the rendering is unchanged from the pre-migration site.
61+
//
62+
// `al_folio_bootstrap_compat` ships `.bg-transparent` / `.border-0` but without
63+
// `!important`, so its versions lose the cascade to `.card` — hence these local
64+
// copies rather than enabling that gem.
65+
66+
.text-muted {
67+
color: #6c757d !important;
68+
}
69+
70+
.bg-transparent {
71+
background-color: transparent !important;
72+
}
73+
74+
.border-0 {
75+
border: 0 !important;
76+
}
77+
78+
// `row-cols-*`: ships in neither al_folio_core nor the compat gem. The team page
79+
// grid (`row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5`) collapses to a
80+
// plain flex row without them.
81+
@mixin row-cols($count) {
82+
> * {
83+
flex: 0 0 math.percentage(math.div(1, $count));
84+
max-width: math.percentage(math.div(1, $count));
85+
}
86+
}
87+
88+
.row-cols-1 {
89+
@include row-cols(1);
90+
}
91+
.row-cols-2 {
92+
@include row-cols(2);
93+
}
94+
.row-cols-3 {
95+
@include row-cols(3);
96+
}
97+
.row-cols-4 {
98+
@include row-cols(4);
99+
}
100+
.row-cols-5 {
101+
@include row-cols(5);
102+
}
103+
.row-cols-6 {
104+
@include row-cols(6);
105+
}
106+
107+
@media (min-width: 576px) {
108+
.row-cols-sm-1 {
109+
@include row-cols(1);
110+
}
111+
.row-cols-sm-2 {
112+
@include row-cols(2);
113+
}
114+
.row-cols-sm-3 {
115+
@include row-cols(3);
116+
}
117+
.row-cols-sm-4 {
118+
@include row-cols(4);
119+
}
120+
.row-cols-sm-5 {
121+
@include row-cols(5);
122+
}
123+
.row-cols-sm-6 {
124+
@include row-cols(6);
125+
}
126+
}
127+
128+
@media (min-width: 768px) {
129+
.row-cols-md-1 {
130+
@include row-cols(1);
131+
}
132+
.row-cols-md-2 {
133+
@include row-cols(2);
134+
}
135+
.row-cols-md-3 {
136+
@include row-cols(3);
137+
}
138+
.row-cols-md-4 {
139+
@include row-cols(4);
140+
}
141+
.row-cols-md-5 {
142+
@include row-cols(5);
143+
}
144+
.row-cols-md-6 {
145+
@include row-cols(6);
146+
}
147+
}
148+
149+
@media (min-width: 992px) {
150+
.row-cols-lg-1 {
151+
@include row-cols(1);
152+
}
153+
.row-cols-lg-2 {
154+
@include row-cols(2);
155+
}
156+
.row-cols-lg-3 {
157+
@include row-cols(3);
158+
}
159+
.row-cols-lg-4 {
160+
@include row-cols(4);
161+
}
162+
.row-cols-lg-5 {
163+
@include row-cols(5);
164+
}
165+
.row-cols-lg-6 {
166+
@include row-cols(6);
167+
}
168+
}
169+
170+
// -----------------------------------------------------------------------------
171+
// Team member cards (_includes/team_member.liquid)
172+
// -----------------------------------------------------------------------------
173+
// That include is written against Bootstrap 4 + MDB, which pre-v1 al-folio loaded
174+
// from a CDN. v1 dropped both and reuses some of the same class names with Tailwind
175+
// semantics, which turned the plain portrait grid into boxed cards:
176+
//
177+
// .h-100 Tailwind reads this as 100 spacing units (25rem), not `height: 100%`
178+
// .card al_folio_core gives it a background and a drop shadow
179+
// .card-body gem padding (1.25rem) outranks the element's `.p-2`
180+
// .card-title inherits gem heading sizing (32px) instead of Bootstrap's h5 (20px)
181+
//
182+
// Values below are the computed values from the pre-migration site, so this grid
183+
// renders as it did before. Scoped to `.team-member` because these utility names
184+
// are used nowhere else in this repo.
185+
186+
.team-member {
187+
margin-bottom: 1.5rem; // Bootstrap mb-4; Tailwind's is 1rem
188+
189+
.card {
190+
height: auto;
191+
box-shadow: none;
192+
}
193+
194+
.card-body {
195+
padding: 0.5rem; // p-2
196+
}
197+
198+
.card-title {
199+
margin: 0 0 0.25rem;
200+
font-size: 1.25rem; // Bootstrap h5
201+
font-weight: 400;
202+
line-height: 1.2;
203+
}
204+
205+
.card-text {
206+
font-size: 0.9rem; // .small
207+
line-height: 1.5;
208+
}
209+
210+
.mt-3 {
211+
margin-top: 1rem; // Bootstrap mt-3; Tailwind's is 0.75rem
212+
}
213+
}
214+
215+
// -----------------------------------------------------------------------------
216+
// Layout fixes carried over from the pre-v1 _sass/_base.scss
217+
// -----------------------------------------------------------------------------
218+
10219
// Team member pages float the profile portrait next to the bio (see _layouts/page.liquid).
11220
// Without a clearfix the following section collapses into the floated image.
12221
.team-profile-content::after {

0 commit comments

Comments
 (0)