Merge pull request #350 from nunocoracao/346-review-list-grids

💄 Review list grids

assets/css/compiled/main.css

@@ -1330,10 +1330,6 @@ select {
   margin-top: 0px;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -1346,6 +1342,10 @@ select {
   margin-bottom: 1.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1522,14 +1522,14 @@ select {
   width: 3rem;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .w-full {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1905,6 +1905,11 @@ select {
   padding-right: 0px;
 }
 
+.px-\[30px\] {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -1960,14 +1965,6 @@ select {
   padding-bottom: 4rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pr-8 {
-  padding-right: 2rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -3728,10 +3725,6 @@ body:has(#menu-controller:checked) {
 }
 
 @media (min-width: 1536px) {
-  .\32xl\:w-1\/5 {
-    width: 20%;
-  }
-
   .\32xl\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }

config/_default/config.toml

@@ -15,6 +15,9 @@ buildFuture = false
 
 # googleAnalytics = "G-XXXXXXXXX"
 
+[imaging]
+  anchor = 'Center'
+
 [taxonomies]
   tag = "tags"
   category = "categories"

exampleSite/config/_default/config.toml

@@ -15,6 +15,9 @@ buildFuture = false
 
 googleAnalytics = "G-PEDMYR1V0K"
 
+[imaging]
+  anchor = 'Center'
+
 [taxonomies]
   tag = "tags"
   category = "categories"

exampleSite/config/_default/params.toml

@@ -101,7 +101,7 @@ defaultBackgroundImage = "/img/iceland.jpg"
   showLikes = true
   showTableOfContents = true
   groupByYear = false
-  cardView = false
+  cardView = true
   cardViewScreenWidth = false
   
 

layouts/_default/list.html

@@ -45,88 +45,93 @@
   </section>
   {{ if gt .Pages 0 }}
 
-  {{ if .Params.cardView | default (.Site.Params.list.cardView | default false) }}
+    {{ $cardView := .Params.cardView | default (.Site.Params.list.cardView | default false) }}
+    {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth | default false }}
+    {{ $groupByYear := .Params.groupByYear | default ($.Site.Params.list.groupByYear | default false) }}
 
-  {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}}
+    {{ if not $cardView }}
 
-  {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+    <section class="space-y-10 w-full">
+      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+      {{ if $groupByYear }}
+      <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+        {{ .Key }}
+      </h2>
+      {{ end }}
+      {{ range .Pages }}
+      {{ partial "article-link.html" . }}
+      {{ end }}
+      {{ end }}
+    </section>
 
-  {{ if $cardViewScreenWidth }}
-  <section class="relative w-screen" style="left: calc(-50vw + 50%);">
-    <div class="flex flex-wrap pl-8 pr-8">
-      {{ else }}
-      <section class="w-full">
-        <div class="flex flex-wrap">
+    {{ else if and $cardView (not $cardViewScreenWidth) }}
+
+      {{ if $groupByYear }}
+
+      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+        <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+          {{ .Key }}
+        </h2>
+        <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+          {{ range .Pages }}
+          {{ partial "article-link-card.html" . }}
           {{ end }}
+        </section>
+      {{ end }}
 
-          {{ end }}
-          
+    {{ else }}
+
+        <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
           {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-          <h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+          {{ range .Pages }}
+          {{ partial "article-link-card.html" . }}
+          {{ end }}
+          {{ end }}
+        </section>
+
+    {{ end }}
+
+    {{ else if and $cardView $cardViewScreenWidth }}
+
+      {{ if $groupByYear }}
+
+        {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+        <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
+          <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
             {{ .Key }}
           </h2>
-          {{ else }}
-          {{ end }}
-
-          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-
-          {{ if $cardViewScreenWidth}}
-          <section class="relative w-screen" style="left: calc(-50vw + 50%);">
-            <div class="flex flex-wrap pl-8 pr-8">
-              {{ else }}
-              <section class="w-full">
-                <div class="flex flex-wrap">
-                  {{ end }}
-                  {{ end }}
-
-                  {{ range .Pages }}
-
-                  {{ if $cardViewScreenWidth }}
-                  <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
-                    {{ else }}
-                    <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
-                      {{ end }}
-
-                      {{ partial "article-link-card.html" . }}
-                    </div>
-                    {{ end }}
-                    {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-                  </div>
-              </section>
-              {{ end }}
-
-
-              {{ end }}
-
-              {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-            </div>
-          </section>
-          {{ end }}
-
-          {{ else }}
-          <section class="space-y-10 w-full">
-            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-            {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-            <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
-              {{ .Key }}
-            </h2>
-            {{ end }}
+          <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {{ range .Pages }}
-            {{ partial "article-link.html" . }}
+            {{ partial "article-link-card.html" . }}
+            {{ end }}
+          </section>
+        </div>
+        {{ end }}
+
+      {{ else }}
+
+        <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
+          <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+            {{ range .Pages }}
+            {{ partial "article-link-card.html" . }}
             {{ end }}
             {{ end }}
           </section>
-          {{ end }}
+        </div>
 
-          {{ else }}
-          <section class="mt-10 prose dark:prose-invert">
-            <p class="py-8 border-t">
-              <em>{{ i18n "list.no_articles" | emojify }}</em>
-            </p>
-          </section>
-          {{ end }}
+      {{ end }}
 
-          {{ partial "pagination.html" . }}
+    {{end}}
 
-          {{ end }}
+  {{ else }}
+  <section class="mt-10 prose dark:prose-invert">
+    <p class="py-8 border-t">
+      <em>{{ i18n "list.no_articles" | emojify }}</em>
+    </p>
+  </section>
+  {{ end }}
+
+    {{ partial "pagination.html" . }}
+
+  {{ end }}

layouts/_default/term.html

@@ -11,116 +11,121 @@
 {{- end -}}
 
 {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.term.showTableOfContents | default false)) (in
-.TableOfContents "<ul") }} 
-
-  <header>
-    {{ if .Params.showBreadcrumbs | default (.Site.Params.term.showBreadcrumbs | default false) }}
-      {{ partial "breadcrumbs.html" . }}
-    {{ end }}
-    <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
-    <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
-      {{ partial "article-meta-term.html" (dict "context" . "scope" "single") }}
-    </div>
-  </header>
-  {{ if .Content }}
-    <section class="flex flex-col max-w-full mt-0 mb-5 prose dark:prose-invert lg:flex-row">
-      <div class="min-w-0 min-h-0 max-w-prose">
-        {{ .Content | emojify }}
-      </div>
-    </section>
+.TableOfContents "<ul") }} <header>
+  {{ if .Params.showBreadcrumbs | default (.Site.Params.term.showBreadcrumbs | default false) }}
+  {{ partial "breadcrumbs.html" . }}
   {{ end }}
-  <script>
-    var oid = "views_{{ .File.Path }}"
-    var oid_likes = "likes_{{ .File.Path }}"
-  </script>
-  {{ $jsPage := resources.Get "js/page.js" }}
-  {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
-  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+  <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+  <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
+    {{ partial "article-meta-term.html" (dict "context" . "scope" "single") }}
+  </div>
+  </header>
+
+  <section class="flex flex-col max-w-full mt-0 mb-5 prose dark:prose-invert lg:flex-row">
+    {{ if .Content }}
+    <div class="min-w-0 min-h-0 max-w-prose">
+      {{ .Content | emojify }}
+    </div>
+    {{ end }}
+    <script>
+      var oid = "views_{{ .File.Path }}"
+      var oid_likes = "likes_{{ .File.Path }}"
+    </script>
+    {{ $jsPage := resources.Get "js/page.js" }}
+    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+  </section>
+
 
   {{ if gt .Pages 0 }}
 
-  {{ if .Params.cardView | default (.Site.Params.term.cardView | default false) }}
+  {{ $cardView := .Params.cardView | default (.Site.Params.list.cardView | default false) }}
+  {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth | default false }}
+  {{ $groupByYear := .Params.groupByYear | default ($.Site.Params.list.groupByYear | default false) }}
 
-  {{ $cardViewScreenWidth := .Site.Params.term.cardViewScreenWidth}}
+  {{ if not $cardView }}
 
-  {{ if not $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
+  <section class="space-y-10 w-full">
+    {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+    {{ if $groupByYear }}
+    <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+      {{ .Key }}
+    </h2>
+    {{ end }}
+    {{ range .Pages }}
+    {{ partial "article-link.html" . }}
+    {{ end }}
+    {{ end }}
+  </section>
 
-  {{ if $cardViewScreenWidth }}
-  <section class="relative w-screen" style="left: calc(-50vw + 50%);">
-    <div class="flex flex-wrap pl-8 pr-8">
-      {{ else }}
-      <section class="w-full">
-        <div class="flex flex-wrap">
-          {{ end }}
+  {{ else if and $cardView (not $cardViewScreenWidth) }}
 
-          {{ end }}
-          
-          {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-          {{ if $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
-          <h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
-            {{ .Key }}
-          </h2>
-          {{ else }}
-          {{ end }}
+  {{ if $groupByYear }}
 
-          {{ if $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
+  {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+  <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+    {{ .Key }}
+  </h2>
+  <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+    {{ range .Pages }}
+    {{ partial "article-link-card.html" . }}
+    {{ end }}
+  </section>
+  {{ end }}
 
-          {{ if $cardViewScreenWidth}}
-          <section class="relative w-screen" style="left: calc(-50vw + 50%);">
-            <div class="flex flex-wrap pl-8 pr-8">
-              {{ else }}
-              <section class="w-full">
-                <div class="flex flex-wrap">
-                  {{ end }}
-                  {{ end }}
+  {{ else }}
 
-                  {{ range .Pages }}
+  <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+    {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+    {{ range .Pages }}
+    {{ partial "article-link-card.html" . }}
+    {{ end }}
+    {{ end }}
+  </section>
 
-                  {{ if $cardViewScreenWidth }}
-                  <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
-                    {{ else }}
-                    <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
-                      {{ end }}
+  {{ end }}
 
-                      {{ partial "article-link-card.html" . }}
-                    </div>
-                    {{ end }}
-                    {{ if $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
-                  </div>
-              </section>
-              {{ end }}
+  {{ else if and $cardView $cardViewScreenWidth }}
 
+  {{ if $groupByYear }}
 
-              {{ end }}
+  {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+  <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
+    <h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+      {{ .Key }}
+    </h2>
+    <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+      {{ range .Pages }}
+      {{ partial "article-link-card.html" . }}
+      {{ end }}
+    </section>
+  </div>
+  {{ end }}
 
-              {{ if not $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
-            </div>
-          </section>
-          {{ end }}
+  {{ else }}
 
-          {{ else }}
-          <section class="space-y-10 w-full">
-            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-            {{ if $.Params.groupByYear | default ($.Site.Params.term.groupByYear | default true) }}
-            <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
-              {{ .Key }}
-            </h2>
-            {{ end }}
-            {{ range .Pages }}
-            {{ partial "article-link.html" . }}
-            {{ end }}
-            {{ end }}
-          </section>
-          {{ end }}
+  <div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
+    <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+      {{ range .Pages }}
+      {{ partial "article-link-card.html" . }}
+      {{ end }}
+      {{ end }}
+    </section>
+  </div>
 
-          {{ else }}
-          <section class="mt-10 prose dark:prose-invert">
-            <p class="py-8 border-t">
-              <em>{{ i18n "list.no_articles" | emojify }}</em>
-            </p>
-          </section>
-          {{ end }}
+  {{ end }}
 
-          {{ partial "pagination.html" . }}
+  {{end}}
 
-          {{ end }}
+  {{ else }}
+  <section class="mt-10 prose dark:prose-invert">
+    <p class="py-8 border-t">
+      <em>{{ i18n "list.no_articles" | emojify }}</em>
+    </p>
+  </section>
+  {{ end }}
+
+  {{ partial "pagination.html" . }}
+
+  {{ end }}

layouts/partials/recent-articles-cardview-fullwidth.html

@@ -1,11 +1,12 @@
 {{ $recentArticles := 5 }}
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 
-<section
-  class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-  style="left: calc(max(-50vw,-800px) + 50%);">
-  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-  .Site.Params.mainSections)).Pages }}
-  {{ partial "article-link-card.html" . }}
-  {{ end }}
-</section>
+<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
+  <section
+    class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+    {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+    .Site.Params.mainSections)).Pages }}
+    {{ partial "article-link-card.html" . }}
+    {{ end }}
+  </section>
+</div>