feat(style): use custom tailwind.config

Foxy · Sep 11, 2020 · 02cf030 · 02cf030
1 parent bc22d5a
commit 02cf030
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 93 deletions.
diff --git a/src/_assets/stylesheets/app.css b/src/_assets/stylesheets/app.css
@@ -32,68 +32,43 @@ img#logo {
 }
 
 #content > hr {
-	@apply m-4 mx-8 border-primary;
+	@apply m-xs mx-s border-primary;
 }
 
 [data-foxy-product-container] div.text-dark.text-base > p:last-of-type {
 	@apply pb-0;
 }
 
 h1 {
-	@apply text-3xl text-left text-primary-dark font-bold leading-none pb-2;
+	@apply text-xxxl text-left text-primary font-bold leading-none pb-m;
 }
 h2 {
-	@apply text-2xl text-left text-primary font-bold leading-none pb-2;
+	@apply text-xl text-left text-secondary font-bold leading-none pb-s;
 }
 h3 {
-	@apply text-xl text-left text-primary font-bold leading-none pb-2;
+	@apply text-l text-left text-primary font-bold leading-none pb-xs;
 }
 h4 {
-	@apply text-lg text-left text-primary font-bold leading-none pb-2;
+	@apply text-m text-left text-primary font-bold leading-none pb-xs;
 }
 p,
 ol,
 ul {
-	@apply pb-4;
+	@apply pb-xs;
 }
 ul {
-	@apply list-disc px-8 text-left;
+	@apply list-disc px-s text-left list-inside;
 }
 ol {
-	@apply list-decimal px-8 text-left;
+	@apply list-decimal px-s text-left list-inside;
 }
 ul li,
 ol li {
-	@apply pb-1;
+	@apply pb-xs;
 }
 
 #content > section {
-	@apply pt-8 p-8 text-left relative;
-}
-
-/**
- * Set variables for the lumo theme
- */
-foxy-donation {
-	--lumo-primary-text-color: #05668d;
-	--lumo-primary-color-50pct: rgba(2, 128, 144, 0.5);
-	--lumo-primary-color-10pct: rgba(2, 128, 144, 0.1);
-	--lumo-primary-color: #028090;
-	--lumo-header-text-color: #05668d;
-	--lumo-body-text-color: #028090;
-	--lumo-primary-contrast-color: #fefff5;
-	--lumo-tint-5pct: rgba(240, 243, 189, 0.05);
-	--lumo-tint-10pct: rgba(240, 243, 189, 0.1);
-	--lumo-tint-20pct: rgba(240, 243, 189, 0.2);
-	--lumo-tint-30pct: rgba(240, 243, 189, 0.3);
-	--lumo-tint-40pct: rgba(240, 243, 189, 0.4);
-	--lumo-tint-50pct: rgba(240, 243, 189, 0.5);
-	--lumo-tint-60pct: rgba(240, 243, 189, 0.6);
-	--lumo-tint-70pct: rgba(240, 243, 189, 0.7);
-	--lumo-tint-80pct: rgba(240, 243, 189, 0.8);
-	--lumo-tint-90pct: rgba(240, 243, 189, 0.9);
-	--lumo-tint: #f0f3bd;
-	--lumo-secondary-text-color: #02c39a;
+	@apply p-xl text-left relative;
 }
 
 @tailwind utilities;
diff --git a/src/_includes/addtocart_button.njk b/src/_includes/addtocart_button.njk
@@ -23,7 +23,7 @@
       if addToCartBtn.monthly
     %}&sub_frequency=1m{% endif %}"
   data-foxy-product-link
-  class="block no-underline text-center w-full shadow bg-{{ addToCartBtn.color }} hover:bg-dark focus:shadow-outline focus:outline-none text-white text-xs px-1 rounded mb-2 leading-2"
+  class="h-full no-underline text-center w-full shadow-xs bg-{{ addToCartBtn.color }} hover:bg-dark focus:shadow-outline focus:outline-none text-primary-contrast text-xs px-xs rounded leading-m flex items-center justify-center"
   >
   <strong>{{ addToCartBtn.text }}</strong>
   ({{ addToCartBtn.currency }}{{ addToCartBtn.price }})

diff --git a/src/_includes/custom_number_input.njk b/src/_includes/custom_number_input.njk
@@ -1,13 +1,11 @@
-<div class="w-1/3 pr-1">
-  <div class="custom-number-input">
-    <div class="flex flex-row w-full rounded-lg relative bg-transparent">
-      <button data-action="decrement" class=" bg-gray-300 text-dark hover:text-light hover:bg-dark h-full w-20 rounded-l cursor-pointer outline-none">
-        <span class="m-auto text-2xl leading-none font-thin">−</span>
+  <div class="custom-number-input h-full text-xl font-thin text-contrast-60">
+    <div class="flex flex-row w-full justify-between h-full text-xl rounded bg-shade-20 overflow-hidden relative">
+      <button data-action="decrement" class="hover:text-primary-contrast hover:bg-contrast-70 h-full w-s cursor-pointer outline-none">
+        <span class="m-auto leading-none font-thin">−</span>
       </button>
-      <input type="number" min="1" class="outline-none overflow-hidden focus:outline-none text-center w-full bg-gray-300 font-semibold text-xs text-dark hover:text-black focus:text-black  md:text-basecursor-default flex items-center  outline-none" name="quantity" value="1"></input>
-      <button data-action="increment" class="bg-gray-300 text-dark hover:text-light hover:bg-dark h-full w-20 rounded-r cursor-pointer">
-        <span class="m-auto text-2xl leading-none font-thin">+</span>
+      <input type="number" min="1" class="outline-none overflow-hidden bg-transparent focus:outline-none text-center w-s font-semibold text-xs text-contrast-60 hover:text-contrast focus:text-contrast  md:text-basecursor-default flex items-center  outline-none" name="quantity" value="1"></input>
+      <button data-action="increment" class="hover:text-primary-contrast hover:bg-contrast-70 h-full w-s cursor-pointer">
+        <span class="m-auto leading-none font-thin">+</span>
       </button>
     </div>
   </div>
-</div>
diff --git a/src/_includes/footer_bottom.njk b/src/_includes/footer_bottom.njk
@@ -1,20 +1,20 @@
-<footer class="font-sans bg-dark text-white py-8 px-4">
+<footer class="font-sans bg-contrast-70 text-primary-contrast py-xl px-m">
   <div class="mx-auto container overflow-hidden flex flex-col lg:flex-row justify-between">
 
-      <div class="text-gray-700 flex flex-col">
-        <div class="inline-block py-2 px-3 text-white uppercase font-medium tracking-wide">Follow Us</div>
-        <div class="flex pl-4 justify-start">
+      <div class="flex flex-col">
+        <div class="inline-block py-s px-s uppercase font-medium tracking-wide">Follow Us</div>
+        <div class="flex pl-m justify-start">
         {% for key, i in site.social_networks %}
           <a href="{{ i.url }}"
-          class="block flex items-center text-white hover:text-light mr-6 no-underline" >
+          class="block flex items-center text-primary-contrast hover:text-tertiary mr-l no-underline" >
             <i class="{{ i.icon }}"></i>
           </a>
         {% endfor %}
         </div>
       </div>
     </div>
 
-    <div class="pt-4 mt-4 text-white text-xs border-t border-light text-center">
+    <div class="pt-m mt-m text-contrast-primary text-xs border-t border-contrast-30 text-center">
       ©{% currentYear %} {{ site.author }}
     </div>
 

diff --git a/src/_includes/listLink.njk b/src/_includes/listLink.njk
@@ -1,6 +1,6 @@
 <li>
   <a href="{{ item.url }}"
-    class="inline-block py-2 px-3 text-gray-900 hover:text-gray-700 no-underline"
+    class="inline-block py-m px-m text-contrast-90 hover:text-contrast-70 no-underline"
     title="{{ item.description }}"
     >{{ item.name }}</a>
 </li>
diff --git a/src/_includes/nav.njk b/src/_includes/nav.njk
@@ -1,9 +1,9 @@
-<nav id="menu" class="font-sans bg-white text-center flex justify-between my-4 mx-auto container overflow-hidden">
-  <a href="/" class="block text-left ml-4" style="max-width:10rem">
+<nav id="menu" class="font-sans text-center flex justify-between my-s mx-auto container overflow-hidden">
+  <a href="/" class="block text-left ml-l" style="max-width:10rem">
     <img src="{{store.logo}}" id="logo" alt="Our logo" >
   </a>
 
-  <ul class="text-sm text-gray-700 list-none p-0 flex items-center">
+  <ul class="text-s text-contrast-70 list-none p-0 flex items-center">
     {%- for item in site.navigation -%}
       {% include "listLink.njk" %}
     {%- endfor -%}

diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -15,11 +15,11 @@
     <script type="module" src="https://static.www.foxycart.com/beta/foxy-elements/0.3.0/foxy-donation.js"></script>
   </head>
   <body class="font-sans">
+    {% include "lumo.html" %}
     {# {% include "nav.njk" %} #}
     {{ content | safe }}
     {# {% include "footer_bottom.njk" %} #}
     <script src="/static/app.bundled.js"></script>
     <script data-cfasync="false" src="https://cdn.foxycart.com/{{ store.storedomain | replace(".foxycart.com", "") }}/loader.js" async defer></script>
-
   </body>
 </html>
diff --git a/src/_layouts/onepage.njk b/src/_layouts/onepage.njk
@@ -25,7 +25,7 @@ title: One-page complete e-commerce or live-event site.
       allowfullscreen></iframe>
   </div>
   </div>
-  <div id="content" class="w-full sm:w-1/2 h-full sm:overflow-y-scroll mt-64 sm:mt-0 z-10">
+  <div id="content" class="w-full sm:w-1/2 h-full sm:overflow-y-scroll mt-m sm:mt-0 z-10">
     {% include "nav.njk" %}
     {{ content | safe }}
     {% include "footer_bottom.njk" %}

diff --git a/src/index.njk b/src/index.njk
@@ -3,7 +3,7 @@ layout: onepage.njk
 title: JAMStack e-commerce with Foxy.io
 ---
 
-<section id="welcome" class="md:p-12">
+<section id="welcome" class="md:p-l">
   <h1>
     {{ site.title }}
   </h1>
@@ -43,7 +43,7 @@ title: JAMStack e-commerce with Foxy.io
 {% if site.texts.aboutTitle %}
 <hr />
 
-<section id="about" class="md:p-12">
+<section id="about" class="md:p-l">
   {% include 'backToTop.njk' %}
   <h2>{{ site.texts.about_title }}</h2>
 
@@ -59,7 +59,7 @@ title: JAMStack e-commerce with Foxy.io
 {% endif %}
 
 <hr />
-<section id="donate" class="md:p-12">
+<section id="donate" class="md:p-l">
   {% include 'backToTop.njk' %}
   <h2>{{ site.texts.donate_title }}</h2>
   {% set strippedStoreDomain = store.storedomain.replace('.foxycart.com', '') %}
@@ -82,33 +82,34 @@ title: JAMStack e-commerce with Foxy.io
 
 <hr />
 
-<section id="items" class="pb-0 md:p-12 md:pb-0">
+<section id="items" class="pb-0 md:p-l md:pb-0">
   {% include 'backToTop.njk' %}
   <h2>{{ site.texts.needed_items_title }}</h2>
 </section>
 
-<div class="container p-2 pb-4 m-auto flex w-full flex-wrap items-stretch justify-start relative">
+<div class="container p-s pb-m m-auto flex w-full flex-wrap items-stretch justify-start relative">
   {% for product in collections.product %}
 
-    <div class="flex flex-col items-center w-full lg:w-1/2 p-2">
+    <div class="flex flex-col items-center w-full lg:w-1/2 p-s">
       {# TIP: Use includes to avoid repetition
           11ty recognizes template files in the _includes folder.
       #}
-      <div data-foxy-product-container="data-foxy-product-container" class="rounded-md overflow-hidden shadow-lg border-dark border-2 h-full w-full">
+
+      <div data-foxy-product-container class="rounded overflow-hidden shadow-xs border-primary border-2 h-full w-full">
         {% if product.data.image %}
           <div>
             {% productPicture product.data.image,
             product.data.image_alt_text %}
           </div>
         {% endif %}
 
-        <div class="p-3">
+        <div class="p-m">
           <input type="hidden" name="name" value="{{ product.data.name }}">
           <input type="hidden" name="price" value="{{ product.data.price }}">
 
           <div class="flex flex-wrap text-lg">
             <div class="w-2/3">
-              <h4 class="font-bold mb-1 text-dark">{{ product.data.name }}</h4>
+              <h4 class="font-bold mb-xs text-contrast-60">{{ product.data.name }}</h4>
             </div>
             <div class="w-1/3 text-right text-primary">
               {% if product.data.price < 10000 %}
@@ -124,18 +125,20 @@ title: JAMStack e-commerce with Foxy.io
             </div>
           </div>
 
-          <hr class="my-1">
+          <hr class="my-xs border-contrast-20">
 
-          <div class="text-dark text-base">
+          <div class="text-contrast-60">
             {{ product.templateContent|safe }}
           </div>
 
-          <hr class="my-3">
+          <hr class="my-xs border-contrast-20">
 
-          <div class="flex flex-wrap leading-7 text-sm space-x-2 justify-between">
-            {% include "custom_number_input.njk" %}
+          <div class="flex flex-wrap text-s">
+            <div class="pr-xs pt-s flex-1">
+              {% include "custom_number_input.njk" %}
+            </div>
 
-            <div class="w-1/3 pr-1">
+            <div class="pr-xs pt-s flex-1">
               {# TIP: Set variables to feed includes Notice that this includes can call other includes. By setting the variable addToCartBtn here we can feed the include with the data it needs #}
               {% if product.data.price %}
                 {% set addToCartBtn = {
@@ -149,14 +152,14 @@ title: JAMStack e-commerce with Foxy.io
                 {% include "addtocart_button.njk" %}
               {% endif %}
             </div>
-            <div class="w-1/3 px-0">
+            <div class="px-0 pt-s flex-1">
               {% if product.data.price_monthly %}
                 {% set addToCartBtn = {
                   monthly: true,
                   product: product.data,
                   currency: site.currency_symbol,
                   price: product.data.price_monthly,
-                  color: 'primary-dark',
+                  color: 'contrast-80',
                   code: product.data.code,
                   text: 'Monthly'
                 }