Merge branch 'next-design-iteration' of github.com:jamstack/jamstack.org into ht/last-improvements-before-launch

Author: huguestennier

src/css/tailwind.css

@@ -54,7 +54,9 @@ dd a:focus {
 p+p {
   @apply mt-4;
 }
-
+section.cards {
+  max-width: 66rem;
+}
 
 /*
   CTA links
@@ -65,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;
@@ -193,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");
@@ -203,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/components/cards.njk

@@ -7,6 +7,11 @@
     {%- elseif loopIndex % 4 === 2 %} bg-gradient-card-seafoam
     {%- elseif loopIndex % 4 === 3 %} bg-gradient-card-gold
     {%- endif -%}">
+      {%- if item.data.opensource -%}
+      <div class="text-xxs mb-2">
+        <span class="inline-block uppercase bg-black text-white leading-5 px-2 rounded">Open Source</span>
+      </div>
+      {% endif %}
       {{ item.data.title }}
     </div>
     <div class="p-4">

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/layouts/tool.njk

@@ -54,6 +54,10 @@ layout: layouts/base.njk
     {%- endif %}
   </dl>
   <dl class="inline-block mb-4">
+    {%- if opensource %}
+    <dt class="inline-block font-bold mr-6">Open Source</dt>
+    <dd class="inline-block sr-only">Yes</dd>
+    {%- endif %}
     {%- if language %}
     <dt class="inline-block font-bold">Language:</dt>
     <dd class="inline-block mr-6">{{ language }}</dd>

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>
@@ -57,13 +56,15 @@ layout: layouts/base.njk
   <a href="/why-jamstack" class="cta">Read more about the benefits of Jamstack</a>
 </section>
 
-<section class="mb-20">
-  <h2 class="text-2xl">The future is highly distributed</h2>
-  <p class="mt-6 mb-8">
-    Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered   content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
-  </p>
-  <img src="/img/svg/architecture.svg" alt="Jamstack architecture diagram, Bidirectional arrows between Client and CDN, Client and Microservices">
-</section>
+<div class="bg-gray-100 mb-20">
+  <section>
+    <h2 class="text-2xl">The future is highly distributed</h2>
+    <p class="mt-6 mb-8">
+      Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered   content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.
+    </p>
+    <img src="/img/svg/architecture.svg" alt="Jamstack architecture diagram, Bidirectional arrows between Client and CDN, Client and Microservices">
+  </section>
+</div>
 
 <section class="text-center mb-20">
   <div class="md:w-8/12 mx-auto">

tailwind.config.js

@@ -4,7 +4,6 @@ module.exports = {
     './src/site/**/*.md'
   ],
   theme: {
-
     borderRadius: {
       'none': '0',
       'sm': '.125rem',
@@ -14,6 +13,9 @@ module.exports = {
       'full': '9999px',
     },
     extend: {
+      fontSize: {
+        xxs: "0.625rem",
+      },
       colors: {
         orange: {
           500: "#DF4A1F",
@@ -29,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
         }