make content max-width wider

Author: willitcode

layouts/_default/list.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <article class="pa3 pa4-ns nested-copy-line-height">
+    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center mw8 lh-copy {{ $.Param "text_color" | default "mid-gray" }}">
+      {{- .Content -}}
+    </section>
+    <section class="flex-ns flex-wrap justify-around mt5">
+      {{ range .Paginator.Pages }}
+        <div class="relative w-100 w-30-l mb4 bg-white">
+          {{ .Render "summary" }}
+        </div>
+      {{ end }}
+    </section>
+    {{- template "_internal/pagination.html" . -}}
+  </article>
+{{ end }}

layouts/index.html

@@ -0,0 +1,58 @@
+{{ define "main" }}
+  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center mw8 lh-copy {{ $.Param "text_color" | default "mid-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. */}}
+    {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
+    
+    {{/* Check to see if the section is defined for ranging through it */}}
+    {{range ($mainSections)}}
+    {{/* Derive the section name  */}}
+    {{ $section_name := . }}
+    {{/* Create a variable with that section to use in multiple places. */}}
+    {{ $section := where $.Site.RegularPages "Section" "in" $section_name }}
+    {{ $section_count := len $section }}
+    {{ if ge $section_count 1 }}
+      <div class="pa3 pa4-ns w-100 w-70-ns center">
+        {{/* 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">
+              {{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
+            </h1>
+          {{ end }}
+
+        {{ $n_posts := $.Param "recent_posts_number" | default 3 }}
+
+        <section class="w-100 mw8">
+          {{/* Range through the first $n_posts items of the section */}}
+          {{ range (first $n_posts $section) }}
+            <div class="relative w-100 mb4">
+              {{ .Render "summary-with-image" }}
+            </div>
+          {{ end }}
+        </section>
+
+        {{ 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 {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml3" "mr3" }}">
+              <a href="{{ .RelPermalink }}" 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="{{ .RelPermalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">{{ i18n "allTitle" . }}</a>
+          {{ end }}
+          </section>
+        {{ end }}
+
+        </div>
+    {{ end }}
+  {{ end }}
+{{end}}
+