Skip to content

Commit 98989c1

Browse files
lamATnginxlamATnginx
committed
Cards: Replace with data-grid
1 parent a6349a2 commit 98989c1

File tree

3 files changed

+63
-50
lines changed

3 files changed

+63
-50
lines changed

‎assets/css/v2/style.css

Lines changed: 39 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -880,6 +880,9 @@ nav {
880880
[data-grid="last-third"] {
881881
grid-column: 1;
882882
}
883+
[data-grid="halve"] {
884+
grid-column: 1;
885+
}
883886

884887
@media (min-width: 55rem) {
885888
max-width: var(--content-max-width);
@@ -905,6 +908,10 @@ nav {
905908
[data-grid="last-third"] {
906909
grid-column: 8 / -1;
907910
}
911+
912+
[data-grid="halve"] {
913+
grid-column: span 6;
914+
}
908915
}
909916
}
910917

@@ -1451,7 +1458,7 @@ h6:has(a):hover {
14511458
}
14521459

14531460
/* Landing page cards */
1454-
.text-content .card-layout {
1461+
.card-layout {
14551462
grid-column: 1;
14561463

14571464
.card-section {
@@ -1463,65 +1470,53 @@ h6:has(a):hover {
14631470
font-weight: 500;
14641471
}
14651472

1466-
/* Hide all the cards past 3 if it is a featured card section */
14671473
&.featured-section {
1468-
.card-section-content.card-grid
1469-
> *:nth-child(n + 4 of div.card-container) {
1474+
/* Hide all the cards past 3 if it is a featured card section */
1475+
.card-section-content > *:nth-child(n + 4 of div.card) {
14701476
display: none;
14711477
}
14721478
}
14731479
}
1474-
}
14751480

1476-
/* Optional grid layout */
1477-
.card-grid {
1478-
display: grid;
1479-
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
1480-
gap: 1.5rem;
1481+
.card {
1482+
display: flex;
1483+
flex-direction: column;
1484+
gap: 0.5rem;
1485+
margin-bottom: 1rem;
14811486

1482-
.card-container {
1483-
border: 1px solid oklch(var(--color-codeblock-border));
1484-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1485-
padding: 1rem;
1487+
.card-header {
1488+
display: flex;
1489+
flex-direction: row;
1490+
gap: 0.5rem;
14861491

1487-
&.featured-card {
1488-
/* If there is a need for a featured card, only the featured card should be full length */
1489-
grid-column: 1 / -1;
1492+
.card-brand-icon {
1493+
height: 20px;
1494+
width: auto;
1495+
}
14901496

1491-
/* If there is a featured card AND two cards, the last one should be full length */
1492-
~ .card-container:nth-child(2n):last-child {
1493-
grid-column: 1 / -1;
1497+
h2 {
1498+
padding: 0;
1499+
margin: 0;
1500+
font-size: 1rem;
14941501
}
14951502
}
14961503
}
1497-
1498-
/* If there is no featured card, last card that is the 3rd one should be full width */
1499-
&:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
1500-
grid-column: 1 / -1;
1501-
}
15021504
}
15031505

1504-
.card-container {
1505-
display: flex;
1506-
flex-direction: column;
1507-
gap: 0.5rem;
1508-
margin-bottom: 1rem;
1509-
1510-
.card-header {
1511-
display: flex;
1512-
flex-direction: row;
1513-
gap: 0.5rem;
1506+
/* Optional grid layout */
1507+
.card-grid {
1508+
display: grid;
1509+
grid-template-columns: repeat(var(--grid-columns), 1fr);
1510+
gap: 1.5rem;
15141511

1515-
.card-brand-icon {
1516-
height: 20px;
1517-
width: auto;
1518-
}
1512+
@media (max-width: 68rem) {
1513+
grid-template-columns: 1fr;
1514+
}
15191515

1520-
h2 {
1521-
padding: 0;
1522-
margin: 0;
1523-
font-size: 1rem;
1524-
}
1516+
.card {
1517+
border: 1px solid oklch(var(--color-codeblock-border));
1518+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1519+
padding: 1rem;
15251520
}
15261521
}
15271522

‎layouts/shortcodes/card-section.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{{ $title := .Get "title" }}
22
{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
33
{{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
4+
45
{{- /* Validate the parameter strictly */ -}}
56
{{- if not (in (slice "true" "false") $showAsCardsParam) -}}
67
{{- warnf "The '<card-section>' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCardsParam -}}
@@ -15,14 +16,18 @@
1516
{{- end -}}
1617
{{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
1718
{{- $class := "card-grid" -}}
19+
20+
{{- /* Get number of cards */ -}}
21+
{{ $cardCount := len (findRE "<div\\s+class=\"card\"[\\s\\S]*?>" .Inner) }}
22+
1823
{{- /* Validate that the parent is card-layout */ -}}
1924
{{ if eq .Parent.Name "card-layout"}}
2025
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
2126
{{- if $title -}}
2227
<strong class="card-section-title">{{- $title -}}</strong>
23-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>
28+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{- .Inner -}}</div>
2429
{{ else }}
25-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>
30+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{ .Inner }}</div>
2631
{{ end }}
2732
</div>
2833
{{ else }}

‎layouts/shortcodes/card.html

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,30 @@
33
{{- $icon := .Get "icon" | default "book-open" -}}
44
{{- $brandIcon := .Get "brandIcon" -}}
55
{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
6+
{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
7+
68
{{- /* Validate the parameter strictly */ -}}
79
{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
810
{{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
911
{{- end -}}
1012
{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
11-
{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
12-
{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
13-
{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
13+
14+
{{- if not (in (slice "true" "false") $isFullSizeParam) -}}
15+
{{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
16+
{{- end -}}
17+
{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
18+
19+
{{- /* Set up the positioning */ -}}
20+
{{ $dataGrid := "" }}
21+
{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
22+
{{ $dataGrid = "wide"}}
23+
{{ else }}
24+
{{ $dataGrid = "halve"}}
25+
{{ end }}
26+
1427
{{- /* Validate that the parent is card-section and under 3 cards */ -}}
1528
{{- if (eq .Parent.Name "card-section") -}}
16-
<div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
29+
<div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
1730
{{- if $title -}}
1831
<div class="card-header">
1932
{{- if $brandIcon -}}

0 commit comments

Comments
 (0)