Merge branch 'next-design-iteration' of github.com:jamstack/jamstack.org into next-design-iteration

Author: zachleat

src/css/tailwind.css

@@ -67,7 +67,7 @@ a.cta:visited {
   @apply bg-pink-900;
   @apply text-white;
   @apply rounded-full;
-  @apply text-xs;
+  @apply text-sm;
   @apply font-semibold;
   @apply px-4;
   @apply py-2;
@@ -195,7 +195,7 @@ footer p a:focus {
 }
 .list-jams-logo > li:after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%235A5F75'/%3E%3C/svg%3E%0A");
-  left: 2em;
+  left: 3em;
 }
 .list-jams-logo-pink > li:after {
   background-image: url("data:image/svg+xml,%3Csvg width='8' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.68226 0 0 2.90578 0 6.5C0 10.0942 2.68226 13 6 13C9.31774 13 12 10.0942 12 6.5V0H6Z' fill='%23F0047F'/%3E%3C/svg%3E%0A");
@@ -205,7 +205,7 @@ footer p a:focus {
   @apply text-gray-400;
   content: "";
   position: absolute;
-  left: 2.25em; /* 36px /16 */
+  left: 3.25em; /* 36px /16 */
   top: 0;
   bottom: 0;
   border-left: 1px solid;

src/site/_includes/header.njk

@@ -39,10 +39,8 @@
       {% include "navigation-links.njk" %}
 
       <div>
-        <a href="https://jamstackconf.com/" class="block p-4 my-4 bg-gradient-jams hover:bg-gradient-pink-orange font-bold text-center">Jamstack Conf</a>
-
-        <div class="text-center text-sm mb-4">Connect with us</div>
-        <div class="grid grid-cols-3 divide-x divide-gray-700">
+        <div class="text-center text-sm mb-4 text-gray-300">Connect with us</div>
+        <div class="grid grid-cols-3 divide-x divide-gray-700 text-gray-300">
           <a href="https://jamstack.org/slack" target="_BLANK" rel="noopener" class="flex items-center justify-center p-4 hover:text-pink-500">
             <svg role="img" aria-label="Slack" focusable="false" width="30" height="30" class="fill-current"><use xlink:href="#logo-slack"></use></svg>
           </a>
@@ -53,6 +51,7 @@
             <svg role="img" aria-label="GitHub" focusable="false" width="36" height="36" class="fill-current"><use xlink:href="#logo-github"></use></svg>
           </a>
         </div>
+        <a href="https://jamstackconf.com/" class="block p-4 mt-4 bg-gradient-jams hover:bg-gradient-pink-orange font-bold text-center">Jamstack Conf</a>
       </div>
     </nav>
   </details>

src/site/_includes/navigation-links.njk

@@ -12,7 +12,7 @@
       {%- for childlink in link.children %}
         <li>
           <a href="{{ childlink.url }}"
-            class="block text-sm text-white hover:underline py-2 pl-12 pr-8{% if page.url.split("/")[1] == childlink.url.split("/")[1] %} bg-gray-900 font-bold{% endif %}">
+            class="block text-sm text-white hover:underline py-2 pl-16 pr-8{% if page.url.split("/")[1] == childlink.url.split("/")[1] %} bg-gray-900 font-bold{% endif %}">
             {{ childlink.text }}
           </a>
         </li>

src/site/index.njk

@@ -6,14 +6,13 @@ layout: layouts/base.njk
 {% import "components/ticker.njk" as ticker %}
 {% import "components/section-heading.njk" as section %}
 
-<section class="my-16 ">
+<section class="mt-16">
   <p class="w-1/2">Comprehensive guide for building Jamstack sites and home of the global Jamstack community.</p>
   <h1 class="hero-text">The modern way to&nbsp;build <img src="/img/svg/websites-and-apps.svg" width="545" height="88" alt="Websites and Apps" class="inline-block mr-2 hero-text-img"> that delivers better performance</h1>
   <a href="/community" class="cta">Join the global community</a>
 </section>
 
 <section class="mb-20 p-0">
-  <p class="px-8">Maximize efficiency with the tools you love</p>
   {{ ticker.icons() }}
   {{ ticker.main() }}
 </section>

tailwind.config.js

@@ -31,11 +31,12 @@ module.exports = {
           900: "#0D0F18",
           700: "#2D3247",
           400: "#5A5F75",
+          300: "#9AA0B6",
           200: "#DEDEDE",
           100: "#10121E"
         },
         pink : {
-          900 : '#D81467', // old
+          900 : '#D1036F', // old
           500 : '#F0047F',
           100 : '#FFB1C5' // old
         }