Adding social links in footer to be consistent across web properties (#…

…1317) * social links on footer * fixes link to mastodon * changing to use class to target social icons --------- Co-authored-by: Sebastian Hermida <[email protected]>
dnsimple · Dec 11, 2024 · 41e9dd8 · 41e9dd8
1 parent a6fbf18
commit 41e9dd8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 0 deletions.
diff --git a/content/assets/css/colorscheme.scss b/content/assets/css/colorscheme.scss
@@ -27,6 +27,7 @@
   --gray: hsl(50, 0%, 50%);
   --orange: hsl(30, 100%, 50%);
   --yellow: hsl(47, 100%, 50%);
+  --icon-color: hsl(0deg 0% 70%);
 }
 
 /* Dark Mode */
@@ -48,6 +49,7 @@
   --gray: hsl(50, 0%, 70%);
   --orange: hsl(30, 100%, 60%);
   --yellow: hsl(57, 100%, 50%);
+  --icon-color: hsl(255deg 21% 50%);
 }
 
 body {
@@ -198,3 +200,7 @@ input {
     content: url("/assets/images/vendors/linux-foundation-color.png");
   }
 }
+
+footer .social-media path {
+  fill: var(--icon-color);
+}
diff --git a/layouts/default.html b/layouts/default.html
@@ -94,7 +94,11 @@
           <h2 class="ma0 pt2 pb3 b">Get Help From Developers</h2>
           <p class="measure">Everyone at DNSimple enjoys writing support docs.<br>We love answering your emails, too.</p>
           <a href="https://dnsimple.com/campaign/support?utm_source=support&utm_medium=web&utm_content=cta-footer" class="link grow br2 ph4 pv3 mb2 dib white bg-blue hover-white b">Try us free for 30 days</a>
+
+
+          <%= render "/social_links.*" %>
         </div>
+
         <div class="w-100 w-30-ns tc tl-ns">
           <nav>
             <a href="https://dnsimple.com/campaign/support?utm_source=support&utm_medium=web&utm_content=link-footer" class="pb2 f4 db link">DNSimple.com</a>

diff --git a/layouts/social_links.html b/layouts/social_links.html
@@ -0,0 +1,61 @@
+<div class="social-media flex justify-start-ns justify-center items-center pv4">
+  <!-- twitter / x -->
+  <a href="https://twitter.com/dnsimple" rel="noopener noreferrer" aria-label="Visit us on X" target="_blank" class="grow mr4">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path fill="#fff" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
+    </svg>
+  </a>
+
+  <!-- youtube -->
+  <a href="https://www.youtube.com/channel/UC_BHoTHFiZ1GTo3-rkfjHkA" aria-label="Visit us on YouTube" rel="noopener noreferrer" target="_blank" class="grow mr4">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="36" viewBox="0 0 576 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path
+        fill="#fff"
+        d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
+      />
+    </svg>
+  </a>
+
+  <!-- linkedin -->
+  <a href="https://www.linkedin.com/company/dnsimple/" target="_blank" rel="noopener noreferrer" class="grow mr4">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="28" viewBox="0 0 448 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path
+        fill="#fff"
+        d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"
+      />
+    </svg>
+  </a>
+
+  <!-- bluesky -->
+  <a href="https://bsky.app/profile/dnsimple.bsky.social" aria-label="Visit us on Blue Sky Social" rel="noopener noreferrer" target="_blank" class="grow mr4">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path
+        fill="#fff"
+        d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
+      />
+    </svg>
+  </a>
+
+  <!-- facebook -->
+  <a href="https://www.facebook.com/dnsimple" aria-label="Visit us on Facebook" rel="noopener noreferrer" target="_blank" class="grow mr4">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="20" viewBox="0 0 320 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path fill="#fff" d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z" />
+    </svg>
+  </a>
+
+  <!-- mastodon -->
+  <a href="https://dnsimple.social/@trusty" aria-label="Visit us on Mastodon" rel="noopener noreferrer" target="_blank" class="grow">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="28" viewBox="0 0 448 512">
+      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+      <path
+        fill="#fff"
+        d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"
+      />
+    </svg>
+  </a>
+</div>