feat: add calendar to nav

This adds a calendar icon that links to events@bytecodealliance.org calendar.

Author: ricochet

_includes/nav.html

@@ -22,6 +22,10 @@
                     <span>Zulip</span>
                 </a>
             </li>
+            <li class="calendar-link"><a href="https://calendar.google.com/calendar/embed?src=events%40bytecodealliance.org">
+                    <img src="{{ site.baseurl }}/images/calendar-icon.svg" alt="Calendar link" width="28px;" height="27px;">
+                    <span>Calendar</span>
+                </a>
         </ul>
     </div>
 </nav>

css/style.css

@@ -179,10 +179,9 @@ body[id^="posts-"] nav a[href^="/articles"] {
   text-decoration: underline;
 }
 
-#site-nav ul li.github-link a {
-  padding: 4px 12px;
-}
-#site-nav ul li.zulip-link a {
+#site-nav ul li.github-link a,
+#site-nav ul li.zulip-link a,
+#site-nav ul li.calendar-link a {
   padding: 4px 12px;
 }
 
@@ -218,10 +217,9 @@ body[id^="posts-"] nav a[href^="/articles"] {
   filter: none;
 }
 
-#site-nav .github-link span {
-  display: none;
-}
-#site-nav .zulip-link span {
+#site-nav .github-link span,
+#site-nav .zulip-link span,
+#site-nav .calendar-link span {
   display: none;
 }
 
@@ -284,46 +282,34 @@ body[id^="posts-"] nav a[href^="/articles"] {
   }
 
   #site-nav ul li,
-  #site-nav ul li.github-link {
-    position: relative;
-    float: none;
-    padding: 10px 0 10px 34px;
-    border-bottom: 1px solid #f2f2f2;
-  }
-  #site-nav ul li.github-link {
-    left: -24px;
-    top: 0;
-  }
-  #site-nav ul li.zulip-link {
+  #site-nav ul li.github-link,
+  #site-nav ul li.zulip-link,
+  #site-nav ul li.calendar-link {
     position: relative;
     float: none;
     padding: 10px 0 10px 34px;
     border-bottom: 1px solid #f2f2f2;
-  }
-  #site-nav ul li.zulip-link {
     left: -24px;
     top: 0;
   }
 
-
   #site-nav ul li a {
     margin: 0;
     padding: 0;
     border-bottom: none !important;
   }
 
-  #site-nav .github .zulip {
+  #site-nav .github .zulip .calendar {
     position: relative;
     top: -2px;
     left: -6px;
     width: 20px;
     height: 20px;
   }
 
-  #site-nav .github-link span {
-    display: inline;
-  }
-  #site-nav .zulip-link span {
+  #site-nav .github-link span,
+  #site-nav .zulip-link span,
+  #site-nav .calendar-link span {
     display: inline;
   }