progressed on mosaic layout

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