naejdoree/portfolio
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

progressed on mosaic layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
themes/naej-ananke/layouts/_default/list.html
View File

@ -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>

5
themes/naej-ananke/layouts/_default/single.html
View File

@ -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">

7
themes/naej-ananke/layouts/_default/taxonomy.html
View File

@ -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>

43
themes/naej-ananke/layouts/index.html
View File

@ -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 }}

5
themes/naej-ananke/layouts/page/single.html
View File

@ -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>

6
themes/naej-ananke/layouts/partials/summary-with-image.html
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" . }}
<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>

4
themes/naej-ananke/layouts/partials/summary.html
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="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>

4
themes/naej-ananke/layouts/post/list.html
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.
*/}}
{{/* 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/
*/}}

8
themes/naej-ananke/layouts/post/summary-with-image.html
View File

@ -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> */}}

33
themes/naej-ananke/layouts/post/summary.html
View File

@ -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>