Navbar and other tweaks

Co-authored-by: Brian Mitchell <bman4789@gmail.com>
Co-authored-by: Ryan Rampersad <ryan.rampersad@gmail.com>

Author: BrianMitchL

src/css/tailwind.css

@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* custom styles below */
-
 [data-animated-logo] path {
   stroke-dasharray: 17364.90625;
   stroke-dashoffset: 17364.90625;
@@ -23,6 +21,13 @@
   }
 }
 
+@media (prefers-reduced-motion) {
+  * {
+    animation-play-state: paused !important;
+    transition: none !important;
+  }
+}
+
 .special-bg {
   background-color: #ffffff;
   background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23e5cf5f' fill-opacity='0.10' fill-rule='evenodd'/%3E%3C/svg%3E");

src/includes/_logo.njk

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg
   version="1.1"
-  viewBox="0 0 5066.654 5861.821"
+  viewBox="-50 -50 5166.654 5961.821"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
-    <clipPath id="a">
+    <clipPath id="anywhichway">
       <path d="m0 5e3h5e3v-5e3h-5e3z" />
     </clipPath>
   </defs>
@@ -14,11 +14,13 @@
       <path
         d="m0 0-4.022-4.505-8.436 0.283-15.081 4.791-5.83-3.352-7.83-14.464-13.555-7.478-15.145-19.634-8.802-8.329-167.968-96.744-100.561-36.617-20.172-13.99-8.491-3.182-25.096-4.258-68.222-25.171-128.06-75.683-77.329-80.121-31.532-15.259-122.569-142.164-123.447-141.811-35.689-19.739-5.423-8.936-2.433-8.843-6.067-4.543-6.853-2.552-5.113-3.204-2.481-4.003-5.083-11.549-2.829-4.46-28.637-23.275-17.057-8.038-26.298-32.43-30.992-22.381-19.235-7.184-29.732-27.594-46.321-31.577-23.939-23.061-9.286-23.663 1.591-3.162-6.881-3.503-8.115-6.42-3.984-6.813-4.174-12.684-1.762-2.928-2.659-1.978-8.34-2.412-2.925-1.422-2.594-2.442-2.073-3.098-1.799-3.897-0.822-4.601-2.178-19.082-1.239-3.307-1.013-1.977-1.855-2.33-2.662-1.893-7.459-2.167-8.719-0.727-9.295 0.66-7.46 2.709-2.328 0.349-1.184-2.487 0.19-16.437 0.578-47.309 0.587-47.322 0.586-47.341 0.579-47.303 0.556-47.323 0.579-47.339 0.595-47.304 0.578-47.327 0.123-10.908 0.332-24.64-10.099-2.195-6.335-4.972-6.986-8.348-5.65-10.139-2.245-10.221-4.96-6.448-11.691 0.436-13.111 2.726-9.277 0.493-7.545-6.787-11.366-19.881-7.708-4.22-21.497-0.237-4.981-1.639-3.992-3.558-2.991-3.522-1.971-1.627-0.577-2.232-6.01-10.406-2.48-3.221-4.288-2.419-13.442-2.387-27.898-18.137-9.447-2.632-16.33-7.907-14.322-18.664-20.627-40.565 2.395-21.735-14.286-22.28-45.02-44.709-4.78-9.09-1.856-12.522-3.246-56.565 9.863-26.258 22.871-5.29 26.306 0.871 20.315-7.753 6.042-11.341 7.892-28.606 4.071-10.914 9.183-12.023 9.607-10.043 7.59-11.688 2.625-14.265-2.207-13.457-15.003-25.727-3.417-17.311-2.737-13.607-6.768-8.624-8.217-7.051-7.185-9.178-4.346-12.261-2.014-13.918-0.379-33.196-3.257-15.699-0.935-8.818 2.44-3.814 9.352-24.968 0.787-16.848-2.916-14.726-6.748-10.463-10.791-4.004-7.186-7.129 3.559-16.479 12.921-33.367 5.122-31.741 2.584-31.978-1.676-4.754-7.363-12.751-1.659-8.061 3.541-24.082 0.351-9.063-3.342-20.208-21.622-46.773 14.362-12.79 32.998-21.41 37.781-37.997 9.533-6.365 3.33-6.386 2.613-6.994 2.387-4.612 23.258-14.388 83.227-13.045 18.921-7.024 18.338-14.546 15.627-19.74 14.228-31.997 4.59-8.188 5.834-6.19 7.221-3.533 62.533-9.806 28.78-10.431 82.988-74.243 20.987-34.572 41.934-79.27 10.906-14.112 21.024-9.363 63.5-55.751 6.806-3.538 6.769-1.815 52.101 1.068 3.114-1.238 31.165-24.849 4.069-2.15 4.619-1.391 19.775-1.108 6.541-3.073 3.579-3.498 2.281-4.162 1.505-4.913 1.127-5.67 4.107-10.328 12.885-15.792 4.486-9.739 23.259-8.247 7.297-4.389 5.549-5.749 3.747-7.278 2.472-8.416 3.038-18.011 0.872-17.169-0.767-21.969 0.549-6.457 1.239-6.31 2.311-6.297 3.066-5.148 7.648-8.805 3.553-5.594 2.044-6.768 1.985-14.619 0.446-14.112-5.461-40.771 0.303-6.873 4.608-19.742 0.418-7.861-1.62-23.494 0.674-9.941 3.738-19.26 0.958-9.818-0.607-9.45-2.67-17.596-176.941-4.373-176.953-3.691-176.97-2.899-176.971-2.197-177.008-1.514-122.446-0.584-54.533-0.149-177 0.015-177.003 0.682-176.999 1.446-176.956 2.197-176.985 2.859-176.947 3.643-176.928 4.388-176.956 5.047-176.89 5.78-176.876 6.579 6.441 164.094 6.434 164.08 6.435 164.051 6.433 164.058 6.436 164.038 6.434 164.038 6.432 163.959 6.413 163.999 1.136 28.91 0.01 0.199-2.64 2.462-3.259 7.695-13.303 28.701-4.899 5.762-12.097 11.353-5.448 6.798-14.872 11.982-22.08 7.926-41.423 6.247-10.164 9.901-10.714 22.614-17.078 46.174-9.973 17.703-24.574 31.336-13.092 19.395 2.934 15.666 7.192 15.44 4.108 4.468 4.92 3.722 20.466 13.563 12.531 13.3 5.597 4.562 39.051 20.696 14.476 10.865 5.236 5.108 4.431 5.739 2.072 3.306 17.147 36.189 11.385 18.93 4.011 12.751 6.5 45.288 1.505 3.845 1.989 3.909 1.789 2.762 3.677 7.594-8.06 56.172 0.79 17.73 6.891 16.309 4.52 20.731 0.546 9.446-2.401 27.785-2.243 4.307 1.15 8.652 1.39 5.567-0.059 4.886-11.063 20.731-2.015 6.472-1.354 8.02-0.663 15.2 3.271 48.288-2.56 15.912-7.152 13.235-16.823 21.128-27.919 49.913-3.097 8.268-0.529 7.57 0.331 6.599-0.482 5.566-2.854 5.871-7.975 10.183-2.679 5.395 4.056 14.995 0.297 15.838-1.837 27.802-2.858 14.797-15.326 24.129-4.633 10.546-0.403 16.158 7.422 25.642 2.561 16.746-1.013 16.445-6.216 26.503-0.932 11.712 1.459 7.466 5.244 12.158 1.714 5.061 1.087 8.142 0.36 25.22 1.984 7.647 7.616 9.95 3.199 11.83 2.026 3.184 1.078 3.333-1.75 4.742-3.096 3.34-5.988 1.996-4.975 4.101-5.878 1.996-2.669 2.092 2.074-0.113v5.536l-1.403 9.875-5.872 11.968-2.386 6.873-0.659 9.878 5.871 48.846 0.1 14.93-5.615 30.907 0.256 8.745 1.707 7.392 2.004 6.336 1.072 5.604-1.059 16.053-5.991 36.54-0.952 16.925 7.984 94.815-1.666 7.505-4.136 6.598-4.344 5.453-2.382 3.788 0.918 15.542 9.65 37.353 0.457 10.906-4.28 12.912 0.094 13.158 1.581 14.805 0.174 17.965 0.802 2.729 1.811 3.464 1.529 4.203v4.77l-2.073 3.93-7.794 7.175-5.118 20.817-1.761 26.56-4.681 13.215-6.312 11.908-6.097 15.412-4.965 26.562-3.414 9.581-11.226 15.664-1.685 3.04-0.482 1.911-1.355 0.882-1.766 0.728-1.646 1.592-0.809 3.35 3.03 5.405 0.104 4.374-11.148 37.173-0.597 16.992 8.19 17.532-16.559 21.686-6.989 25.672-4.349 28.039-19.273 56.125-6.513 27.187-2.538 28.447 1.382 30.936 9.788 51.372-1.817 11.923-2.777 10.692-6.405 49.195 2.212 8.889 6.772 13.125 2.649 8.126 0.802 8.274-2.145 11.97-1.571 23.798-9.562 43.894 5.89 31.279 14.454 26.352 11.662 27.987-2.448 36.142-10.251 26.061-3.498 12.717-2.249 29.09-12.589 40.876-2.418 26.155-2.264 6.829-3.052 6.508-2.551 6.959-1.61 15.069-1.039 9.998-4.639 11.935-3.214 12.398 2.412 17.894 34.775-1.689 108.082-5.051 108.118-4.752 108.136-4.45 108.119-4.145 108.177-3.853 108.17-3.544 108.152-3.253 108.162-2.944 108.198-2.645 4.273 1.67 3.366 4.493 1.444 7.927 1.495 73.102 1.767 85.173 1.391 67.072 0.85 42.271 27.96-12.276 58.828 0.411 27.438-8.49 33.774-21.082 8.208-7.191 5.6-12.102 3.038-30.604 4.358-16.874 1.822-14.027-3.089-33.146 3.375-15.144 5.462-15.007 17.464-75.389 19.49-83.818-0.913-38.754-0.464-15.199-0.805-13.905 0.972-12.227 4.283-13.104 6.229-8.531 46.857-39.961 36.223-16.987 19.584-3.11 83.255 8.818 9.381-1.638 4.214-2.162 4.667-3.782 4.416-4.79 3.421-5.231 1.265-5.461 1.452-15.818 0.668-3.847 9.319-4.035 97.706-7.487 79.241-5.908 19.316-14.383 12.751-55.089 15.166-18.113 10.856-2.249 69.838 10.739 8.131-3.722 16.57 8.864 37.164 2.948 15.828 11.251 3.825 11.444-0.749 10.65 1.156 7.828 16.95 4.98 15.671 8.037 63.461 11.59 62.485-4.135 75.38-4.919 11.984-4.013 35.545-23.991 78.921-22.792 38.282-8.963 9.257-12.467 1.467-12.467-9.542-4.099-22.132-5.86-9.543-5.296-3.965-17.29 7.479-10.882 13.423-2.436 9.995-2.552 43.005 6.705 21.686-0.543 18.166-9.154 8.199-16.836 3.586-12.078 0.616-30.698 2.49-17.869 5.671-12.352 16.803-22.73 17.201-36.899 6.482-7.25 9.021 0.34 12.884 5.036 11.995 7.534 6.218 7.764-0.728 15.534-4.874 15.108-1.032 15.17 10.505 15.737 11.124 6.019 51.912 8.592 42.021-1.89 13.642-8.832 6.898-15.902 4.705-19.178 6.977-18.525 8.093-10.773 8.466-8.33 9.199-6.002 52.925-23.23 43.744-5.595 10.537-5.585 8.461-8.246 16.509-22.66-10.082-19.293 12.202-10.347 37.138-5.405 10.564 0.853 3.939-1.477 4.439-5.415 0.804-7.432-2.5-7.648-0.796-6.2 6.164-3.114 43.874 4.932 11.304-3.086 9.382-5.926 9.277-2.972 30.934 16.763 44.483 6.315 18.819 13.876 16.574 19.142 65.118 49.092 21.167 11.075 9.808 7.431 41.696 25.73 24.481 6.18 16.868-10.128 1.602-7.081-5.17-9.031-0.218-6.835 3.643-9.305 4.507-3.73 5.264-2.422 5.953-5.311 4.971-10.185 3.891-22.369 5.536-12.259 18.488-11.72 24.536 1.251 44.673 15.714 12.098 1.383 6.663-4.943 6.077-6.532 10.253-3.464 5.176 0.793 14.625 7.801 5.642 1.666 3.581-1.192 2.875-2.101 3.673-1.108 145.336 25.456 29.164 0.357 24.025-9.588 6.438-7.355 28.361-44.68 6.807-8.047 7.799-6.001 30.736-15.629 9.079-0.766 48.686 23.012 11.151 3.076 8.859 0.474 8.794-2.244 10.98-5.368 6.012-1.637 16.915 4.771 11.078-0.019 32.212-7.08z"
         fill="#e5cf5f"
-        stroke="#000000" stroke-width="50"
+        stroke="#000000"
+        stroke-width="50"
+        stroke-linecap="round"
       />
 
     </g>
-    <g clip-path="url(#a)">
+    <g clip-path="url(#anywhichway)">
       <g transform="translate(1280.737 1655.265)">
         <path
           d="m0 0c-52.461 0-98.183 5.519-137.187 16.506v193.46c39.989-9.979 76.474-14.992 109.457-14.992 50.949 0 87.435 15.88 109.432 47.591 21.972 31.759 32.983 81.342 32.983 148.844l-9.739 735.441h232.393l9.739-733.978c0-127.95-29.241-225.412-87.723-292.41-58.482-66.949-144.933-100.462-259.355-100.462"

src/includes/header.njk

@@ -1,21 +1,43 @@
-<header class="bg-jsmn-yellow shadow">
-  <nav
-    class="container mx-auto p-2 max-w-3xl px-8 pt-2 flex justify-between items-center"
-  >
-    <a class="w-2/5 text-lg font-bold" href="{{ site.baseUrl }}"
-      >{{ site.name }}</a
-    >
-    <ul class="w-3/5 flex flex-wrap md:justify-between justify-evenly">
+<nav class="bg-gray-800 shadow-md relative">
+  <div class="container mx-auto px-2 sm:px-6 lg:px-8">
+    <div class="relative flex items-center justify-between h-16">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+        <button id="ope-let-me-get-this-for-ya" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false">
+          <svg class="block h-6 w-6" data-menu-button xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <svg class="hidden h-6 w-6" data-close-button xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-between">
+        <div class="flex-shrink-0">
+          <a href="{{ site.baseUrl }}" class="flex lg:hidden w-auto">
+            <img class="h-8" src="{{ site.baseUrl }}jsmn-logo.svg" alt="{{ site.name }} logo">
+          </a>
+          <a href="{{ site.baseUrl }}" class="hidden lg:flex items-center w-auto">
+            <img class="h-8 block" src="{{ site.baseUrl }}jsmn-logo.svg" alt="{{ site.name }} logo">
+            <span class="text-white font-bold block pl-4">{{ site.name }}</span>
+          </a>
+        </div>
+        <div class="hidden sm:block sm:ml-6">
+          <div class="flex">
+          {% for link in site.navigation %}
+            <a href="{{ site.baseUrl }}{{ link.path }}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">{{ link.text }}</a>
+          {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="hidden sm:hidden" data-mobile-menu>
+    <div class="px-2 pt-2 pb-3">
       {% for link in site.navigation %}
-      <li>
-        <a
-          class="font-bold transition-all duration-200 p-2 hover:bg-black hover:text-white"
-          href="{{ site.baseUrl }}{{ link.path }}"
-        >
-          {{ link.text }}
-        </a>
-      </li>
+        <a href="{{ site.baseUrl }}{{ link.path }}" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">{{ link.text }}</a>
       {% endfor %}
-    </ul>
-  </nav>
-</header>
+
+      {# <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">🚀</a> #}
+    </div>
+  </div>
+</nav>

src/includes/layouts/base.njk

@@ -45,5 +45,29 @@
     {% include "header.njk" %}
     <main role="main">{{ content | safe }}</main>
     {% include "footer.njk" %}
+    <script type="text/javascript">
+      /* ;) */
+      (function publicStaticVoidMain(stringArgs) {
+        console.log("%cHey! We'd love for you to give a talk, please reach out!", 'font-size: 2rem; color: #e5cf5f; background-color: #222;');
+        console.log("%c❤️", 'font-size: 5rem; color: red;');
+
+        window.onload = function () {
+          document.querySelector('#ope-let-me-get-this-for-ya').addEventListener('click', function () {
+            const menu = document.querySelector('[data-menu-button]');
+            const close = document.querySelector('[data-close-button]');
+            const mobileMenu = document.querySelector('[data-mobile-menu]');
+
+            menu.classList.toggle('block');
+            menu.classList.toggle('hidden');
+
+            close.classList.toggle('hidden');
+            close.classList.toggle('block');
+
+            mobileMenu.classList.toggle('hidden');
+            mobileMenu.classList.toggle('block');
+          });
+        };
+      })();
+    </script>
   </body>
 </html>

src/index.njk

@@ -16,19 +16,21 @@ links:
 ---
 
 <!-- primary content -->
-<div class="">
+<div class="special-bg">
   <div class="container mx-auto px-2 py-10 mb-10">
     <div class="x-h-screen flex justify-center items-center">
       <div>
-        <div class="text-center">
-          <div class="w-2/3 mx-auto">
+        <div class="text-center flex flex-wrap sm:flex-no-wrap justify-center px-4 sm:px-0">
+          <div class="w-full sm:w-1/2">
             <div class="pl-8 sm:pl-16" data-animated-logo>{% include "_logo.njk" %}</div>
           </div>
-          <div class="text-4xl font-bold"><h1>JavaScriptMN</h1></div>
-          <p class="text-xl">
-            A monthly meetup for anyone interested in JavaScript and related
-            technologies in the Twin Cities.
-          </p>
+          <div class="w-full sm:w-1/2 self-center">
+            <div class="text-4xl font-bold"><h1>JavaScriptMN</h1></div>
+            <p class="text-xl">
+              A monthly meetup for anyone interested in JavaScript and related
+              technologies in the Twin Cities.
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/sponsors.njk

@@ -7,11 +7,15 @@ title: Sponsors
   <div class="x-h-screen flex justify-center items-center">
     <div class="w-full">
       <div class="mb-8">
-        <h1
+
+        <div class="flex justify-between items-center">
+                <h1
           class="inline-block bg-black text-white text-3xl font-bold px-4 mb-2 transform -rotate-1"
         >
           Sponsors
         </h1>
+        <p><a class="hover:underline" href="{{ site.baseUrl }}sponsorship-opportunities/">Become a sponsor →</a></p>
+        </div>
 
         <div class="border-jsmn-yellow border-4 p-4 divide-y divide-gray-200">
           {% for section in sponsors %}