feat: add facebook icon #90

apvarun · Dec 25, 2022 · b609559 · b609559
1 parent 674dc46
commit b609559
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -170,6 +170,9 @@ DefaultContentLanguageInSubdir = true
   [[params.homepage.social.icons]]
     website = "instagram"
     url = "https://instagram.com"
+  [[params.homepage.social.icons]]
+    website = "facebook"
+    url = "https://facebook.com"
 
 [[menu.main]]
   name = "About"

diff --git a/layouts/partials/social.html b/layouts/partials/social.html
@@ -1,11 +1,11 @@
 <div class="{{ .Site.Params.ascentColor | default "bg-pink-50" }} dark:bg-gray-900">
-  <div class="container px-6 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+  <div class="container px-4 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
     <div>
       <div class="text-2xl font-bold mb-2">{{ .Site.Params.homepage.social.title }}</div>
       <p class="opacity-60">{{ .Site.Params.homepage.social.description }}</p>
     </div>
 
-    <ul class="flex justify-center gap-x-4 flex-wrap gap-y-2">
+    <ul class="flex justify-center gap-x-3 flex-wrap gap-y-2">
       {{range .Site.Params.homepage.social.icons}}
 
       {{ if eq .website "twitter" }}
@@ -461,6 +461,23 @@
       </li>
       {{ end }}
 
+      {{ if eq .website "facebook" }}
+      <li>
+        <a
+          href="{{ .url }}"
+          target="_blank"
+          rel="noopener"
+          aria-label="googlescholar"
+          class="p-1 inline-block rounded-full border border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-800 cursor-pointer transition-colors dark:text-gray-600 dark:hover:border-gray-300 dark:hover:text-gray-300"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
+         </svg>
+        </a>
+      </li>
+      {{ end }}
+
       {{end}}
     </ul>
   </div>