Rename .section to .section-card

To keep the classes more organized, by having better scoping of classes.

Fixes #121
This commit is contained in:
2025-12-24 01:29:09 -06:00
parent f7dadb821c
commit d6c8dd65de
2 changed files with 13 additions and 13 deletions

View File

@@ -618,7 +618,7 @@ figcaption {
gap: 10px; gap: 10px;
} }
.section { .section-card {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1); color: var(--text-1);
border-radius: 12px; border-radius: 12px;
@@ -628,33 +628,33 @@ figcaption {
justify-content: space-between; justify-content: space-between;
} }
.section:hover { .section-card:hover {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2); color: var(--text-2);
} }
.section-title { .section-card-title {
margin: 10px 0; margin: 10px 0;
} }
.section-anchor { .section-card-anchor {
color: inherit; color: inherit;
} }
.section-anchor:hover { .section-card-anchor:hover {
text-decoration: none; text-decoration: none;
} }
.section-description { .section-card-description {
margin-bottom: 5px; margin-bottom: 5px;
} }
.section-arrow { .section-card-arrow {
margin-block: auto; margin-block: auto;
max-height: fit-content; max-height: fit-content;
float: right; float: right;
} }
.section-arrow > .icon { .section-card-arrow > .icon {
height: 48px; height: 48px;
width: 48px; width: 48px;
} }

View File

@@ -1,19 +1,19 @@
<a class="section-anchor" href="{{ .Permalink }}"> <a class="section-card-anchor" href="{{ .Permalink }}">
<div class="section"> <div class="section-card">
<div> <div>
<h2 class="section-title"> <h2 class="section-card-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }} {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h2> </h2>
{{ with .Summary }} {{ with .Summary }}
<div class="section-description"> <div class="section-card-description">
{{ . }} {{ . }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="section-arrow"> <div class="section-card-arrow">
{{ partial "icon.html" "arrow-right" }} {{ partial "icon.html" "arrow-right" }}
</div> </div>
</div> </div>