✨Taxonomy add card view

nunocoracao · Dec 31, 2022 · 2fab070 · 2fab070
1 parent 6fbe854
commit 2fab070
Show file tree

Hide file tree

Showing 39 changed files with 2,798 additions and 143 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1269,11 +1269,6 @@ select {
   margin-right: -0.5rem;
 }
 
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1294,6 +1289,11 @@ select {
   margin-bottom: -0.5rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -1915,16 +1915,16 @@ select {
   padding-bottom: 2rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2072,10 +2072,6 @@ select {
   font-weight: 700;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -2084,6 +2080,10 @@ select {
   font-weight: 400;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2129,14 +2129,14 @@ select {
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
 }
 
-.text-primary-500 {
+.text-neutral-800 {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
+  color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
+.text-primary-500 {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
+  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
 }
 
 .text-primary-700 {
@@ -2929,6 +2929,13 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
+.thumbnail_card_term {
+  height: 150px;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
 .single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
@@ -3543,14 +3550,14 @@ body:has(#menu-controller:checked) {
     height: 14rem;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
   .md\:w-auto {
     width: auto;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -3640,14 +3647,14 @@ body:has(#menu-controller:checked) {
     height: 100%;
   }
 
-  .lg\:w-1\/4 {
-    width: 25%;
-  }
-
   .lg\:w-auto {
     width: auto;
   }
 
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+
   .lg\:max-w-xs {
     max-width: 20rem;
   }

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -354,6 +354,13 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
+.thumbnail_card_term {
+  height: 150px;
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
 .single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover; 

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -92,6 +92,8 @@ defaultBackgroundImage = "/img/iceland.jpg"
   showViews = true
   showLikes = true
   showTableOfContents = true
+  cardView = false
+
 
 [term]
   showHero = true

diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
diff --git a/...land_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x600_fill_q75_box_center.jpg b/...land_hu3d03a01dcc18bc5be0e67db3d8d209a6_5000159_600x600_fill_q75_box_center.jpg
diff --git a/...eatured_hu61945c9a50a7e783444cb54fb71dc68a_650977_600x600_fill_box_center_3.png b/...eatured_hu61945c9a50a7e783444cb54fb71dc68a_650977_600x600_fill_box_center_3.png
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -36,23 +36,25 @@ <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .
   {{ $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>
+
+
+  {{ if .Site.Params.taxonomy.cardView }}
+
+  <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+    {{ range .Data.Terms }}
+    {{ partial "term-link/card.html" . }}
+    {{ end }}
+  </section>
+
+  {{ else }}
+
   <section class="flex flex-wrap max-w-prose -mx-2 overflow-hidden">
     {{ range .Data.Terms }}
-      <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
-        <h2 class="flex items-center">
-          <a
-            class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
-            href="{{ .Page.RelPermalink }}"
-            >{{ .Page.Title }}</a
-          >
-          {{ if $.Site.Params.taxonomy.showTermCount | default true }}
-            <span class="px-2 text-base text-primary-500">&middot;</span>
-            <span class="text-base text-neutral-400">
-              {{ .Count }}
-            </span>
-          {{ end }}
-        </h2>
-      </article>
+      {{ partial "term-link/text.html" . }}
     {{ end }}
   </section>
+
+  {{ end }}
+
+
 {{ end }}
diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html
@@ -0,0 +1,46 @@
+<a href="{{ .Page.RelPermalink }}" class="min-w-full">
+  <div
+    class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+
+    {{- with site.Params.images -}}
+    {{- range first 6 . }}
+    <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+    {{- else -}}
+    {{- $images := .Page.Resources.ByType "image" -}}
+    {{- $featured := $images.GetMatch "*feature*" -}}
+    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+    {{- with $featured -}}
+    {{ with .Fill "600x600" }}
+    <div class="w-full thumbnail_card_term nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+    {{ end }}
+    {{- else -}}
+    {{- with site.Params.images }}
+    <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+    {{- end -}}
+    {{- end -}}
+
+
+    {{ if site.Params.taxonomy.showTermCount | default true }}
+    <span class="absolute bottom-0 right-0 m-2">
+      <span class="flex">
+        <span
+          class="rounded-md border backdrop-blur border-primary-400 px-1 py-[1px] text-xl font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
+        >
+        {{ .Count }}
+        </span>
+      </span>
+    </span>
+    {{ end }}
+
+    <div class="px-6 py-4">
+
+      <div
+        class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+      >{{ .Page.Title | emojify }}</div>
+
+    </div>
+    <div class="px-6 pt-4 pb-2">
+
+    </div>
+  </div>
+</a>
diff --git a/layouts/partials/term-link/text.html b/layouts/partials/term-link/text.html
@@ -0,0 +1,15 @@
+<article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
+    <h2 class="flex items-center">
+      <a
+        class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
+        href="{{ .Page.RelPermalink }}"
+        >{{ .Page.Title }}</a
+      >
+      {{ if site.Params.taxonomy.showTermCount | default true }}
+        <span class="px-2 text-base text-primary-500">&middot;</span>
+        <span class="text-base text-neutral-400">
+          {{ .Count }}
+        </span>
+      {{ end }}
+    </h2>
+  </article>