diff --git a/assets/css/010_colors.css b/assets/css/010_colors.css index e789be9..3daa877 100644 --- a/assets/css/010_colors.css +++ b/assets/css/010_colors.css @@ -47,7 +47,7 @@ :root { --background-color: light-dark(var(--gray7), var(--gray1)); - --hr-color: light-dark(var(--gray5), var(--gray2)); + --hr-color: var(--text-color-secondary); --text-color-primary: light-dark(var(--gray1), var(--gray7)); --text-color-secondary: light-dark(var(--gray4), var(--gray5)); --text-color-light: light-dark(var(--gray5), var(--gray4)); diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css index 8de79d4..d8b6452 100644 --- a/assets/css/010_spacing.css +++ b/assets/css/010_spacing.css @@ -51,17 +51,30 @@ h1, h2, h3, h4, h5, h6 { } hr { - margin-block: var(--space-m); + margin-block: var(--space-l); } -p + p { +:is(dl, p, ol, ul) + :is(dl, p, ol, ul) { margin-block-start: var(--space-paragraph); } /* Figures */ -{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--main-column, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}} +{{- + $elementsWithXLBlockMargins := delimit + (slice + "blockquote" + "table" + ".codeblock" + ".content-grid" + ".figure" + ".highlight" + ".instagram-media" + ".two-column:has(figure:first-child + figure:last-child)" + ) + ", " +-}} p + :is({{ $elementsWithXLBlockMargins }}) { margin-block-start: var(--space-xl); diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css index 35d8dfa..05d5f3e 100644 --- a/assets/css/010_structure.css +++ b/assets/css/010_structure.css @@ -98,7 +98,7 @@ body { gap: var(--space-xl) 0; } -:is(.list-header, p) { +.list-header, p { grid-column: main-start / main-end; } @@ -106,14 +106,10 @@ body { grid-column: main-start / main-end; } -.content > :is(.figure--image, .codeblock) { +.content > .codeblock { grid-column: wide-gutter-start / wide-gutter-end; } -figure, img { - max-width: 100%; -} - img { object-fit: contain; } @@ -142,3 +138,38 @@ section.content--small-right-column { margin-block: 0; } } + + + + + +/********************* + * 2 COLUMN CONTAINER + *********************/ + +main.content > .two-column { + display: grid; + grid-column: main-start / main-end; + grid-template-columns: 1fr 1fr; + + &.wide { + grid-column: wide-gutter-start / wide-gutter-end; + } + + > :first-child { + grid-column: unset; + } + + > :last-child { + grid-column: unset; + } + + > .figure { + display: block; + } + + &:has(figure:first-child + figure:last-child) { + gap: var(--space-xs); + grid-column: wide-gutter-start / wide-gutter-end; + } +} diff --git a/assets/css/010_typography.css b/assets/css/010_typography.css index 0428bbd..17b4da2 100644 --- a/assets/css/010_typography.css +++ b/assets/css/010_typography.css @@ -82,7 +82,7 @@ h4 { font-size: var(--text-m); } -p { +p, dd { letter-spacing: 0.01em; } diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css index 822c4e6..af11a8f 100644 --- a/assets/css/050_figures.css +++ b/assets/css/050_figures.css @@ -9,21 +9,29 @@ .figure { grid-column: wide-gutter-start / wide-gutter-end; +} + +.figure--main-column { + grid-column: main-start / main-end; +} + +.figure--code { + grid-column: gutter-start / gutter-end; +} + + +.figure { display: grid; grid-template-columns: subgrid; - .figure__container { - align-items: center; + &:has(> img:only-child) { display: flex; - gap: var(--body-item-spacing); - grid-column: wide-gutter-start / wide-gutter-end; justify-content: center; - min-width: fit-content; } - &:has(> img:only-child, .figure__container > img:only-child) { - display: flex; - justify-content: center; + &:has(.youtube) { + display: block; + grid-template-columns: unset; } > a:has(img:only-child) { @@ -46,27 +54,34 @@ } -.figure--main-column { - grid-column: main-start / main-end; -} - - -.figure--code { - grid-column: gutter-start / gutter-end; -} - - -.figure--youtube { +.figure :is(img, video) { grid-column: wide-gutter-start / wide-gutter-end; + width: 100%; +} - .youtube { + +.figure--small { + display: flow; + margin-inline: auto; + + img { + max-width: 480px; + } +} + + +.figure video { + width: 100%; +} + + +.figure .youtube { + width: 100%; + + iframe { + aspect-ratio: 16 / 9; + margin-bottom: -3px; width: 100%; - - iframe { - aspect-ratio: 16 / 9; - margin-bottom: -3px; - width: 100%; - } } } @@ -78,3 +93,8 @@ figcaption { grid-column: main-start / main-end; letter-spacing: 0.01em; } + + +.content-grid > .figure { + grid-column: unset; +} diff --git a/assets/css/050_lists.css b/assets/css/050_lists.css index 4523c46..0bab49a 100644 --- a/assets/css/050_lists.css +++ b/assets/css/050_lists.css @@ -12,8 +12,10 @@ ol, ul { grid-column: main-start / main-end; + margin-block: 0; } + ol { display: grid; grid-template-columns: min-content 1fr; @@ -46,6 +48,7 @@ ol { } } + ul { list-style-type: "*"; padding-inline-start: 1ch; @@ -55,6 +58,7 @@ ul { } } + li { &::marker, &::before { color: var(--text-color-secondary); @@ -62,15 +66,15 @@ li { } } + dl { dd { color: var(--text-color-secondary); - font-style: italic; - line-height: 1.2; - margin-inline-start: var(--space-l); + font-size: var(--text-s); + margin-inline: var(--space-l); &:has(+ dt) { - margin-block-end: var(--space-xs); + margin-block-end: var(--space-paragraph); } } } diff --git a/assets/css/050_tags.css b/assets/css/050_tags.css index 7b24637..ead6755 100644 --- a/assets/css/050_tags.css +++ b/assets/css/050_tags.css @@ -37,12 +37,12 @@ padding-inline-start: 0; } - .tag__value__list-item { + .tag__list-item { padding-inline-start: 0; white-space: nowrap; } - .tag__value__list-item:not(:first-child)::before { + .tag__list-item:not(:first-child)::before { color: var(--text-color-secondary); content: ":"; margin-inline-end: var(--spacing); diff --git a/assets/css/090_content_grid.css b/assets/css/090_content_grid.css new file mode 100644 index 0000000..de17535 --- /dev/null +++ b/assets/css/090_content_grid.css @@ -0,0 +1,13 @@ + + + + + +/*************** + * CONTENT GRID + ***************/ + +.content-grid { + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); +} diff --git a/assets/css/099_footnotes.css b/assets/css/099_footnotes.css index 6a8226a..369b38c 100644 --- a/assets/css/099_footnotes.css +++ b/assets/css/099_footnotes.css @@ -6,7 +6,6 @@ font-size: var(--text-s); hr { - border-top: 2px dashed var(--gray6); margin-block-start: var(--space-xl); } diff --git a/assets/css/099_page_header.css b/assets/css/099_page_header.css index ff52630..21cac5a 100644 --- a/assets/css/099_page_header.css +++ b/assets/css/099_page_header.css @@ -31,9 +31,10 @@ } .page-date { + color: var(--text-color-secondary); display: block; font-family: var(--font-family-body); font-size: var(--text-s); - margin-block: var(--space-paragraph) 0; + margin-block: var(--space-xs) 0; } } diff --git a/assets/css/099_page_navigation.css b/assets/css/099_page_navigation.css index 99e285b..32de31b 100644 --- a/assets/css/099_page_navigation.css +++ b/assets/css/099_page_navigation.css @@ -15,27 +15,27 @@ justify-content: flex-end; } - li { + .prev, .next { display: block; padding-inline: 0; } - .next-page { + .next { text-align: right; } - .previous-page::before, - .next-page::after { + .prev::before, + .next::after { color: var(--text-color-secondary); font-family: var(--font-family-monospace); } - .previous-page::before { + .prev::before { content: "<-"; padding-inline-end: var(--space-s); } - .next-page::after { + .next::after { content: "->"; padding-inline-start: var(--space-s); } diff --git a/i18n/en.yaml b/i18n/en.yaml index 5d80a99..01d4a5f 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -5,10 +5,15 @@ draftYes: "YES" draftNo: "NO" home: Home -tableOfContents: Table of Contents + +instagram: Instagram # Title of section of a list page where years older than # .Site.Params.blog.yearLimit are collapsed into a bulleted list. olderPagesSectionTitle: Older +source: Source + +tableOfContents: Table of Contents + yearsTagTitle: Years diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4db2f61..264af70 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,6 +12,7 @@ + {{ block "after_content" . }}{{ end }} {{ partial "base/body-extras.html" . }} {{- block "after_js" . }}{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 99992ac..c6d157a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -20,3 +20,9 @@ {{ end }} + +{{ define "after_content" }} + {{ range .Resources.Match "*.css" }} + + {{ end }} +{{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index c846373..7e4efdf 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -12,3 +12,9 @@ {{ end }} + +{{ define "after_content" }} + {{ range .Resources.Match "*.css" }} + + {{ end }} +{{ end }} diff --git a/layouts/partials/page/date.html b/layouts/partials/page/date.html index c305e53..b29e523 100644 --- a/layouts/partials/page/date.html +++ b/layouts/partials/page/date.html @@ -12,7 +12,7 @@ {{- $dateName := .date -}} {{- $name := "" -}} -{{- $date := $page.Date -}} +{{- $date := $page.PublishDate -}} {{- if or (not $dateName) (eq $dateName "date") }} {{- $name = T "datePublishedName" -}} diff --git a/layouts/partials/page/figures/caption.html b/layouts/partials/page/figures/caption.html new file mode 100644 index 0000000..f3ccf29 --- /dev/null +++ b/layouts/partials/page/figures/caption.html @@ -0,0 +1,6 @@ +
+ {{ .resource.Title | markdownify }} + {{ with .resource.Params.source -}} + {{ partial "page/figures/resource-source.html" . }} + {{- end -}} +
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html new file mode 100644 index 0000000..74b29e3 --- /dev/null +++ b/layouts/partials/page/figures/fullwidth-image.html @@ -0,0 +1,45 @@ +{{- $image := .resource -}} + +{{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}} +{{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}} + +{{- $resizedImages := dict "full" $image -}} +{{- if not $isSVG -}} + {{- + $resizedImages := dict + "full" ($image.Fit "2560x2560") + "half" ($image.Fit "1280x1280") + "quarter" ($image.Fit "640x640") + -}} +{{ end }} + +{{- $classes := slice "figure" "figure--image" -}} +{{- if eq .size "main" -}} + {{ $classes = $classes | append "figure--main-column" }} +{{- end -}} +{{- with .class -}} + {{ $classes = $classes | append . }} +{{- end -}} + +
+ {{ if $linksToFullSizeImage -}} + + {{- end -}} + {{ . }} + {{ if .linksToFullSizeImage -}} + + {{- end -}} + {{ if .shouldShowTitle }} + {{ partial "page/figures/caption.html" . }} + {{ end }} +
diff --git a/layouts/partials/page/figures/fullwidth-video.html b/layouts/partials/page/figures/fullwidth-video.html new file mode 100644 index 0000000..017f4a5 --- /dev/null +++ b/layouts/partials/page/figures/fullwidth-video.html @@ -0,0 +1,10 @@ +{{- $video := .resource -}} + +
+ + {{ if .shouldShowTitle }} + {{ partial "page/figures/caption.html" . }} + {{ end }} +
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html new file mode 100644 index 0000000..40f3e46 --- /dev/null +++ b/layouts/partials/page/figures/fullwidth.html @@ -0,0 +1,8 @@ +{# TODO: Accommodate multiple images here #} +{{- $resource := index .images 0 -}} + +{{- if eq $resource.ResourceType "image" -}} + {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource)) }} +{{- else if eq $resource.ResourceType "video" -}} + {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }} +{{- end -}} diff --git a/layouts/partials/page/figures/inline-image.html b/layouts/partials/page/figures/inline-image.html new file mode 100644 index 0000000..d54bd09 --- /dev/null +++ b/layouts/partials/page/figures/inline-image.html @@ -0,0 +1,24 @@ +{{- $image := .page.Resources.GetMatch .name -}} + +{{ if not $image }} + {{ errorf "No images named '%s' found. %s " .name .page.Permalink }} +{{ end }} + +{{ if ne $image.MediaType.SubType "svg" }} + {{ errorf "Only SVGs may be inlined. %s" $image.Permalink }} +{{ end }} + +{{- $classes := slice "figure" "figure--image" "figure--inline-image" -}} +{{- if eq .size "main" -}} + {{ $classes = $classes | append "figure--main-column" }} +{{- end -}} +{{- with .class -}} + {{ $classes = $classes | append . }} +{{- end -}} + +
+ {{ $image.Content | safeHTML }} + {{ if .shouldShowTitle }} + {{ partial "page/figures/caption.html" (merge . (dict "resource" $image)) }} + {{ end }} +
diff --git a/layouts/partials/page/figures/resource-source.html b/layouts/partials/page/figures/resource-source.html new file mode 100644 index 0000000..ca992c6 --- /dev/null +++ b/layouts/partials/page/figures/resource-source.html @@ -0,0 +1,19 @@ + + {{ if and .title .url }} + {{ i18n "source" }}: {{ .title }}. + {{ else if .title }} + {{ .title }} + {{ else }} + {{ $sourceTitle := "" }} + {{ $parsedURL := urls.Parse .url }} + {{ if strings.Contains $parsedURL.Hostname "instagram.com" }} + {{ $sourceTitle = i18n "instagram" }} + {{ end }} + + {{ if gt (len $sourceTitle) 0 }} + {{ i18n "source" }}: {{ $sourceTitle }} + {{ else }} + {{ i18n "source" }} + {{ end }} + {{ end }} + diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html new file mode 100644 index 0000000..7dd7cf5 --- /dev/null +++ b/layouts/partials/page/figures/small-image.html @@ -0,0 +1,27 @@ +{{- $image := .resource -}} + +{{- + $resizedImages := dict + "2x" ($image.Fit "960x960") + "1x" ($image.Fit "480x480") +-}} + +
+ {{ if .linksToFullSizeImage -}} + + {{- end -}} + {{ . }} + {{ if .linksToFullSizeImage -}} + + {{- end -}} + {{ if .shouldShowTitle }} + {{ partial "page/figures/caption.html" . }} + {{ end }} +
diff --git a/layouts/partials/page/figures/small.html b/layouts/partials/page/figures/small.html new file mode 100644 index 0000000..29d4c09 --- /dev/null +++ b/layouts/partials/page/figures/small.html @@ -0,0 +1,12 @@ +{{- $page := .page -}} +{{- $shouldShowTitle := .shouldShowTitle -}} + +{# TODO: Accommodate multiple images here. #} +{{- $resource := index .images 0 -}} +{{- if not $resource }} + {{ errorf "No resource named '%s'. %s" .name .page.Permalink }} +{{ end -}} + +{{- if eq $resource.ResourceType "image" -}} + {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource)) }} +{{- end -}} diff --git a/layouts/partials/page/prev_next_navigation.html b/layouts/partials/page/prev_next_navigation.html index 87ef301..e214212 100644 --- a/layouts/partials/page/prev_next_navigation.html +++ b/layouts/partials/page/prev_next_navigation.html @@ -1,18 +1,18 @@ {{ if .FirstSection }} - {{- $pages := where .FirstSection.RegularPagesRecursive "Draft" "eq" false -}} + {{- $pages := (where .FirstSection.RegularPagesRecursive "Draft" "eq" false).ByDate -}} {{- $previousInSection := $pages.Prev . -}} {{- $nextInSection := $pages.Next . -}} {{ if or $previousInSection $nextInSection }}