Implement light theme CSS

Author: georgedoescode

src/css/tailwind.css

@@ -18,7 +18,7 @@
     }
   }
   h2 {
-    @apply text-white text-3xl font-bold leading-none mb-2;
+    @apply text-blue-900 dark:text-white text-3xl font-bold leading-none mb-2;
   }
   @screen md {
     h2 {
@@ -42,9 +42,9 @@ section {
 
 section a,
 dd a {
-  @apply text-white;
+  @apply dark:text-white;
   @apply border-b;
-  @apply border-blue-100;
+  @apply border-blue-900 dark:border-blue-100;
 }
 section:not(.cards):not(.no-underline) a:hover,
 section:not(.cards):not(.no-underline) a:focus,
@@ -337,14 +337,14 @@ details[open] .summary-swap-open {
 
 /* Jamstack TV */
 .ais-SearchBox-input {
-  @apply bg-blue-900;
-  @apply text-white;
+  @apply bg-white dark:bg-blue-900;
+  @apply dark:text-white;
   @apply font-bold;
   @apply p-3;
   @apply pl-14;
   @apply mx-auto;
   @apply border;
-  border-color: #5A5F75;
+  @apply border-gray-300 dark:border-gray-400;
   @apply rounded-full;
   @apply block;
   @apply w-full;

src/site/_includes/components/cards-meetup.njk

@@ -1,7 +1,7 @@
 {% macro card(name, url, theme ) %}
 
-<a href="{{ url }}" target="_BLANK" rel="noopener" class="{{ theme }} bg-gradient-to-r block mb-4 border-gray-400 border rounded-xl rounded-tr-none text-center">
-  <div class="bg-gray-100 mt-3 py-8 rounded-xl-embed rounded-t-none card-shadow">
+<a href="{{ url }}" target="_BLANK" rel="noopener" class="{{ theme }} bg-gradient-to-r block mb-4 border-gray-100 dark:border-gray-400 border rounded-xl rounded-tr-none text-center">
+  <div class="bg-white dark:bg-gray-900 mt-3 py-8 rounded-xl-embed rounded-t-none card-shadow">
     <svg role="img" aria-label="Jamstack Group" aria-hidden="true" focusable="false" width="20" height="20" class="inline"><use xlink:href="#gem-jamstack" ></use></svg>
     <span class="font-bold ml-1">{{ name }} &rarr;</span>
   </div>

src/site/_includes/components/cards.njk

@@ -8,7 +8,7 @@
   {%- if item.data.language %} data-filter-language="{{ item.data.language | join(",") | lower }}"{% endif %}
   {%- if item.data.license %} data-filter-license="{{ item.data.license | join(",") | lower }}"{% endif %}>
   <a href="{{ item.url }}" class="flex-grow block border-0 bg-white text-gray-700 rounded-t-lg last:rounded-b-lg">
-    <div class="text-xl md:text-2xl lg:text-3xl font-bold text-ellipsis text-black bg-gradient-to-b border-b border-black rounded-t-lg p-4
+    <div class="text-xl md:text-2xl lg:text-3xl font-bold text-ellipsis text-black bg-gradient-to-b dark:border-b border-black rounded-t-lg p-4
     {%- if loopIndex % 4 === 0 %} bg-gradient-card-sunrise
     {%- elseif loopIndex % 4 === 1 %} bg-gradient-card-blue
     {%- elseif loopIndex % 4 === 2 %} bg-gradient-card-seafoam
@@ -76,7 +76,7 @@
     </div>
   </a>
   {% if item.data.startertemplaterepo %}
-  <a href="https://app.netlify.com/start/deploy?repository={{ item.data.startertemplaterepo}}" class="block px-4 py-3 text-gray-700 bg-white rounded-b-lg text-center md:text-lg whitespace-nowrap border-t">
+  <a href="https://app.netlify.com/start/deploy?repository={{ item.data.startertemplaterepo}}" class="block px-4 py-3 text-gray-700 bg-white rounded-b-lg text-center md:text-lg whitespace-nowrap border-b-0 border-t border-blue-100">
     <svg role="img" aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 40 40" class="inline-block mr-1" fill="#36b0bb"><use xlink:href="#logo-netlify-gem"/></svg>
     Deploy to Netlify
   </a>

src/site/_includes/components/meetup-link.njk

@@ -1,4 +1,4 @@
-  <tr class="{% if loop.index0 % 2 == 0 %}bg-gray-900{% endif %}">
+  <tr class="{% if loop.index0 % 2 == 0 %}bg-gray-200 dark:bg-gray-900{% endif %}">
     <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Group: </span>{{ item.group.name }}</td>
     <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Name: </span><a href="{{ item.link }}">{{ item.name }}</a></td>
     <td class="m-2 md:p-4 md:m-0 block md:table-cell"><span class="font-bold md:hidden">Venue: </span>{{ item.venue.name }}</dt>

src/site/_includes/components/section-heading.njk

@@ -1,9 +1,9 @@
 {% macro heading(title, icon, description ) %}
-  <h2 class="text-3xl mt-0 mb-2 text-white text-bold md:text-4xl md:mt-12">
+  <h2 class="text-3xl mt-0 mb-2 dark:text-white text-bold md:text-4xl md:mt-12">
     <img src="/img/svg/{{ icon }}" class="inline-block" />
     {{ title }}
   </h2>
-  <p class="text-md font-bold inline-block bg-pink-900 text-white p-y px-2 mb-4 md:text-lg leading-relaxed">
+  <p class="text-md font-bold inline-block bg-pink-900 dark:text-white p-y px-2 mb-4 md:text-lg leading-relaxed">
     {{ description | safe }}
   </p>
 {% endmacro %}
@@ -20,10 +20,10 @@
     </svg>
     {% endif %}
     <div>
-      <h3 class="font-bold text-white mb-2">
+      <h3 class="font-bold dark:text-white mb-2">
         {{ title }}
       </h3>
-      <div class="text-blue-100">
+      <div class="dark:text-blue-100">
         {{ description | safe }}
       </div>
     </div>

src/site/_includes/components/zinger-cta.njk

@@ -1,6 +1,6 @@
 
 {% macro cta(text, url, theme, icon ) %}
-  <a href="{{ url }}" target="_BLANK" rel="noopener" class="block mb-4 md:inline-block {{ theme }} bg-gradient-to-r border-none p-6 rounded-xl rounded-tr-none text-center">
+  <a href="{{ url }}" target="_BLANK" rel="noopener" class="text-white block mb-4 md:inline-block {{ theme }} bg-gradient-to-r border-none p-6 rounded-xl rounded-tr-none text-center">
     {% if icon %}<svg role="img" aria-label="{{ text }}" aria-hidden="true" focusable="false" width="40" height="40" class="mx-auto"><use xlink:href="{{ icon }}"></use></svg>{% endif %}
     <p class="font-bold text-lg {% if icon %}mt-2{% endif %}">
       {{ text }}

src/site/_includes/footer.njk

@@ -1,5 +1,5 @@
 <section>
-  <footer class="py-20 text-blue-200">
+  <footer class="py-20 dark:text-blue-200">
     <ul class="text-left md:flex justify-between">
       <li class="p-2">&copy; {{ page.date | formatDate('yyyy') }}  Netlify </li>
       <li class="p-2"><a href="https://jamstack.org/discord">Chat on Discord</a></li>

src/site/_includes/header.njk

@@ -19,7 +19,7 @@
 %}
 
 <header class="page-header md:flex md:flex-col md:h-screen">
-  <a href="/" class="block text-white hover:text-pink-900 mx-8 py-8">
+  <a href="/" class="block dark:text-white mx-8 py-8">
     <svg role="img" aria-hidden="true" focusable="false" width="163" height="31">
       <use xlink:href="#logo-jamstack"></use>
     </svg>
@@ -47,8 +47,8 @@
       {% include "navigation-links.njk" %}
 
       <div>
-        <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">
+        <div class="text-center text-sm mb-4 dark:text-gray-300">Connect with us</div>
+        <div class="grid grid-cols-3 divide-x divide-gray-200 dark:divide-gray-700 dark:text-gray-300">
           <a href="https://discord.gg/jamstack" target="_BLANK" rel="noopener" class="flex items-center justify-center p-4 hover:text-pink-500">
             <svg role="img" aria-label="Discord" focusable="false" width="36" height="36" class="fill-current">
               <use xlink:href="#logo-discord"></use>