Add proper taxonomy handling

- Add css to fix taxonomy - Change some logic in partial calls - Adjust i18n wordings
Decysif · Oct 29, 2024 · 5fc5980 · 5fc5980
1 parent 012c808
commit 5fc5980
Show file tree

Hide file tree

Showing 11 changed files with 340 additions and 52 deletions.
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -93,6 +93,7 @@
 .tc-l {
   text-align: center;
 }
+
 // Centering the header logo
 #headerlogo {
   display: block;
@@ -249,3 +250,194 @@ h5 {
   font-weight: 600;
   margin-bottom: 0.75rem;
 }
+
+// Container styles for blog listing
+.blog-listing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 2rem auto;
+  padding: 1rem;
+  max-width: 1000px;
+
+  // Responsive padding and spacing
+  @media (min-width: 768px) {
+    padding: 2rem;
+  }
+}
+
+// Section title styling
+.blog-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 1.5rem;
+  text-align: center;
+
+  @media (min-width: 768px) {
+    font-size: 2.5rem;
+  }
+}
+
+// Main article content
+.blog-content {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  color: #555;
+  text-align: center;
+  margin-bottom: 2rem;
+  max-width: 700px;
+}
+
+// Post card styling
+.post-card {
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 1.5rem;
+  background-color: #fff;
+  border: 1px solid #e2e2e2;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+  }
+
+  .post-card-inner {
+    padding: 1rem;
+
+    @media (min-width: 768px) {
+      padding: 1.5rem;
+    }
+  }
+
+  // Title within each post card
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #0070f3;
+    margin-bottom: 0.75rem;
+
+    &:hover {
+      color: #0056b3;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 1.5rem;
+    }
+  }
+
+  // Excerpt or content preview
+  p {
+    font-size: 1rem;
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+
+    @media (min-width: 768px) {
+      font-size: 1.125rem;
+    }
+  }
+
+  // Button to read more
+  .read-more {
+    display: inline-block;
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #fff;
+    background-color: #0070f3;
+    border-radius: 5px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}
+
+// Pagination section
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+
+  a {
+    padding: 0.5rem 1rem;
+    margin: 0 0.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #0070f3;
+    background-color: #fff;
+    border: 1px solid #0070f3;
+    border-radius: 5px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: #fff;
+      background-color: #0070f3;
+    }
+  }
+}
+
+/* taxonomy-terms.scss */
+
+/* Styles for the taxonomy listing */
+.taxonomy-listing {
+  .taxonomy-description {
+    text-align: center;
+  }
+
+  .term-header {
+    text-align: center;
+    margin-top: 2rem;
+  }
+
+  .taxonomy-terms__container {
+    margin-bottom: 2rem;
+  }
+
+  .term-post {
+    background-color: #f9f9f9; /* Background color for articles */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    padding: 1.5rem; /* Padding for content */
+    transition: box-shadow 0.2s ease; /* Smooth transition for hover effects */
+
+    /* Change shadow on hover */
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
+    }
+
+    /* Title and summary styles */
+    h1 {
+      font-size: 1.5rem; /* Title size */
+      color: #333; /* Title color */
+    }
+
+    a {
+      color: inherit; /* Inherit color from parent */
+      text-decoration: none; /* Remove underline */
+      &:hover {
+        text-decoration: underline; /* Underline on hover */
+      }
+    }
+
+    /* Styling for section label */
+    span {
+      font-weight: bold; /* Make section label bold */
+      color: #777; /* Grey color for section label */
+      display: block; /* Make section label block */
+      margin-bottom: 0.5rem; /* Margin for spacing */
+    }
+
+    /* Additional link styling */
+    .nested-links {
+      margin-top: 0.5rem; /* Margin for spacing */
+      font-size: 0.95rem; /* Font size for nested links */
+      line-height: 1.6; /* Line height for readability */
+    }
+  }
+}
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -35,7 +35,7 @@ other = "An email address is required."
 other = "Send"
 
 [taxonomyPageList]
-other = "Below you will find pages that utilize the taxonomy term “{{ .Title }}”"
+other = "Articles tagged with “{{ .Title }}”"
 
 [readingTime]
 one = "One minute read"

diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -35,7 +35,7 @@ other = "Une adresse e-mail est requise."
 other = "Envoyer"
 
 [taxonomyPageList]
-other = "Ci-dessous se trouvent les pages utilisant le terme taxonomique “{{ .Title }}”"
+other = "Les articles étiquettés “{{ .Title }}”"
 
 [readingTime]
 one = "Une minute de lecture"

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,5 @@
 {{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
 {{ define "main" }}
-<div id="BEGIN:layouts/index.html"></div>
 <section class="ph4 pv5 bg-light-gray">
   <div class="mw7 center">
     <p class="f4 lh-copy">{{ .Params.synopsis | markdownify }}</p>
@@ -54,5 +53,4 @@ <h3 class="f4">{{ .name }}</h3>
   </div>
 </section>
 
-<div id="END:layouts/index.html"></div>
 {{ end }}
diff --git a/layouts/page/deliverables.html b/layouts/page/deliverables.html
@@ -1,6 +1,5 @@
 {{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
 {{ define "main" }}
-<div id="BEGIN:layouts/page/deliverables.html"></div>
 <div class="deliverables mv5 ph4 mw8 center">
   <h2 class="f3 fw6 ttu tracked dark-gray ph4 tc">
     {{ .Params.title }}
@@ -111,5 +110,4 @@ <h4 class="f5 fw6 dark-blue">{{ .papername }}</h4>
   </div>
 </div>
 
-<div id="END:layouts/page/deliverables.html"></div>
 {{ end }}
diff --git a/layouts/partials/summary.html b/layouts/partials/summary.html
@@ -0,0 +1,16 @@
+{{ partial "func/warn" `You are currently using 'partial "summary"' in your project templates. 
+You should replace it with '.Render "summary"' as the use of this partial will be deprecated in future releases.
+More info here: https://github.com/theNewDynamic/gohugo-theme-ananke/releases/tag/v2.8.1` }}
+<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>
+    <h1 class="f3 near-black">
+      <a href="{{ .RelPermalink }}" class="link black dim">
+        {{ .Title }}
+      </a>
+    </h1>
+    <div class="nested-links f5 lh-copy nested-copy-line-height">
+      {{ .Summary  }}
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
@@ -0,0 +1,9 @@
+<ul class="pa0">
+  {{ range .GetTerms "tags" }}
+   <li class="list di">
+     <a href="{{ .RelPermalink }}" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">
+       {{- .LinkTitle -}}
+     </a>
+   </li>
+  {{ end }}
+</ul>
diff --git a/layouts/post/list.html b/layouts/post/list.html
@@ -1,56 +1,68 @@
-{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
+{{ define "header" }}
+{{
+  $ctx := merge
+            (dict
+              "page" .
+              "Site" .Site
+              "Translations" .Translations
+            )
+            (dict
+              "Params"
+              (dict
+                "description"
+                .Content
+                "featured_image"
+                "/images/Decysif.png"
+              )
+            )
+}}
+{{ partial "page-header.html" $ctx }}
+{{ end }}
 {{ define "main" }}
- <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide 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. */}}
+<div class="blog-listing"> <!-- Container for the blog listing -->
+
+  {{/* Define a section to pull recent posts from. */}}
   {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
-  {{/* Create a variable with that section to use in multiple places. */}}
   {{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
-  {{/* Check to see if the section is defined for ranging through it */}}
   {{ $section_count := len $section }}
+
   {{ if ge $section_count 1 }}
-    {{/* Derive the section name  */}}
     {{ $section_name := index (.Site.Params.mainSections) 0 }}
-
     <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 }}
+
+      {{ with .Site.GetPage "section" $section_name }}
+        <h1 class="blog-title">{{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}</h1> <!-- Section title -->
+      {{ end }}
 
       {{ $n_posts := $.Param "recent_posts_number" | default 3 }}
 
+      <!-- Main section for recent posts -->
       <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>
+        <div class="post-card"> <!-- Post card wrapper -->
+          {{ .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>
+        <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>
+          <a href="{{ .RelPermalink }}" class="link db f6 pa2 br3 bg-mid-gray white dim w4 tc">
+            {{ i18n "allTitle" . }}
+          </a>
         {{ end }}
-        </section>
+      </section>
       {{ end }}
-
-      </div>
+    </div>
   {{ end }}
+</div>
 {{ end }}
diff --git a/layouts/post/summary.html b/layouts/post/summary.html