Skip to content

Commit a813cc5

Browse files
lamATnginxlamATnginx
authored
Card refactor (#339)
* Cards: Removed card-layout shortcode + replaced showAsCards with new param name * Cards: Removed showAsSingleRow option
1 parent aa2d1e4 commit a813cc5

File tree

7 files changed

+137
-203
lines changed

7 files changed

+137
-203
lines changed

‎assets/css/v2/style.css‎

Lines changed: 70 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1531,119 +1531,107 @@ a:hover {
15311531
}
15321532

15331533
/* Product landing page cards */
1534-
.card-layout {
1534+
.card-section {
15351535
display: flex;
15361536
flex-direction: column;
15371537
gap: 1.5rem;
1538-
margin-block-start: 0.5rem;
15391538

1540-
.card-section {
1539+
&.featured-section {
1540+
/* Hide all the cards past 3 if it is a featured card section */
1541+
.card-section-content > *:nth-child(n + 4 of a.card) {
1542+
display: none;
1543+
}
1544+
}
1545+
1546+
.card-section-title {
1547+
font-weight: 500;
1548+
font-size: var(--font-step-2);
1549+
display: block;
1550+
}
1551+
1552+
.card-section-content {
15411553
display: flex;
15421554
flex-direction: column;
1543-
gap: 1.5rem;
1555+
gap: 1rem;
15441556

1545-
&.featured-section {
1546-
/* Hide all the cards past 3 if it is a featured card section */
1547-
.card-section-content > *:nth-child(n + 4 of a.card) {
1548-
display: none;
1557+
&.card-grid {
1558+
display: grid;
1559+
grid-template-columns: repeat(var(--grid-columns), 1fr);
1560+
gap: 1.5rem;
1561+
1562+
@media (max-width: 55rem) {
1563+
grid-template-columns: 1fr;
15491564
}
1550-
}
15511565

1552-
.card-section-title {
1553-
font-weight: 500;
1554-
font-size: var(--font-step-2);
1555-
display: block;
1566+
.card {
1567+
border: 1px solid oklch(var(--color-codeblock-border));
1568+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1569+
padding: 1rem;
1570+
order: 2;
1571+
}
15561572
}
15571573

1558-
.card-section-content {
1559-
display: flex;
1560-
flex-direction: column;
1561-
gap: 1rem;
1562-
1563-
&.card-grid {
1564-
display: grid;
1565-
grid-template-columns: repeat(var(--grid-columns), 1fr);
1566-
gap: 1.5rem;
1567-
1568-
@media (max-width: 55rem) {
1569-
grid-template-columns: 1fr;
1570-
}
1574+
.card {
1575+
color: oklch(var(--color-foreground));
1576+
text-decoration: none;
15711577

1572-
.card {
1573-
border: 1px solid oklch(var(--color-codeblock-border));
1574-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1575-
padding: 1rem;
1576-
order: 2;
1577-
}
1578+
.card-container {
1579+
display: flex;
1580+
flex-direction: column;
1581+
gap: 0.5rem;
15781582
}
15791583

1580-
.card {
1581-
color: oklch(var(--color-foreground));
1582-
text-decoration: none;
1584+
.card-header {
1585+
display: flex;
1586+
flex-direction: row;
1587+
gap: 1rem;
1588+
align-items: center;
1589+
color: oklch(var(--color-brand));
15831590

1584-
.card-container {
1585-
display: flex;
1586-
flex-direction: column;
1587-
gap: 0.5rem;
1591+
img.card-brand-icon {
1592+
height: 1.5rem;
1593+
width: auto;
15881594
}
15891595

1590-
.card-header {
1591-
display: flex;
1592-
flex-direction: row;
1593-
gap: 1rem;
1594-
align-items: center;
1595-
color: oklch(var(--color-brand));
1596-
1597-
img.card-brand-icon {
1598-
height: 1.5rem;
1599-
width: auto;
1600-
}
1601-
1602-
h2 {
1603-
padding: 0;
1604-
margin: 0;
1605-
font-size: var(--font-step-1);
1606-
}
1596+
h2 {
1597+
padding: 0;
1598+
margin: 0;
1599+
font-size: var(--font-step-1);
16071600
}
16081601
}
16091602
}
16101603
}
16111604
}
16121605

16131606
/* Home landing page cards */
1614-
.homepage .card-layout {
1615-
margin-block-end: 3rem;
1616-
gap: 3rem;
1607+
.homepage .card-section {
1608+
.card-section-content.card-grid {
1609+
grid-template-columns: 1fr;
16171610

1618-
.card-section {
1619-
.card-section-content.card-grid {
1620-
grid-template-columns: 1fr;
1611+
@media (min-width: 70rem) {
1612+
grid-template-columns: repeat(12, 1fr);
1613+
grid-auto-rows: 1fr;
1614+
}
16211615

1622-
@media (min-width: 70rem) {
1623-
grid-template-columns: repeat(12, 1fr);
1624-
grid-auto-rows: 1fr;
1625-
}
1616+
.card {
1617+
padding: 1rem 2rem 2rem 2rem;
16261618

1627-
.card {
1628-
padding: 1rem 2rem 2rem 2rem;
1629-
1630-
.card-container {
1631-
.card-header {
1632-
justify-content: flex-start;
1619+
.card-container {
1620+
.card-header {
1621+
justify-content: flex-start;
16331622

1634-
.lucide,
1635-
.card-brand-icon {
1636-
height: 40px;
1637-
width: auto;
1638-
}
1623+
.lucide,
1624+
.card-brand-icon {
1625+
height: 40px;
1626+
width: auto;
16391627
}
16401628
}
1629+
}
16411630

1642-
&:hover {
1643-
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1644-
text-decoration-color: oklch(var(--color-background));
1645-
border: 1px solid oklch(var(--color-brand) / 0.8);
1646-
}
1631+
&:hover {
1632+
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1633+
text-decoration-color: oklch(var(--color-background));
1634+
border: 1px solid oklch(var(--color-brand) / 0.8);
16471635
}
16481636
}
16491637
}

‎exampleSite/content/_index.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ description:
55

66
## NGINX Hugo Theme Documentation
77
Documentation for hugo theme
8-
{{<card-layout>}}
9-
{{<card-section showAsCards="true">}}
10-
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
11-
See explanations and usages of shortcodes
12-
{{</card >}}
13-
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
14-
See a live example of theme components
15-
{{</card >}}
16-
{{</card-section>}}
17-
{{</card-layout>}}
8+
{{<card-section>}}
9+
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
10+
See explanations and usages of shortcodes
11+
{{</card >}}
12+
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
13+
See a live example of theme components
14+
{{</card >}}
15+
{{</card-section>}}
1816

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,25 +35,21 @@ This is a compilation of all our shortcodes to show how they look, function, res
3535
[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid."
3636
[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature."
3737

38-
{{<card-layout >}}
39-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
40-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
41-
All shortcodes in one page.
42-
{{</card >}}
43-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
44-
Examples for call-out shortcode
45-
{{</card >}}
46-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
47-
Examples for codeblock shortcode
48-
{{</card >}}
49-
{{</card-section>}}
50-
{{</card-layout >}}
38+
{{<card-section isFeaturedSection="true">}}
39+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
40+
All shortcodes in one page.
41+
{{</card >}}
42+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
43+
Examples for call-out shortcode
44+
{{</card >}}
45+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
46+
Examples for codeblock shortcode
47+
{{</card >}}
48+
{{</card-section>}}
5149

5250
## Other Content
5351
[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text."
5452

55-
{{<card-layout >}}
56-
{{<card-section title="NGINX" showAsCards="true" >}}
53+
{{<card-section title="NGINX" >}}
5754
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" />}}
58-
{{</card-section >}}
59-
{{</card-layout >}}
55+
{{</card-section >}}

‎exampleSite/content/test-product/cards/permitted.md‎

Lines changed: 36 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,24 @@ weight: 100
66
## General usage
77
The structure of a card looks like the following:
88
```plaintext
9-
<card-layout >
10-
<card-section>
11-
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
12-
...
13-
<card>SOME CONTENT<\card>
14-
</card-section>
15-
</card-layout >
9+
<card-section>
10+
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON">SOME_CONTENT<\card>
11+
...
12+
<card>...<\card>
13+
</card-section>
1614
```
1715

1816
and will render as the following:
1917
<div data-testid="cards-test__basic">
20-
{{<card-layout >}}
21-
{{<card-section>}}
22-
{{<card title="SOME_TITLE">}}
23-
SOME CONTENT
24-
{{</card >}}
25-
{{</card-section>}}
26-
{{</card-layout >}}
18+
{{<card-section>}}
19+
{{<card title="SOME_TITLE">}}
20+
SOME CONTENT
21+
{{</card >}}
22+
{{</card-section>}}
2723
</div>
2824

25+
Essentially, you have some `card` shortcodes that can only be put inside a `card-section` shortcode to group content together better.
26+
2927
### Params
3028
To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`.
3129

@@ -41,56 +39,38 @@ To support customization, there are also some params you can add to the shortcod
4139
* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
4240
* Usage: `<card isFullSize="true"...>`
4341

44-
For the `<card-section>`, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`.
42+
For the `<card-section>`, there are some params you can add such as `title` and `isFeaturedSection`.
4543
* `title` - Title of the section.
4644
<br>
4745
* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false.
48-
<br>
49-
* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false.
5046

5147
### Additional Information
5248
While it may come immediate, you can't use a `<card>` shortcode on its own in your markdown or else the build will fail. This is because if you call a card, there is no way to structure it in a writer-friendly customizable way.
5349

54-
## Show as cards
55-
As you can see from the above example in 'General usage', it renders as a plain box that does not resemble a card. To change the appearance and render as a card, use the param `showAsCards` in the shortcode `<card-section>`. The usage as seen below:
56-
```plaintext
57-
<card-layout >
58-
<card-section showAsCards="true">
59-
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
60-
...
61-
<card>SOME CONTENT<\card>
62-
</card-section>
63-
</card-layout >
64-
```
65-
and will render as the following:
66-
<div data-testid="cards-test__showAsCards">
67-
{{<card-layout >}}
68-
{{<card-section showAsCards="true">}}
69-
{{<card title="SOME_TITLE">}}
70-
SOME CONTENT
71-
{{</card >}}
72-
{{</card-section>}}
73-
{{</card-layout >}}
74-
</div>
75-
7650
## Featured Section
77-
Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this block of cards can contain only up to three cards.
51+
Denoted by the param `isFeaturedSection` in the shortcode `<card-section>`, this block of cards can contain only up to three cards. The usage as seen below:
52+
```plaintext
53+
<card-section isFeaturedSection="true">
54+
<card ... >...</card>
55+
<card ... >...</card>
56+
<card ... >...</card>
57+
<card ... >...</card>
58+
</card-section>
59+
```
7860

7961
<div data-testid="cards-test__featuredSection">
80-
{{<card-layout >}}
81-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
82-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
83-
All shortcodes in one page.
84-
{{</card >}}
85-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
86-
Examples for call-out shortcode
87-
{{</card >}}
88-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
89-
Examples for codeblock shortcode
90-
{{</card >}}
91-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
92-
Examples for codeblock shortcode
93-
{{</card >}}
94-
{{</card-section>}}
95-
{{</card-layout >}}
62+
{{<card-section isFeaturedSection="true">}}
63+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
64+
All shortcodes in one page.
65+
{{</card >}}
66+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
67+
Examples for call-out shortcode
68+
{{</card >}}
69+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
70+
Examples for codeblock shortcode
71+
{{</card >}}
72+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
73+
Examples for codeblock shortcode
74+
{{</card >}}
75+
{{</card-section>}}
9676
</div>

‎layouts/shortcodes/card-layout.html‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)