Skip to content

Commit 96388aa

Browse files
lamATnginxlamATnginx
authored
Fix Card + Refactor for readability (#310)
* Card: Fix issue with absolute url + icon path + reordered CSS * Card: Revert first slash error
1 parent ed1e035 commit 96388aa

File tree

5 files changed

+99
-82
lines changed

5 files changed

+99
-82
lines changed

‎assets/css/v2/style.css‎

Lines changed: 90 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -776,17 +776,6 @@ nav {
776776
margin: 0 auto;
777777
padding: 1rem;
778778

779-
a {
780-
color: oklch(var(--color-foreground));
781-
text-decoration-color: oklch(var(--color-background));
782-
783-
&:hover {
784-
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
785-
text-decoration-color: oklch(var(--color-background));
786-
border: 1px solid oklch(var(--color-brand) / 0.8);
787-
}
788-
}
789-
790779
.headerlink {
791780
cursor: default;
792781
pointer-events: none;
@@ -1448,98 +1437,125 @@ h6:has(a):hover {
14481437
}
14491438

14501439
/* Landing page cards */
1451-
1452-
.homepage {
1453-
.card-grid {
1454-
grid-template-columns: 1fr;
1455-
1456-
@media (min-width: 70rem) {
1457-
grid-template-columns: repeat(12, 1fr);
1458-
}
1459-
}
1460-
1461-
.card-layout .card-grid .card {
1462-
padding: 1rem 2rem 2rem 2rem;
1463-
1464-
.lucide,
1465-
.card-brand-icon {
1466-
height: 40px;
1467-
width: auto;
1468-
}
1469-
}
1470-
}
1471-
14721440
.card-layout {
14731441
display: flex;
14741442
flex-direction: column;
14751443
gap: 1.5rem;
14761444

14771445
.card-section {
1478-
strong {
1479-
font-weight: 500;
1480-
font-size: var(--font-step-2);
1481-
display: block;
1482-
margin-bottom: 1rem;
1483-
}
1446+
display: flex;
1447+
flex-direction: column;
1448+
gap: 1.5rem;
14841449

14851450
&.featured-section {
14861451
/* Hide all the cards past 3 if it is a featured card section */
14871452
.card-section-content > *:nth-child(n + 4 of a.card) {
14881453
display: none;
14891454
}
14901455
}
1491-
}
14921456

1493-
.card {
1494-
color: oklch(var(--color-foreground));
1495-
text-decoration: none;
1496-
order: 2;
1497-
1498-
&.featured-card {
1499-
order: 1;
1457+
.card-section-title {
1458+
font-weight: 500;
1459+
font-size: var(--font-step-2);
1460+
display: block;
15001461
}
15011462

1502-
.card-container {
1463+
.card-section-content {
15031464
display: flex;
15041465
flex-direction: column;
1505-
gap: 0.5rem;
1506-
}
1507-
1508-
.card-header {
1509-
display: flex;
1510-
flex-direction: row;
15111466
gap: 1rem;
1512-
align-items: center;
1513-
color: oklch(var(--color-brand));
15141467

1515-
.card-brand-icon {
1516-
height: 20px;
1517-
width: auto;
1468+
&.card-grid {
1469+
display: grid;
1470+
grid-template-columns: repeat(var(--grid-columns), 1fr);
1471+
gap: 1.5rem;
1472+
1473+
@media (max-width: 55rem) {
1474+
grid-template-columns: 1fr;
1475+
}
1476+
1477+
.card {
1478+
border: 1px solid oklch(var(--color-codeblock-border));
1479+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1480+
padding: 1rem;
1481+
order: 2;
1482+
1483+
&.featured-card {
1484+
order: 1;
1485+
}
1486+
}
15181487
}
15191488

1520-
h2 {
1521-
padding: 0;
1522-
margin: 0;
1523-
font-size: var(--font-step-1);
1489+
.card {
1490+
color: oklch(var(--color-foreground));
1491+
text-decoration: none;
1492+
1493+
.card-container {
1494+
display: flex;
1495+
flex-direction: column;
1496+
gap: 0.5rem;
1497+
}
1498+
1499+
.card-header {
1500+
display: flex;
1501+
flex-direction: row;
1502+
gap: 1rem;
1503+
align-items: center;
1504+
color: oklch(var(--color-brand));
1505+
1506+
img.card-brand-icon {
1507+
height: 1.5rem;
1508+
width: auto;
1509+
}
1510+
1511+
h2 {
1512+
padding: 0;
1513+
margin: 0;
1514+
font-size: var(--font-step-1);
1515+
}
1516+
}
15241517
}
15251518
}
15261519
}
15271520
}
15281521

1529-
/* Optional grid layout */
1530-
.card-grid {
1531-
display: grid;
1532-
grid-template-columns: repeat(var(--grid-columns), 1fr);
1533-
gap: 1.5rem;
1522+
.homepage .card-layout {
1523+
margin-bottom: 3rem;
1524+
gap: 3rem;
15341525

1535-
@media (max-width: 55rem) {
1536-
grid-template-columns: 1fr;
1537-
}
1526+
.card-section {
1527+
.card-section-content.card-grid {
1528+
grid-template-columns: 1fr;
15381529

1539-
.card {
1540-
border: 1px solid oklch(var(--color-codeblock-border));
1541-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1542-
padding: 1rem;
1530+
@media (min-width: 70rem) {
1531+
grid-template-columns: repeat(12, 1fr);
1532+
grid-auto-rows: 1fr;
1533+
}
1534+
1535+
.card {
1536+
padding: 1rem 2rem 2rem 2rem;
1537+
1538+
.card-container {
1539+
height: 7rem;
1540+
justify-content: space-around;
1541+
1542+
.card-header {
1543+
justify-content: flex-start;
1544+
1545+
.card-brand-icon {
1546+
height: 40px;
1547+
width: auto;
1548+
}
1549+
}
1550+
}
1551+
1552+
&:hover {
1553+
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1554+
text-decoration-color: oklch(var(--color-background));
1555+
border: 1px solid oklch(var(--color-brand) / 0.8);
1556+
}
1557+
}
1558+
}
15431559
}
15441560
}
15451561

‎exampleSite/content/_index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ description:
77
Documentation for hugo theme
88
{{<card-layout>}}
99
{{<card-section showAsCards="true">}}
10-
{{<card title="Test Product" titleUrl="test-product/" icon="test-tubes" isLanding="true">}}
10+
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
1111
See explanations and usages of shortcodes
1212
{{</card >}}
13-
{{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB" isLanding="true">}}
13+
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
1414
See a live example of theme components
1515
{{</card >}}
1616
{{</card-section>}}

‎exampleSite/content/test-product/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ This is a compilation of all our shortcodes to show how they look, function, res
5454

5555
{{<card-layout >}}
5656
{{<card-section title="NGINX" showAsCards="true" >}}
57-
{{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
57+
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" >}}
5858
Installing NGINX
5959
{{</card >}}
6060
{{</card-section >}}

‎layouts/shortcodes/card-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
{{- /* Validate that the parent is card-layout */ -}}
2424
{{ if eq .Parent.Name "card-layout"}}
25-
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
25+
<div class="card-section{{if eq $isFeaturedSection "true"}} featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
2626
{{- if $title -}}
2727
<strong class="card-section-title">{{- $title -}}</strong>
2828
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>

‎layouts/shortcodes/card.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@
3333
{{ end }}
3434

3535
{{- /* Build the url */ -}}
36+
{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
3637
{{ if eq (substr $titleUrl 0 1) "/" }}
37-
{{ $suggestedUrlFix := substr $titleUrl 1 }}
38-
{{ errorf "Please do not start the param 'titleUrl' with a forward slash. Got: '%s', use '%s' instead." $titleUrl $suggestedUrlFix }}
38+
{{ $url = printf "%s%s" .Site.BaseURL (substr $titleUrl 1) }}
39+
{{ else if (strings.Contains $titleUrl "https") }}
40+
{{ $url = $titleUrl }}
3941
{{ end }}
40-
{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
4142

4243
{{- /* Validate that the parent is card-section and under 3 cards */ -}}
4344
{{- if (eq .Parent.Name "card-section") -}}
@@ -46,7 +47,7 @@
4647
{{- if $title -}}
4748
<div class="card-header">
4849
{{- if $brandIcon -}}
49-
<img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
50+
<img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
5051
{{- else if $icon -}}
5152
{{ partial "lucide" (dict "context" . "icon" $icon) }}
5253
{{- end -}}

0 commit comments

Comments
 (0)