feat: significant updates to socials and formatting

README.md

@@ -163,14 +163,14 @@ Using front matter and cascade, this can be customized for a whole section, or j
 
 The theme automatically adds "Follow" link icons to the header and footer and "Share" link icons to pages unless `disable_share` parameter is set to true either on the site level (site params) or page level (front matter). Each built-in services sports a label, an icon and a color.
 
-In order to register a service to be used, user must add an `ananke_socials` parameter to its project configuration file and list them through it in the desired order. Each entry must bear a
+In order to register a service to be used, user must add an `socials` parameter to its project configuration file and list them through it in the desired order. Each entry must bear a
 - name*: It matches the built-in service reference (Ex: twitter, github)
 - url*: The url of the handle's profile on the service (Ex: https://twitter.com/theNewDynamic, https://github.com/
 theNewDynamic)
 - rel: (default: `noopener`) Controls the `rel` attribute of the "follow" link. Useful for Mastodon verification which requires a `rel="me"` on the link.
 ```yaml
 params:
-  ananke_socials:
+  socials:
   - name: twitter
     url: https://twitter.com/theNewDynamic
   - name: github
@@ -186,7 +186,7 @@ If user needs to overwrite default `color` and `label` of the service, they simp
 
 ```yaml
 params:
-  ananke_socials:
+  socials:
   - name: twitter
     url: https://twitter.com/theNewDynamic
     label: TND Twitter
@@ -202,7 +202,7 @@ If a user needs to control Share and Follow of a service, for example enabling "
 
 ```yaml
 params:
-  ananke_socials:
+  socials:
   - name: facebook
     label: Facebook
     follow: false
@@ -235,7 +235,7 @@ Here is the list of built-in services. Those marked with an `*` are also part of
 
 #### Complement
 
-In order to add an unkown service (absent from the list above), you simply need to add all three settings to `ananke_socials`: name, url, label, color, and optionally add an icon file matching the `name` to the `assets/ananke/socials` directory. In the absence of an icon, the theme will print the service's label.
+In order to add an unkown service (absent from the list above), you simply need to add all three settings to `socials`: name, url, label, color, and optionally add an icon file matching the `name` to the `assets/ananke/socials` directory. In the absence of an icon, the theme will print the service's label.
 
 ### Content indexing
 

assets/ananke/css/_social-icons.css

@@ -1,16 +1,48 @@
-.ananke-socials a{
+#sharing .social-link {
+  border-radius: 15px;
+  color: white;
+  fill: currentColor;
+}
+
+.socials a{
   display: inline-block;
   vertical-align: middle;
   color: #BABABA;
   fill: currentColor;
 }
-.ananke-socials a .icon svg{
+.socials a .icon svg{
   width: 32px;
   height: 32px;
+  vertical-align: bottom;
 }
-.ananke-socials a:hover {
+/* .socials a:hover {
   color: rgb(107, 114, 128);
+} */
+.share-buttons {
+  position: sticky;
+  width: 50px;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
 }
+.share-btn {
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+  margin: 5px 0;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+.share-btn:hover {
+  background-color: #555;
+}
+.facebook-share { background-color: #3b5998; }
+.pinterest-share { background-color: #bd081c; }
+.x-share { background-color: #000000; }
 .new-window {
   opacity: 0;
   display: inline-block;

assets/ananke/css/custom.css

@@ -1,55 +1,24 @@
-.jump-button {
+#jump-button {
-    display: inline-block;
+    color: white;
-    padding: 10px 20px;
-    font-size: 16px;
-    color: white !important;
-    background-color: #ff6347; /* Tomato color */
-    text-align: center;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: background-color 0.3s, box-shadow 0.3s;
 }
 
-.jump-button:hover {
+#site_logo {
-    background-color: #ff4500; /* Darker tomato color */
+    width: 100px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    height: 95px;
+    /* position: fixed */
 }
 
-.jump-button:active {
+/* color pallette */
-    background-color: #e03d0b; /* Even darker tomato color */
+/* :root {
-}
+    --primary-color: #63aa7b;
+    --secondary-color: #24583a;
+    --accent-color: #599b9c;
+    --accent-color-2: #645c84;
+    --background-color: #F3F7F4;
+    --text-color: #bd0505;
+} */
 
-.jump-button:focus {
+/* body, main {
-    outline: none;
+    background-color: var(--text-color) !important;
-    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.5);
+    color: var(--text-color) !important;
-}
+} */
-
-
-.share-buttons {
-    position: sticky;
-    width: 50px;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    z-index: 1000;
-}
-
-.share-btn {
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    padding: 10px;
-    margin: 5px 0;
-    text-decoration: none;
-    transition: background-color 0.3s;
-}
-
-.share-btn:hover {
-    background-color: #555;
-}
-
-.facebook-share { background-color: #3b5998; }
-.pinterest-share { background-color: #bd081c; }
-.x-share { background-color: #000000; }

layouts/_default/single.html

@@ -7,18 +7,18 @@
   {{ $section := .Site.GetPage "section" .Section }}
   <article class="flex-l flex-wrap justify-between mw8 center ph3" data-pagefind-body>
     <header class="mt4 w-100">
-      <aside class="instapaper_ignoref b helvetica tracked ttu">
+      <aside class="instapaper_ignoref b helvetica tracked ttu {{ $.Param "text_color_dark" | default "dark-gray" }}">
           {{/*
           CurrentSection allows us to use the section title instead of inferring from the folder.
           https://gohugo.io/variables/page/#section-variables-and-methods
           */}}
         {{ .CurrentSection.Title }}
       </aside>
-      <h1 class="f1 athelas mt3 mb1">
+      <h1 class="f1 athelas mt3 mb1 {{ $.Param "text_color_dark" | default "dark-gray" }}">
         {{- .Title -}}
       </h1>
       {{ with .Params.author | default .Site.Params.author }}
-      <p class="tracked">
+      <p class="tracked {{ $.Param "text_color_dark" | default "dark-gray" }}">
         {{ $.Render "by" }} <strong>
         {{- if reflect.IsSlice . -}}
             {{ delimit . ", " | markdownify }}
@@ -30,7 +30,7 @@
       {{ end }}
       {{/* Hugo uses Go's date formatting is set by example. Here are two formats */}}
       {{ if not .Date.IsZero }}
-      <time class="f6 mv4 dib tracked" {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}>
+      <time class="f6 mv4 dib tracked {{ $.Param "text_color" | default "mid-gray" }}" {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}>
         {{- .Date | time.Format (default "January 2, 2006" .Site.Params.date_format) -}}
       </time>
       {{end}}

layouts/_default/summary-with-image.html

@@ -1,6 +1,6 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 <article class="bb b--black-10">
-  <div class="db pv4 ph3 ph0-l no-underline dark-gray">
+  <div class="db pv4 ph3 ph0-l no-underline {{ $.Param "text_color" | default "dark-gray" }}">
     <div class="flex flex-column flex-row-ns">
       {{ if $featured_image }}
           {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}

layouts/index.html

@@ -16,7 +16,7 @@
       <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">
+            <h1 class="flex-none {{ $.Param "text_color_dark" | default "dark-gray" }}">
               {{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
             </h1>
           {{ end }}

layouts/page/single.html

@@ -3,7 +3,7 @@
   <div class="flex-l mt2 mw8 center">
     <article class="center cf pv5 ph3 ph4-ns mw7">
       <header>
-        <h1 class="f1">
+        <h1 class="f1 {{ $.Param "text_color_dark" | default "dark-gray" }}">
           {{ .Title }}
         </h1>
       </header>

layouts/partials/func/socials/GetRegisteredServices.html

@@ -33,7 +33,7 @@ theNewDynamic) and them to the list with key as .name and value as .url */}}
 {{ end }}
 
 {{/* Then we go through the current way of registering services as per referenced in README */}}
-{{ with site.Params.ananke_socials }}
+{{ with site.Params.socials }}
   {{ range $service := . }}
     {{/* Only if the service has a .name, we add it all its keys to the slice of registered services */}}
     {{ with .name }}

layouts/partials/func/style/GetMainCSS.html

@@ -27,7 +27,7 @@
   {{ range $service := . }}
     {{ with .color }}
       {{ $rule := printf `
-        .ananke-socials a.%s:hover {
+        .socials a.%s:hover {
           color: %s
         }` $service.name $service.color }}
       {{ $socials_rules = $socials_rules | append $rule }}

layouts/partials/head-additions.html

@@ -0,0 +1,7 @@
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI({ element: "#search", showSubResults: true });
+    });
+</script>

layouts/partials/jump-to-recipe.html

@@ -1 +1 @@
-<a href="#ingredients" class="jump-button">Jump to recipe</a>
+<a href="#ingredients" id="jump-button" class="link dim dib shadow-1 ph3 pv2 mb2 br3 {{ $.Param "jump_button_background_color" | default "orange" }}">Jump to recipe</a>

layouts/partials/page-header.html

@@ -1,14 +1,17 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-  {{/*  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">  */}}
+  {{ if .Site.Params.site_header_image }}
     {{ $img := resources.Get .Site.Params.site_header_image }}
     <header class="cover bg-top" style="background-image: url('{{ $img.RelPermalink }}');">
+  {{ else }}
+    <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  {{ end }}
     <div class="bg-black-60">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">
         {{ if not .Params.omit_header_text }}
-          <div class="f2 f1-l fw2 white-90 mb0 lh-title">{{ .Title | default .Site.Title }}</div>
+          <div class="f2 f1-l fw2 {{ .Site.Params.header_text_color | default "white-90" }} mb0 lh-title">{{ .Title | default .Site.Title }}</div>
           {{ with .Params.description  }}
             <div class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4">
               {{ . }}

layouts/partials/site-header.html

@@ -5,11 +5,11 @@
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">
+        <h1 class="f2 f-subheadline-l fw2 {{ .Site.Params.title_text_color | default "white-90" }} mb0 lh-title">
           {{ .Title | default .Site.Title }}
         </h1>
         {{ with .Params.description }}
-          <h2 class="fw1 f5 f3-l white-80 measure-wide-l center mt3">
+          <h2 class="fw1 f5 f3-l {{ $.Site.Params.description_text_color | default "white-80" }} measure-wide-l center mt3">
             {{ . }}
           </h2>
         {{ end }}
@@ -22,11 +22,11 @@
     <div class="pb3-m pb6-l {{ .Site.Params.background_color_class | default "bg-black" }}">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv3 ph3 ph4-ns">
-        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
+        <h1 class="f2 f-subheadline-l fw2 {{ .Site.Params.title_text_color | default "light-silver" }} mb0 lh-title">
           {{ .Title | default .Site.Title }}
         </h1>
         {{ with .Params.description }}
-          <h2 class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4">
+          <h2 class="fw1 f5 f3-l {{ $.Site.Params.description_text_color | default "white-80" }} measure-wide-l center lh-copy mt3 mb4">
             {{ . }}
           </h2>
         {{ end }}

layouts/partials/site-navigation.html

@@ -1,8 +1,8 @@
 <nav class="pv3 ph3 ph4-ns" role="navigation">
   <div class="flex-l justify-between items-center center">
-    <a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
+    <a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-{{ .Site.Params.menu_hover_color | default "white" }} no-underline {{ .Site.Params.menu_text_color | default "white-90" }} dib">
       {{ with .Site.Params.site_logo }}
-        <img src="{{ relURL . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
+        <img src="{{ relURL . }}" id="site_logo" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
       {{ else }}
         {{ .Site.Title }}
       {{ end }}
@@ -13,7 +13,7 @@
         <ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
           {{ range .Site.Menus.main }}
           <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
-            <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
+            <a class="hover-{{ $.Site.Params.menu_hover_color | default "white" }} no-underline {{ $.Site.Params.menu_text_color | default "white-90" }}" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
               {{ .Name }}
             </a>
           </li>

layouts/partials/social-follow.html

@@ -1,8 +1,8 @@
 {{ $socials := where (partialCached "func/socials/Get" "socials/Get") "follow" "!=" false }}
-<div class="ananke-socials">
+<div class="socials">
   {{ range $socials }}
     {{ $rel := .rel | default "noopener" }}
-    <a href="{{ .url }}" target="_blank" rel="{{ $rel }}" class="{{ .name }} ananke-social-link link-transition stackoverflow link dib z-999 pt3 pt0-l {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" }}" title="Follow us on {{ .label }}" aria-label="follow on {{ .label }}——Opens in a new window">
+    <a href="{{ .url }}" target="_blank" rel="{{ $rel }}" class="{{ .name }} social-link link-transition stackoverflow link dib z-999 pt3 pt0-l {{ cond (eq $.Site.Language.LanguageDirection "rtl") "ml1" "mr1" }}" title="Follow us on {{ .label }}" aria-label="follow on {{ .label }}——Opens in a new window">
       {{ with .icon }}
         <span class="icon">{{ . }}</span>
       {{ else }}

layouts/partials/social-share.html

@@ -6,34 +6,38 @@
 {{ $twitter_href := printf "https://twitter.com/intent/tweet?url=%s&text=%s" $url $title }}
 {{ $x_href := printf "https://x.com/intent/tweet?url=%s&text=%s" $url $title }}
 {{ $pinterest_href := printf "https://pinterest.com/pin/create/button/?url=%s&media=%s&description=%s" $url $featured_image $title }}
-{{ with site.Social.twitter }}
+{{ $twitter_href = printf "%s&via=%s" $twitter_href . }}
-  {{ $twitter_href = printf "%s&via=%s" $twitter_href . }}
-{{ end }}
 {{ $linkedin_href := printf "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s" $url $title }}
 {{ $hrefs := dict "facebook" $facebook_href "twitter" $twitter_href "linkedin" $linkedin_href "pinterest" $pinterest_href "x" $x_href}}
 
 {{ $services := where (partialCached "func/socials/Get" "socials/Get") "share" true }}
 {{ if not ($.Param "disable_share") }}
-  {{/*  <div id="sharing" class="mt3 ananke-socials">
+  <div id="sharing" class="mt3 socials {{ $.Param "text_color_dark" | default "dark-gray" }} share-buttons">
+    <span class="i">Share!</span>
     {{ range $service :=  $services }}
       {{ $href := index $hrefs .name }}
-      <a href="{{ $href }}" class="ananke-social-link {{ .name }} no-underline" aria-label="share on {{ .label }}">
+      <a href="{{ $href }}" class="share-btn social-link {{ .name }}-share no-underline" title="Share on {{ .label }}" aria-label="share on {{ .label }}">
-        {{ with .icon }}
-        <span class="icon"> {{ . }}</span>
-        {{ end }}
-      </a>
-    {{ end }}
-  </div>  */}}
-  <div id="sharing" class="ananke-socials share-buttons">
-    <span class="i">Share!<span>
-    {{ range $service :=  $services }}
-      {{ $href := index $hrefs .name }}
-      <a href="{{ $href }}" class="share-btn ananke-social-link {{ .name }}-share no-underline" title="Share on {{ .label }}" aria-label="share on {{ .label }}">
       {{ with .icon }}
         <span class="icon">{{ . }}</span>
       {{ end }}
       </a>
     {{ end }}
+    {{/*  email sharing  */}}
+    <a class="email-share-button share-btn social-link no-underline" title="Share with email" aria-label="share with email" href="mailto:?subject=Check out this recipe: {{ .Title }} &body=I found this great recipe and thought you might like it: {{ .Permalink }}">
+      <span class="icon">
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 772 5380 1638">
+          <path d="M1300 2035 l1245 -1245 1237 1237 c681 681 1238 1241 1238 1245 0 5
+          -1117 8 -2482 8 l-2483 0 1245 -1245z"/>
+          <path d="M4395 2410 l-720 -720 723 -723 722 -722 0 1443 c0 793 -1 1442 -3
+          1442 -1 0 -326 -324 -722 -720z"/>
+          <path d="M0 1695 l0 -1320 655 655 c360 360 655 659 655 663 0 5 -295 304
+          -655 665 l-654 657 -1 -1320z"/>
+          <path d="M767 772 c-416 -416 -757 -760 -757 -765 0 -4 1141 -7 2535 -7 1394
+          0 2535 3 2535 8 0 11 -1514 1522 -1525 1522 -6 0 -235 -225 -510 -500 l-500
+          -500 -500 500 c-275 275 -505 500 -510 500 -6 0 -351 -341 -768 -758z"/>
+        </svg>
+      </span>
+    </a>
   </div>
 
 

layouts/partials/summary-with-image.html

@@ -1,31 +0,0 @@
-{{ partial "func/warn" `You are currently using 'partial "summary-with-image"' in your project templates. 
-You should replace it with '.Render "summary-with-image"' 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` }}
-{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
-<article class="bb b--black-10">
-  <div class="db pv4 ph3 ph0-l no-underline dark-gray">
-    <div class="flex flex-column flex-row-ns">
-      {{ if $featured_image }}
-          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-        <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
-          <a href="{{.RelPermalink}}" class="db grow">
-            <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
-          </a>
-        </div>
-      {{ end }}
-      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
-        <h1 class="f3 fw1 athelas mt0 lh-title">
-          <a href="{{.RelPermalink}}" class="color-inherit dim link">
-            {{ .Title }}
-            </a>
-        </h1>
-        <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
-          {{ .Summary }}
-        </div>
-          <a href="{{.RelPermalink}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a>
-        {{/* TODO: add author
-        <p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}
-      </div>
-    </div>
-  </div>
-</article>

layouts/partials/summary.html

@@ -1,16 +0,0 @@
-{{ 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>

resources/_gen/assets/css/ananke/css/main.css_83735de7ca999e9c17f3419b41b93fdb.json

@@ -1 +0,0 @@
-{"Target":"ananke/css/main.min.css","MediaType":"text/css","Data":{}}