feat/css-cleanup #2
4 changed files with 192 additions and 102 deletions
|
|
@ -169,6 +169,79 @@ blockquote small {
|
|||
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
|
||||
*/
|
||||
|
|
@ -254,6 +327,25 @@ blockquote small {
|
|||
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
|
||||
*/
|
||||
|
|
@ -271,7 +363,7 @@ blockquote small {
|
|||
}
|
||||
} /* end @media */
|
||||
|
||||
@supports (animation-timeline: scroll()) {
|
||||
@supports (animation-timeline: scroll()) and (animation-range) {
|
||||
@keyframes sticky-header {
|
||||
from {
|
||||
height: 50vh;
|
||||
|
|
|
|||
|
|
@ -1,64 +1,91 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "scrolling-image-header" . }}
|
||||
<section class="container-fluid list-main">
|
||||
<div class="container px-5">
|
||||
<section>
|
||||
<div>
|
||||
{{ block "content" . }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="row" data-masonry='{"percentPosition": true}'>
|
||||
{{ range .Pages }}
|
||||
<div class="col-xl-6 mb-4">
|
||||
<div class="card">
|
||||
{{ partial "category-button" . }}
|
||||
{{ range .Pages }}
|
||||
<div class="card">
|
||||
{{ partial "category-button" . }}
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
{{ partial "list-item-thumbnail" . }}
|
||||
|
||||
{{/* Prefer full-text links over local ones */}}
|
||||
{{ $link := default .RelPermalink (index .Params "link") }}
|
||||
<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 more »</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 }}
|
||||
{{ with .Param "fa-thumbnail" }}
|
||||
<div class="card-header">
|
||||
<div class="thumb-icon-wrapper">
|
||||
<span class="thumb-icon-badge">
|
||||
<i class="fa-fw {{ . }}"></i>
|
||||
</span>
|
||||
</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 more »</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>
|
||||
<!-- </col> -->
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- </row> -->
|
||||
</div>
|
||||
<!-- </card> -->
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
<div class="category-button">
|
||||
{{ with .Param "categories" }}
|
||||
{{ range $i, $category := . }}
|
||||
{{ if eq $i 0 }}
|
||||
{{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
|
||||
{{ $iconDictionary := dict
|
||||
"video" "fad fa-video"
|
||||
"paper" "fad fa-book"
|
||||
"poster" "fad fa-presentation"
|
||||
"thesis" "fad fa-graduation-cap"
|
||||
"presentation" "fad fa-podium"
|
||||
"web" "fad fa-globe"
|
||||
}}
|
||||
{{ $categoryIcon := index $iconDictionary $category }}
|
||||
<a
|
||||
href="{{ .RelPermalink }}"
|
||||
class="btn btn-dark btn-sm"
|
||||
data-bs-toggle="tooltip"
|
||||
title="{{ humanize $category }}"
|
||||
>
|
||||
<i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with .Param "categories" }}
|
||||
{{ range $i, $category := . }}
|
||||
{{ if eq $i 0 }}
|
||||
{{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
|
||||
{{ $iconDictionary := dict
|
||||
"video" "fad fa-video"
|
||||
"paper" "fad fa-book"
|
||||
"poster" "fad fa-presentation"
|
||||
"thesis" "fad fa-graduation-cap"
|
||||
"presentation" "fad fa-podium"
|
||||
"web" "fad fa-globe"
|
||||
}}
|
||||
{{ $categoryIcon := index $iconDictionary $category }}
|
||||
<a
|
||||
class="category-button"
|
||||
href="{{ .RelPermalink }}"
|
||||
title="{{ humanize $category }}"
|
||||
>
|
||||
<i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
Loading…
Reference in a new issue