millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

feat: Add card formatting

Browse source
This commit is contained in:
Thomas A. Christensen II 2024-11-22 20:37:42 -06:00
parent f00b2f7acc
commit 6a0c47ff96
Signed by: millironx
GPG key ID: B7044A3432851F64
4 changed files with 192 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
assets/styles/millironx.css
View file

@ -169,6 +169,79 @@ blockquote small {
line-height: 1; line-height: 1;
} }
.card {
background-color: color-mix(
in srgb,
light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
white 10%
);
border-color: light-dark(
var(--manhattan-steel-blue),
var(--brown-swiss-gray)
);
border-width: 1.5pt;
border-radius: 0.1rem;
border-style: outset;
margin: 1rem 0;
padding: 0.5rem;
padding-top: 0;
position: relative;
display: flex;
flex-direction: column;
}
.card-link {
white-space: nowrap;
display: inline-flex;
gap: 0.375rem;
align-items: center;
text-underline-offset: 0.25em;
backface-visibility: hidden;
margin: 0 0.5em;
}
.category-button {
position: absolute;
top: 1em;
right: 1em;
display: grid;
color: white;
background-color: var(--ear-tag-red);
border-radius: 0.5em;
padding: 1em;
}
.card-title {
margin-right: 3em;
}
.card-title > a {
color: inherit;
}
.img-thumbnail {
width: 100%;
height: auto;
margin-top: 0.5rem;
}
.thumb-icon-wrapper {
margin-top: 1rem;
display: flex;
justify-content: center;
align-content: center;
}
.thumb-icon-badge {
font-size: xx-large;
justify-self: center;
align-self: center;
padding: 1.5rem 3rem;
border-radius: 3rem;
background-color: var(--ear-tag-red);
color: white;
}
/* /*
Helper classes Helper classes
*/ */
@ -254,6 +327,25 @@ blockquote small {
max-width: 50%; max-width: 50%;
} }
.card {
flex-direction: row;
}
.img-thumbnail {
margin-right: 1rem;
}
.card-header {
width: 20vw;
flex-shrink: 0;
display: flex;
justify-content: center;
}
.card-body {
margin-left: 1rem;
}
/* /*
Clearfix implementation Clearfix implementation
*/ */
@ -271,7 +363,7 @@ blockquote small {
} }
} /* end @media */ } /* end @media */
@supports (animation-timeline: scroll()) { @supports (animation-timeline: scroll()) and (animation-range) {
@keyframes sticky-header { @keyframes sticky-header {
from { from {
height: 50vh; height: 50vh;

129
layouts/_default/list.html
View file

@ -1,64 +1,91 @@
{{ define "main" }} {{ define "main" }}
{{ partial "scrolling-image-header" . }} {{ partial "scrolling-image-header" . }}
<section class="container-fluid list-main"> <section>
<div class="container px-5"> <div>
{{ block "content" . }} {{ block "content" . }}
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}
</div> </div>
<div class="row" data-masonry='{"percentPosition": true}'> {{ range .Pages }}
{{ range .Pages }} <div class="card">
<div class="col-xl-6 mb-4"> {{ partial "category-button" . }}
<div class="card">
{{ partial "category-button" . }}
{{ with .Param "fa-thumbnail" }}
<div class="card-body"> <div class="card-header">
{{ partial "list-item-thumbnail" . }} <div class="thumb-icon-wrapper">
<span class="thumb-icon-badge">
{{/* Prefer full-text links over local ones */}} <i class="fa-fw {{ . }}"></i>
{{ $link := default .RelPermalink (index .Params "link") }} </span>
<a href="{{ $link }}"><h3 class="card-title">{{ .Title }}</h3></a>
<div>
{{ dateFormat "02 Jan 2006" .Date }}
</div>
{{ range (.GetTerms "people") }}
<a
href="{{ .RelPermalink }}"
class="icon-link card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
fw-bolder
{{ end }}"
><i class="fad fa-user"></i> {{ .LinkTitle }}</a
>
{{ end }}
<p class="card-text">
{{ .Summary }}
<strong
><small
><a href="{{ $link }}">Read&nbsp;more &raquo;</a></small
></strong
>
</p>
</div>
<div class="card-footer">
{{ range (.GetTerms "tags") }}
<a href="{{ .RelPermalink }}" class="icon-link card-link"
><i class="fad fa-tag"></i> {{ .LinkTitle }}</a
>
{{ end }}
</div> </div>
</div> </div>
<!-- </card> --> {{ end }}
{{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
historically they might have been referenced as 'thumbnail' in the front
matter, or (even more historically) as 'cardImage'. Use scratch to
normalize all these different systems.
*/}}
{{ $bundleGlob := "thumbnail.*" }}
{{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
{{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
{{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
{{ with .Resources.GetMatch $allThumbnailGlob }}
{{ $thumbnail := . }}
{{ $thumbnailResized := $thumbnail.Resize "600x" }}
<div class="card-header">
<img
class="img-thumbnail"
src="{{ $thumbnailResized.RelPermalink }}"
alt="Thumbnail of {{ .Title }}"
/>
</div>
{{ end }}
<div class="card-body">
{{/* Prefer full-text links over local ones */}}
<div class="card-title">
{{ $link := default .RelPermalink (index .Params "link") }}
<a href="{{ $link }}"><h3>{{ .Title }}</h3></a>
</div>
<div>
{{ dateFormat "02 Jan 2006" .Date }}
</div>
{{ range (.GetTerms "people") }}
<a
href="{{ .RelPermalink }}"
class="card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
fw-bolder
{{ end }}"
><i class="fad fa-user"></i> {{ .LinkTitle }}</a
>
{{ end }}
<p class="card-text">
{{ .Summary }}
<strong
><small
><a href="{{ $link }}">Read&nbsp;more&nbsp;&raquo;</a></small
></strong
>
</p>
<div class="card-footer">
{{ range (.GetTerms "tags") }}
<a href="{{ .RelPermalink }}" class="icon-link card-link"
><i class="fad fa-tag"></i> {{ .LinkTitle }}</a
>
{{ end }}
</div>
</div> </div>
<!-- </col> --> </div>
{{ end }} <!-- </card> -->
</div> {{ end }}
<!-- </row> -->
</section> </section>
{{ end }} {{ end }}

45
layouts/partials/category-button.html
View file

@ -1,27 +1,24 @@
<div class="category-button"> {{ with .Param "categories" }}
{{ with .Param "categories" }} {{ range $i, $category := . }}
{{ range $i, $category := . }} {{ if eq $i 0 }}
{{ if eq $i 0 }} {{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
{{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }} {{ $iconDictionary := dict
{{ $iconDictionary := dict "video" "fad fa-video"
"video" "fad fa-video" "paper" "fad fa-book"
"paper" "fad fa-book" "poster" "fad fa-presentation"
"poster" "fad fa-presentation" "thesis" "fad fa-graduation-cap"
"thesis" "fad fa-graduation-cap" "presentation" "fad fa-podium"
"presentation" "fad fa-podium" "web" "fad fa-globe"
"web" "fad fa-globe" }}
}} {{ $categoryIcon := index $iconDictionary $category }}
{{ $categoryIcon := index $iconDictionary $category }} <a
<a class="category-button"
href="{{ .RelPermalink }}" href="{{ .RelPermalink }}"
class="btn btn-dark btn-sm" title="{{ humanize $category }}"
data-bs-toggle="tooltip" >
title="{{ humanize $category }}" <i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
> </a>
<i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
</a>
{{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> {{ end }}

26
layouts/partials/list-item-thumbnail.html
View file

@ -1,26 +0,0 @@
{{ with .Param "fa-thumbnail" }}
<div class="thumb-icon-wrapper mb-3">
<span class="badge thumb-icon-badge rounded-pill bg-primary py-4 px-5">
<i class="fa-fw {{ . }}"></i>
</span>
</div>
{{ end }}
{{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
historically they might have been referenced as 'thumbnail' in the front
matter, or (even more historically) as 'cardImage'. Use scratch to
normalize all these different systems.
*/}}
{{ $bundleGlob := "thumbnail.*" }}
{{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
{{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
{{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
{{ with .Resources.GetMatch $allThumbnailGlob }}
{{ $thumbnail := . }}
{{ $thumbnailResized := $thumbnail.Resize "600x" }}
<img
class="img img-thumbnail float-start me-3 md-max-width-33"
src="{{ $thumbnailResized.RelPermalink }}"
alt="Thumbnail of {{ .Title }}"
/>
{{ end }}