Update gradients on index page, add border to inputs in light mode

Author: georgedoescode

src/css/tailwind.css

@@ -83,7 +83,6 @@ a.cta:focus {
   box-shadow: 0px 3px 15px rgba(241, 86, 77, 0.6);
 }
 
-
 /*
   Footer links
 */
@@ -347,7 +346,7 @@ details[open] .summary-swap-open {
   @apply pl-14;
   @apply mx-auto;
   @apply border;
-  @apply border-gray-300 dark:border-gray-400;
+  @apply border-gray-200 dark:border-gray-400;
   @apply rounded-full;
   @apply block;
   @apply w-full;

src/site/_includes/components/color-theme-selector.njk

@@ -1,7 +1,7 @@
 <div class="flex justify-end p-4">
   <label class="color-theme-selector-wrapper inline-flex invisible" data-color-theme-selector>
     <span class="sr-only">Color theme</span>
-    <select class="text-black py-1 px-2 rounded-default border border-white bg-white">
+    <select class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
       <option selected value="system">System</option>
       <option value="dark">Dark</option>
       <option value="light">Light</option>

src/site/_includes/search-js.njk

@@ -43,7 +43,7 @@ search.addWidgets([
     cssClasses: {
       //root: 'MyCustomSortBy',
       select: [
-        'text-black py-1 px-2 rounded-default border border-white bg-white',
+        'text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white',
       ],
     },
   }),

src/site/community.njk

@@ -78,7 +78,7 @@ layout: layouts/base.njk
       </div>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">Country</span>
-        <select data-filter-bind="country" class="text-black py-1 px-2 rounded-default border border-white bg-white">
+        <select data-filter-bind="country" class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
           <option selected value="">All Countries</option>
           {%- for country in community | select("country") | flatten | unique | sort(false, false) %}
           <option value="{{ country | lower }}">{{ country }}</option>

src/site/generators.njk

@@ -24,7 +24,7 @@ layout: layouts/base.njk
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Language</span>
-              <select data-filter-bind="language" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-filter-bind="language" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="">All Languages</option>
                 {%- for language in collections.generators | select("data.language") | flatten | unique | sort(false, false) %}
                 <option value="{{ language | lower }}">{{ language }}</option>
@@ -33,7 +33,7 @@ layout: layouts/base.njk
             </label>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Template</span>
-              <select data-filter-bind="template" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-filter-bind="template" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="">All Templates</option>
                 {%- for template in collections.generators | select("data.templates") | flatten | unique | sort(false, false) %}
                 <option value="{{ template | lower }}">{{ template }}</option>
@@ -42,7 +42,7 @@ layout: layouts/base.njk
             </label>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">License</span>
-              <select data-filter-bind="license" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-filter-bind="license" data-filter-delimiter="," class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="">All Licenses</option>
                 {%- for license in collections.generators | select("data.license") | flatten | unique | sort(false, false) %}
                 <option value="{{ license | lower }}">{{ license }}</option>
@@ -56,7 +56,7 @@ layout: layouts/base.njk
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Sort by</span>
-              <select data-sort class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-sort class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="githubstars-numeric-descending">GitHub Stars</option>
                 <option value="name">Name</option>
               </select>

src/site/headless-cms.njk

@@ -24,7 +24,7 @@ layout: layouts/base.njk
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">CMS Type</span>
-              <select data-filter-bind="typeofcms" class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-filter-bind="typeofcms" class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="">Any CMS Type</option>
                 {%- for template in collections.cms | select("data.typeofcms") | unique | sort(false, false) %}
                 <option value="{{ template | lower }}">{{ template }}</option>
@@ -33,7 +33,7 @@ layout: layouts/base.njk
             </label>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">License</span>
-              <select data-filter-bind="opensource" class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-filter-bind="opensource" class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="">Any License</option>
                 {%- for opensource in collections.cms | select("data.opensource") | unique | sort(true, false) %}
                 <option value="{{ opensource | lower }}">{% if opensource == "No" %}Closed{% else %}Open{% endif %} source</option>
@@ -47,7 +47,7 @@ layout: layouts/base.njk
             </div>
             <label class="inline-flex pr-4 pb-2">
               <span class="sr-only">Sort by</span>
-              <select data-sort class="text-black py-1 px-2 rounded-default border border-white bg-white">
+              <select data-sort class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
                 <option selected value="githubstars-numeric-descending">GitHub Stars</option>
                 <option value="name">Name</option>
               </select>

src/site/index.njk

@@ -14,10 +14,10 @@ layout: layouts/base.njk
 </section>
 
 <section class="relative p-10 mb-16">
-  <div class="p-2 rounded-lg bg-gradient-jams" w-full>
-    <div class="flex flex-col bg-white dark:bg-blue-900 p-10 text-xl">
+  <div class="p-1 rounded-lg bg-gradient-pink-orange" w-full>
+    <div class="flex flex-col bg-white dark:bg-blue-900 p-10 text-xl rounded-sm">
       <a class="border-b-0" name="what-is-jamstack">
-        <h1>What is <span class="font-extrabold text-transparent bg-clip-text bg-gradient-jams">Jamstack</span>?</h1>
+        <h1>What is <span class="font-extrabold text-transparent bg-clip-text bg-gradient-pink-orange">Jamstack</span>?</h1>
       </a>
       <p>
         Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.