progressed on mosaic layout

This commit is contained in:
Naej Doree 2020-07-08 00:23:48 +02:00
parent 31ea01f83d
commit 141fc9c42c
10 changed files with 81 additions and 38 deletions

View File

@ -5,8 +5,8 @@
</section> </section>
<section class="flex-ns flex-wrap justify-around mt5"> <section class="flex-ns flex-wrap justify-around mt5">
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
<div class="relative w-100 w-30-l mb4 bg-white"> <div class="relative w-100 w-30-l mb4">
{{- partial "summary.html" . -}} {{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}
</section> </section>

View File

@ -1,8 +1,11 @@
{{/* used to show posts */}}
{{ define "header" }} {{ define "header" }}
{{/* We can override any block in the baseof file be defining it in the template */}} {{/* We can override any block in the baseof file be defining it in the template */}}
{{ partial "page-header.html" . }} {{ partial "page-header.html" . }}
{{ end }} {{ end }}
{{/* used to show posts */}}
{{ define "main" }} {{ define "main" }}
{{ $section := .Site.GetPage "section" .Section }} {{ $section := .Site.GetPage "section" .Section }}
<article class="flex flex-wrap center light-gray flex-column tc flex-align:center"> <article class="flex flex-wrap center light-gray flex-column tc flex-align:center">

View File

@ -4,11 +4,12 @@
<p>{{i18n "taxonomyPageList" .}}</p> <p>{{i18n "taxonomyPageList" .}}</p>
</div> </div>
</article> </article>
<div class="mw8 center"> <div class="center">
<section class="flex-ns flex-wrap justify-around mt5"> <section class="flex-ns flex-wrap justify-around mt5">
{{/* List of articles with the tag */}}
{{ range .Pages }} {{ range .Pages }}
<div class="relative w-100 mb4 bg-white"> <div class="relative w-100 w-30-l mb4">
{{ partial "summary.html" . }} {{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}
</section> </section>

View File

@ -1,5 +1,7 @@
{{/*the homepage */}}
{{ define "main" }} {{ define "main" }}
<article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"> <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy light-gray">
{{ .Content }} {{ .Content }}
</article> </article>
{{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}} {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
@ -12,44 +14,65 @@
{{/* Derive the section name */}} {{/* Derive the section name */}}
{{ $section_name := index (.Site.Params.mainSections) 0 }} {{ $section_name := index (.Site.Params.mainSections) 0 }}
<div class="pa3 pa4-ns w-100 w-70-ns center"> <div class="flex flex-direction:column flex-wrap pa3 pa4-ns w-100 center light-gray">
{{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}} {{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}}
{{ with .Site.GetPage "section" $section_name }} {{ with .Site.GetPage "section" $section_name }}
<h1 class="flex-none"> <h1 class="center">
{{ $.Param "recent_copy" | default (i18n "recentTitle" .) }} {{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
</h1> </h1>
{{ end }} {{ end }}
{{ $n_posts := $.Param "recent_posts_number" | default 3 }} {{/* $n_posts := $.Param "recent_posts_number" | default 3 */}}
<section class="w-100 mw8"> {{/*list of the projects*/}}
<section class="w-100 flex flex-ns flex-wrap justify-around">
{{/* Range through the first $n_posts items of the section */}} {{/* Range through the first $n_posts items of the section */}}
{{ range (first $n_posts $section) }} {{/* range (first $n_posts $section) */}}
<div class="relative w-100 mb4"> {{ range $section }}
{{ partial "summary-with-image.html" . }} <div class="relative w-100 w-30-l mb4">
{{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}
</section> </section>
{{/*
used to display the more content part in the orginal layout
{{ if ge $section_count (add $n_posts 1) }} {{ if ge $section_count (add $n_posts 1) }}
<section class="w-100"> <section class="w-100">
<h1 class="f3">{{ i18n "more" }}</h1> <h1 class="f3">{{ i18n "more" }}</h1>
{{/* Now, range through the next four after the initial $n_posts items. Nest the requirements, "after" then "first" on the outside */}}
{{ range (first 4 (after $n_posts $section)) }} {{ range (first 4 (after $n_posts $section)) }}
<h2 class="f5 fw4 mb4 dib mr3"> <h2 class="f5 fw4 mb4 dib mr3">
<a href="{{ .Permalink }}" class="link black dim"> <a href="{{ .Permalink }}" class="link black dim">
{{ .Title }} {{ .Title }}
</a> </a>
</h2> </h2>
{{ end }} {{ end }}
{{/* As above, Use $section_name to get the section title, and URL. Use "with" to only show it if it exists */}}
{{ with .Site.GetPage "section" $section_name }} {{ with .Site.GetPage "section" $section_name }}
<a href="{{ .Permalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">{{ i18n "allTitle" . }}</a> <a href="{{ .Permalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">{{ i18n "allTitle" . }}</a>
{{ end }} {{ end }}
</section> </section>
{{ end }} {{ end }}
*/}}
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}

View File

@ -1,16 +1,17 @@
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }} {{ define "main" }}
{{/*used in the contact page*/}}
<div class="flex-l mt2 mw8 center"> <div class="flex-l mt2 mw8 center">
<article class="center cf pv5 ph3 ph4-ns mw7"> <article class="center cf pv5 ph3 ph4-ns mw7">
<header> <header>
<p class="f6 b helvetica tracked"> <p class="f6 b helvetica tracked">
{{ humanize .Section | upper }} {{ humanize .Section | upper }}
</p> </p>
<h1 class="f1"> <h1 class="f1 light-gray">
{{ .Title }} {{ .Title }}
</h1> </h1>
</header> </header>
<div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray"> <div class="nested-copy-line-height lh-copy f4 nested-links nested-img light-gray">
{{ .Content }} {{ .Content }}
</div> </div>
</article> </article>

View File

@ -1,8 +1,8 @@
{{/* used in the "recent project" part */}} {{/*was used in the "recent project" part, not used anymore */}}
{{ $featured_image := partial "func/GetFeaturedImage.html" . }} {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
<article class="bb b--black-10"> <article class="bb b--black-10">
<div class="db pv4 ph3 ph0-l no-underline dark-gray"> <div class="db pv4 ph3 ph0-l no-underline light-gray">
<div class="flex flex-column flex-row-ns"> <div class="flex flex-column flex-row-ns">
{{ if $featured_image }} {{ if $featured_image }}
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
@ -22,7 +22,7 @@
<div class="f6 f5-l lh-copy nested-copy-line-height nested-links"> <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
{{ .Description }} {{ .Description }}
</div> </div>
<a href="{{.Permalink}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a> <a href="{{.Permalink}}" class="ba b--moon-gray bg-dark-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,3 +1,5 @@
{{/* used for posts in taxonomy - not anymore */}}
<div class="relative w-100 mb4 bg-white nested-copy-line-height"> <div class="relative w-100 mb4 bg-white nested-copy-line-height">
<div class="bg-white mb3 pa4 gray overflow-hidden"> <div class="bg-white mb3 pa4 gray overflow-hidden">
<span class="f6 db">{{ humanize .Section }}</span> <span class="f6 db">{{ humanize .Section }}</span>
@ -7,7 +9,7 @@
</a> </a>
</h1> </h1>
<div class="nested-links f5 lh-copy nested-copy-line-height"> <div class="nested-links f5 lh-copy nested-copy-line-height">
{{ .Summary }} {{ .Description }}
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,13 +2,15 @@
{{/* {{/*
This template is the same as the default and is here to demonstrate that if you have a content directory called "post" you can create a layouts directory, just for that section. This template is the same as the default and is here to demonstrate that if you have a content directory called "post" you can create a layouts directory, just for that section.
*/}} */}}
{{/* used for the "project" page*/}}
<article class="pa3 pa4-ns nested-copy-line-height nested-img"> <article class="pa3 pa4-ns nested-copy-line-height nested-img">
<section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"> <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
{{ .Content }} {{ .Content }}
</section> </section>
<aside class="flex-ns flex-wrap justify-around mt5"> <aside class="flex-ns flex-wrap justify-around mt5">
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
<div class="relative w-100 w-30-l mb4 bg-white"> <div class="relative w-100 w-30-l mb4">
{{/* {{/*
Note we can use `.Render` here for items just in this section, instead of a partial to pull in items for the list page. https://gohugo.io/functions/render/ Note we can use `.Render` here for items just in this section, instead of a partial to pull in items for the list page. https://gohugo.io/functions/render/
*/}} */}}

View File

@ -1,5 +1,7 @@
{{/* used in ??? - probably nowhere*/}}
<article class="bb b--black-10"> <article class="bb b--black-10">
<a class="db pv4 ph3 ph0-l no-underline dark-gray dim" href="{{ .Permalink }}"> <a class="db pv4 ph3 ph0-l no-underline light-gray dim" href="{{ .Permalink }}">
<div class="flex flex-column flex-row-ns"> <div class="flex flex-column flex-row-ns">
{{ $featured_image := partial "func/GetFeaturedImage.html" . }} {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
{{ if $featured_image }} {{ if $featured_image }}
@ -8,9 +10,9 @@
</div> </div>
{{ end }} {{ end }}
<div class="w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}"> <div class="w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
<h1 class="f3 fw1 athelas mt0 lh-title">{{ .Title }}</h1> <h1 class="f3 fw1 avenir mt0 lh-title">{{ .Title }}</h1>
<div class="f6 f5-l lh-copy nested-copy-line-height"> <div class="f6 f5-l lh-copy nested-copy-line-height">
{{ .Summary }} {{ .Description }}
</div> </div>
{{/* TODO: add author {{/* TODO: add author
<p class="f6 lh-copy mv0">By {{ .Author }}</p> */}} <p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}

View File

@ -1,16 +1,25 @@
{{/*used in the mosaic layout */}} {{/*used in the mosaic layout - everywhere now */}}
<div class="mb3 pa4 mid-gray overflow-hidden">
{{ if .Date }} <div class="overflow-hidden grow bg-white">
<div class="f6"> {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
{{/* {{ .Date.Format "January 2, 2006" }} */}} {{ if $featured_image }}
<div class="z-0 absolute w-100">
<img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
</div> </div>
{{ end }} {{ end }}
<h1 class="f3 near-black"> <h1 class="flex flex-grow:column flex-wrap f3 near-black">
<a href="{{ .Permalink }}" class="link black dim"> <a href="{{ .Permalink }}" class="link black dim z-max">
{{ .Title }} {{ .Title }}
</a> </a>
</h1>
<div class="nested-links f5 lh-copy nested-copy-line-height"> <div class="nested-links f5 lh-copy nested-copy-line-height z-max">
{{ .Description }} {{ .Description }}
{{- partial "tags.html" . -}}
</div> </div>
</h1>
</div> </div>