progressed on mosaic layout

themes/naej-ananke/layouts/_default/list.html

@@ -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">
+        <div class="relative w-100 w-30-l mb4">
-          {{- partial "summary.html" . -}}
+          {{ .Render "summary" }}
         </div>
       {{ end }}
     </section>

themes/naej-ananke/layouts/_default/single.html

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

themes/naej-ananke/layouts/_default/taxonomy.html

@@ -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">
+        <div class="relative w-100 w-30-l mb4">
-          {{ partial "summary.html" . }}
+          {{  .Render "summary" }}
         </div>
       {{ end }}
     </section>

themes/naej-ananke/layouts/index.html

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

themes/naej-ananke/layouts/page/single.html

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

themes/naej-ananke/layouts/partials/summary-with-image.html

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

themes/naej-ananke/layouts/partials/summary.html

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

themes/naej-ananke/layouts/post/list.html

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

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

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

themes/naej-ananke/layouts/post/summary.html

@@ -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>
+        <div class="z-0 absolute w-100">
-    {{ end }}
+          <img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
-    <h1 class="f3 near-black">
+        </div>
-      <a href="{{ .Permalink }}" class="link black dim">
+      {{ 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>