feat(nav): add join-us button for memberships

_data/nav.yml

@@ -18,6 +18,10 @@ header:
     url: "/get-involved/"
     description: "Check out what Southern New Hampshire DSA is working on. Join DSA!"
 
+join:
+  title: "JOIN US"
+  url: "https://act.dsausa.org/donate/membership/"
+  description: "Join DSA!"
 
 # footer links
 footer:

_includes/header.html

@@ -87,6 +87,14 @@
           >
         </li>
         {%- endif -%} {%- endfor -%}
+        <li class="nav-item btn-join">
+          <a
+            href="{{ site.data.nav.join.url | absolute_url }}"
+            target="_blank"
+            title="{{ site.data.nav.join.title }}"
+            >{{ site.data.nav.join.title }}</a
+          >
+        </li>
       </ul>
       {% if site.search == true %} {%- include search-providers/search_form.html
       -%} {% endif %}

_sass/fonts/alfaslabone.scss

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: "AlfaSlabOne";
+    src: url("../fonts/AlfaSlabOne/AlfaSlabOne-Regular.tff") format("tff");
+    font-weight: normal;
+    font-style: normal;
+}

_sass/snh-dsa/nav.scss

@@ -1,3 +1,13 @@
+.btn-join {
+  align-items: center;
+  background-color: white;
+  border-radius: 0.5rem;
+  display: flex;
+  font-family: Alfa Slab One;
+  font-size: var(--size-sm);
+  padding: .25rem .5rem;
+}
+
 .hover-bounce:hover {
   animation-name: fa-bounce;
   animation-duration: 1s;

assets/css/main.scss

@@ -16,8 +16,12 @@
 // import custom variables and mixins to extend BS4
 @import "lone-wolf-theme";
 
-// Import the ManifoldDSA Font
+// Import fonts
+// manifold is the official dsa font
 @import "fonts/manifolddsa.scss";
+// alfa slab one is used for the join button
+@import "fonts/alfaslabone.scss";
+
 
 // DSA Related
 @import "dsa/colors.scss";