Improve taxonomy handling
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
55
assets/sass/details.scss
Normal file
55
assets/sass/details.scss
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
main.with-details {
|
||||||
|
max-width: $width-wide;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
> .content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
$width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: $width-sidebar $width-content $width-sidebar;
|
||||||
|
column-gap: 2rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.length {
|
||||||
|
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||||
|
margin: 0.5rem 0 0.5rem 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $width-wide) {
|
||||||
|
main.with-details {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
> .details {
|
||||||
|
max-width: $width-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $width-mobile) {
|
||||||
|
main.with-details {
|
||||||
|
> .details {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .content {
|
||||||
|
padding: 0 1rem 1rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@@ -36,6 +36,7 @@
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
margin: 0;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -7,22 +7,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
.date {
|
|
||||||
color: var(--text-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.captioned-image {
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero + .content {
|
.hero + .content {
|
||||||
|
@@ -1,64 +1,17 @@
|
|||||||
main.with-meta {
|
|
||||||
max-width: $width-wide;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
$width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: $width-sidebar $width-content $width-sidebar;
|
|
||||||
column-gap: 2rem;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.length {
|
|
||||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
|
||||||
margin: 0.25rem 0;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $width-wide) {
|
|
||||||
main.with-meta {
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> .meta {
|
|
||||||
max-width: $width-content;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $width-mobile) {
|
|
||||||
main.with-meta {
|
|
||||||
> .meta {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
padding: 0 1rem 1rem 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
.post {
|
.post {
|
||||||
display: block;
|
display: block;
|
||||||
color: inherit;
|
|
||||||
|
>a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
>a:hover {
|
||||||
|
color: var(--text-800);
|
||||||
|
}
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-top: 4rem;
|
margin: 4rem 0 4rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@@ -67,38 +20,20 @@ main.with-meta {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
margin-top: 0.5rem;
|
margin: 0.5rem 0 0.5rem 0;
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
.date {
|
|
||||||
color: var(--text-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading-anchor {
|
.heading-anchor {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post:hover .title,
|
|
||||||
.post:hover .summary {
|
|
||||||
color: var(--text-800);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $width-mobile) {
|
@media (max-width: $width-mobile) {
|
||||||
.list {
|
.list {
|
||||||
.post {
|
.post {
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
margin-top: 2rem;
|
margin: 2rem 0 2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@@ -11,7 +11,9 @@ $width-wide: 75rem;
|
|||||||
@import "blockquote";
|
@import "blockquote";
|
||||||
@import "code";
|
@import "code";
|
||||||
@import "table";
|
@import "table";
|
||||||
|
@import "meta";
|
||||||
|
|
||||||
|
@import "details";
|
||||||
@import "list";
|
@import "list";
|
||||||
@import "gallery";
|
@import "gallery";
|
||||||
|
|
||||||
|
20
assets/sass/meta.scss
Normal file
20
assets/sass/meta.scss
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
.meta {
|
||||||
|
margin: 1rem 0 1rem 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: var(--secondary-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag:hover {
|
||||||
|
color: var(--secondary-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: var(--text-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
color: color-mix(in srgb, var(--text) 50%, var(--background));
|
||||||
|
}
|
||||||
|
}
|
@@ -1,8 +1,8 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{ $withMeta := default true .Params.withMeta }}
|
{{ $details := default true .Params.details }}
|
||||||
<main class="{{- if $withMeta -}}with-meta{{- end -}}">
|
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||||
{{ if $withMeta }}
|
{{ if $details }}
|
||||||
{{ partial "components/list/meta.html" . }}
|
{{ partial "components/list/details.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{{ partial "posts/list.html" . }}
|
{{ partial "posts/list.html" . }}
|
||||||
|
@@ -1,2 +1 @@
|
|||||||
<sub>{{ .Get 0 | markdownify }}</sub>
|
<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}
|
||||||
{{- /* chomp trailing newline */ -}}
|
|
||||||
|
@@ -1,2 +1 @@
|
|||||||
<sup>{{ .Get 0 | markdownify }}</sup>
|
<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}
|
||||||
{{- /* chomp trailing newline */ -}}
|
|
||||||
|
@@ -1,10 +1,16 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{ $withMeta := default true .Params.withMeta }}
|
{{ $details := default true .Params.details }}
|
||||||
<main class="{{- if $withMeta -}}with-meta{{- end -}}">
|
<main class="{{- if $details -}}with-details{{- end -}}">
|
||||||
{{ if $withMeta }}
|
{{ if $details }}
|
||||||
{{ partial "components/list/meta.html" . }}
|
{{ partial "components/list/details.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
|
<div
|
||||||
|
class="{{- if $details -}}
|
||||||
|
content
|
||||||
|
{{- else -}}
|
||||||
|
content wide
|
||||||
|
{{- end -}}"
|
||||||
|
>
|
||||||
{{ partial "gallery/list.html" . }}
|
{{ partial "gallery/list.html" . }}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@@ -1,9 +1,5 @@
|
|||||||
<section class="hero">
|
<section class="hero">
|
||||||
<h1 class="title">{{ .Title }}</h1>
|
<h1 class="title">{{ .Title }}</h1>
|
||||||
<div class="meta">
|
{{ partial "components/meta/index.html" . }}
|
||||||
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
|
||||||
·
|
|
||||||
<span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
|
|
||||||
</div>
|
|
||||||
{{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
|
{{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
|
||||||
</section>
|
</section>
|
||||||
|
@@ -9,8 +9,8 @@
|
|||||||
{{- if reflect.IsMap $image -}}
|
{{- if reflect.IsMap $image -}}
|
||||||
{{- $src = $image.src | default "" -}}
|
{{- $src = $image.src | default "" -}}
|
||||||
{{- $caption = $image.caption | default "" -}}
|
{{- $caption = $image.caption | default "" -}}
|
||||||
{{- $title = $image.title | default $caption | default "" -}}
|
{{- $title = $image.title | default $caption | default "" | plainify -}}
|
||||||
{{- $alt = $image.alt | default $title | default "" -}}
|
{{- $alt = $image.alt | default $title | default "" | plainify -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- if $src -}}
|
{{- if $src -}}
|
||||||
@@ -36,6 +36,7 @@
|
|||||||
{{- $thumb = $original | images.Filter (images.Process "webp q75") -}}
|
{{- $thumb = $original | images.Filter (images.Process "webp q75") -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
|
|
||||||
<figure class="captioned-image lightbox">
|
<figure class="captioned-image lightbox">
|
||||||
<a
|
<a
|
||||||
href="{{- $original.RelPermalink -}}"
|
href="{{- $original.RelPermalink -}}"
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
<section class="meta">
|
<section class="details">
|
||||||
<h1>{{ .Page.Title }}</h1>
|
<h1 class="title">{{ .Page.Title }}</h1>
|
||||||
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
|
<p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</section>
|
</section>
|
18
layouts/partials/components/meta/index.html
Normal file
18
layouts/partials/components/meta/index.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<div class="meta">
|
||||||
|
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
||||||
|
·
|
||||||
|
{{ if eq .Kind "page" }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
|
||||||
|
·
|
||||||
|
{{ end }}
|
||||||
|
<span class="duration">
|
||||||
|
{{ printf "%d min. read" .ReadingTime }}
|
||||||
|
</span>
|
||||||
|
{{ else }}
|
||||||
|
{{ $count := len .Pages }}
|
||||||
|
<span class="duration">
|
||||||
|
{{ printf "%d %s" $count (cond (eq $count 1) "item" "items") }}
|
||||||
|
</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
@@ -1,21 +1,26 @@
|
|||||||
{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
|
{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
|
||||||
|
|
||||||
|
|
||||||
<div class="postnav">
|
<div class="postnav">
|
||||||
{{ with $pages.Prev . }}
|
{{ with $pages.Prev . }}
|
||||||
<a href="{{ .RelPermalink }}">
|
{{ if eq .Kind "page" }}
|
||||||
<div class="previous">
|
<a href="{{ .RelPermalink }}">
|
||||||
<p class="caption">Previous Post</p>
|
<div class="previous">
|
||||||
<p class="title">{{ .Title }}</p>
|
<p class="caption">Previous Post</p>
|
||||||
</div>
|
<p class="title">{{ .Title }}</p>
|
||||||
</a>
|
</div>
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ with $pages.Next . }}
|
{{ with $pages.Next . }}
|
||||||
<a href="{{ .RelPermalink }}">
|
{{ if eq .Kind "page" }}
|
||||||
<div class="next">
|
<a href="{{ .RelPermalink }}">
|
||||||
<p class="caption">Next Post</p>
|
<div class="next">
|
||||||
<p class="title">{{ .Title }}</p>
|
<p class="caption">Next Post</p>
|
||||||
</div>
|
<p class="title">{{ .Title }}</p>
|
||||||
</a>
|
</div>
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
@@ -1,15 +1,13 @@
|
|||||||
<div class="list">
|
<div class="list">
|
||||||
{{ range sort .Pages "Date" "desc" }}
|
{{ range sort .Pages "Date" "desc" }}
|
||||||
{{ if not .Params.private }}
|
{{ if not .Params.private }}
|
||||||
<a href="{{- .RelPermalink -}}" class="post">
|
<div class="post">
|
||||||
<h1 class="title">{{ .Title }}</h1>
|
<a href="{{- .RelPermalink -}}">
|
||||||
<div class="summary">{{ .Summary | plainify }}</div>
|
<h1 class="title">{{ .Title }}</h1>
|
||||||
<div class="meta">
|
<div class="summary">{{ .Summary | plainify }}</div>
|
||||||
<span class="date">{{ .Date | time.Format ":date_medium" }}</span>
|
</a>
|
||||||
·
|
{{ partial "components/meta/index.html" . }}
|
||||||
<span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
|
</div>
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user