progressed on mosaic layout
This commit is contained in:
Naej Doree
parent
31ea01f83d
commit
141fc9c42c
|
|
@ -5,8 +5,8 @@
|
|||
</section>
|
||||
<section class="flex-ns flex-wrap justify-around mt5">
|
||||
{{ range .Paginator.Pages }}
|
||||
<div class="relative w-100 w-30-l mb4 bg-white">
|
||||
{{- partial "summary.html" . -}}
|
||||
<div class="relative w-100 w-30-l mb4">
|
||||
{{ .Render "summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
|
||||
{{/* used to show posts */}}
|
||||
|
||||
|
||||
{{ define "header" }}
|
||||
{{/* We can override any block in the baseof file be defining it in the template */}}
|
||||
{{ partial "page-header.html" . }}
|
||||
{{ end }}
|
||||
{{/* used to show posts */}}
|
||||
{{ define "main" }}
|
||||
{{ $section := .Site.GetPage "section" .Section }}
|
||||
<article class="flex flex-wrap center light-gray flex-column tc flex-align:center">
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
<p>{{i18n "taxonomyPageList" .}}</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="mw8 center">
|
||||
<div class="center">
|
||||
<section class="flex-ns flex-wrap justify-around mt5">
|
||||
{{/* List of articles with the tag */}}
|
||||
{{ range .Pages }}
|
||||
<div class="relative w-100 mb4 bg-white">
|
||||
{{ partial "summary.html" . }}
|
||||
<div class="relative w-100 w-30-l mb4">
|
||||
{{ .Render "summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{/*the homepage */}}
|
||||
|
||||
{{ 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 }}
|
||||
</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. */}}
|
||||
|
|
@ -12,44 +14,65 @@
|
|||
{{/* Derive the section name */}}
|
||||
{{ $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 */}}
|
||||
{{ with .Site.GetPage "section" $section_name }}
|
||||
<h1 class="flex-none">
|
||||
<h1 class="center">
|
||||
{{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
|
||||
</h1>
|
||||
{{ 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 (first $n_posts $section) }}
|
||||
<div class="relative w-100 mb4">
|
||||
{{ partial "summary-with-image.html" . }}
|
||||
{{/* range (first $n_posts $section) */}}
|
||||
{{ range $section }}
|
||||
<div class="relative w-100 w-30-l mb4">
|
||||
{{ .Render "summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
|
||||
{{/*
|
||||
used to display the more content part in the orginal layout
|
||||
|
||||
{{ if ge $section_count (add $n_posts 1) }}
|
||||
|
||||
<section class="w-100">
|
||||
|
||||
<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)) }}
|
||||
|
||||
<h2 class="f5 fw4 mb4 dib mr3">
|
||||
|
||||
<a href="{{ .Permalink }}" class="link black dim">
|
||||
|
||||
{{ .Title }}
|
||||
|
||||
</a>
|
||||
|
||||
</h2>
|
||||
|
||||
{{ 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 }}
|
||||
|
||||
<a href="{{ .Permalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">{{ i18n "allTitle" . }}</a>
|
||||
|
||||
{{ end }}
|
||||
|
||||
</section>
|
||||
|
||||
{{ end }}
|
||||
|
||||
*/}}
|
||||
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
|
||||
{{ define "main" }}
|
||||
{{/*used in the contact page*/}}
|
||||
<div class="flex-l mt2 mw8 center">
|
||||
<article class="center cf pv5 ph3 ph4-ns mw7">
|
||||
<header>
|
||||
<p class="f6 b helvetica tracked">
|
||||
{{ humanize .Section | upper }}
|
||||
</p>
|
||||
<h1 class="f1">
|
||||
<h1 class="f1 light-gray">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
</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 }}
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -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" . }}
|
||||
<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">
|
||||
{{ if $featured_image }}
|
||||
{{/* 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">
|
||||
{{ .Description }}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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="bg-white mb3 pa4 gray overflow-hidden">
|
||||
<span class="f6 db">{{ humanize .Section }}</span>
|
||||
|
|
@ -7,7 +9,7 @@
|
|||
</a>
|
||||
</h1>
|
||||
<div class="nested-links f5 lh-copy nested-copy-line-height">
|
||||
{{ .Summary }}
|
||||
{{ .Description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/}}
|
||||
|
||||
{{/* used for the "project" page*/}}
|
||||
<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">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
<aside class="flex-ns flex-wrap justify-around mt5">
|
||||
{{ 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/
|
||||
*/}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{/* used in ??? - probably nowhere*/}}
|
||||
|
||||
<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">
|
||||
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
|
||||
{{ if $featured_image }}
|
||||
|
|
@ -8,9 +10,9 @@
|
|||
</div>
|
||||
{{ 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">
|
||||
{{ .Summary }}
|
||||
{{ .Description }}
|
||||
</div>
|
||||
{{/* TODO: add author
|
||||
<p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
{{/*used in the mosaic layout */}}
|
||||
<div class="mb3 pa4 mid-gray overflow-hidden">
|
||||
{{ if .Date }}
|
||||
<div class="f6">
|
||||
{{/* {{ .Date.Format "January 2, 2006" }} */}}
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="f3 near-black">
|
||||
<a href="{{ .Permalink }}" class="link black dim">
|
||||
{{/*used in the mosaic layout - everywhere now */}}
|
||||
|
||||
<div class="overflow-hidden grow bg-white">
|
||||
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
|
||||
{{ if $featured_image }}
|
||||
<div class="z-0 absolute w-100">
|
||||
<img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="flex flex-grow:column flex-wrap f3 near-black">
|
||||
<a href="{{ .Permalink }}" class="link black dim z-max">
|
||||
|
||||
{{ .Title }}
|
||||
|
||||
</a>
|
||||
|
||||
<div class="nested-links f5 lh-copy nested-copy-line-height z-max">
|
||||
{{ .Description }}
|
||||
{{- partial "tags.html" . -}}
|
||||
</div>
|
||||
|
||||
</h1>
|
||||
<div class="nested-links f5 lh-copy nested-copy-line-height">
|
||||
{{ .Description }}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue