Merge pull request #35 from ryanmr/tailwind-2.x-upgrade

Tailwind 2.x upgrade

Author: BrianMitchL

package-lock.json

@@ -23,19 +23,19 @@
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-plugin-inclusive-language": "^1.0.0",
     "@mightyplow/eleventy-plugin-cache-buster": "^1.1.3",
-    "@tailwindcss/typography": "^0.2.0",
-    "autoprefixer": "^10.0.4",
+    "@tailwindcss/typography": "^0.3.1",
+    "autoprefixer": "^10.1.0",
     "cross-env": "^7.0.3",
+    "cssnano": "^4.1.10",
     "html-minifier": "^4.0.0",
-    "husky": "^4.3.4",
+    "husky": "^4.3.5",
     "npm-run-all": "^4.1.5",
-    "postcss": "8.1.10",
-    "postcss-clean": "^1.1.0",
+    "postcss": "^8.2.1",
     "postcss-cli": "^8.3.0",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^2.0.1",
     "terser": "^5.5.1"
   },
   "repository": {

package.json

@@ -4,12 +4,15 @@ module.exports = {
     require('autoprefixer'),
     ...(process.env.NODE_ENV === 'production'
       ? [
-          require('postcss-clean')({
-            compatibility: {
-              properties: {
-                zeroUnits: false,
+          require('cssnano')({
+            preset: [
+              'default',
+              {
+                calc: {
+                  preserve: true,
+                },
               },
-            },
+            ],
           }),
         ]
       : []),

postcss.config.js

@@ -9,12 +9,12 @@ title: Events
   {% include "nextEvent.njk" %}
 
   <h2
-    class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
+    class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal mb-2 transform -rotate-1"
   >
     Past
   </h2>
 
-  <div class="divide-y divide-black divide-solid">
+  <div class="divide-y divide-gray-400 divide-solid">
     {% for event in events | rejectattr('hidden') %}
       <article class="py-4" data-past-event>
         <h3 class="font-bold text-2xl">{{ event.title }}</h3>

src/events.njk

@@ -1,7 +1,7 @@
 <footer class="border-t-2 border-black mt-10">
   <div class="container mx-auto p-2 pt-4">
     <div
-      class="flex justify-center items-start space-x-16 divide-x-2 divide-gray-100 divide"
+      class="flex justify-center items-start space-x-16"
     >
       <div class="px-2">
         <p
@@ -10,7 +10,7 @@
         >
           Meetup
         </p>
-        <ul aria-describedby="footer-meetup">
+        <ul aria-describedby="footer-meetup" class="space-y-2 sm:space-y-0">
           {% for link in site.navigation %}
           <li>
             <a class="hover:underline" href="{{ link.path | url }}"
@@ -27,7 +27,7 @@
         >
           Connect
         </p>
-        <ul aria-describedby="footer-connect">
+        <ul aria-describedby="footer-connect" class="space-y-2 sm:space-y-0">
           {% for link in site.connect %}
           <li>
             <a class="hover:underline" href="{{ link.href }}" rel="noopener noreferrer"

src/includes/footer.njk

@@ -2,7 +2,7 @@
 
 <article class="mb-20">
   <h2
-    class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
+    class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal mb-2 transform -rotate-1"
   >
     {% if page.url !== '/events/' | url %}
     <a href="{{ '/events/' | url }}">Upcoming</a>

src/includes/nextEvent.njk

@@ -7,17 +7,19 @@ changeFreq: daily
 {# primary content #}
 <div class="special-bg">
   <div class="container mx-auto px-2 py-10 mb-10">
-    <div class="x-h-screen flex justify-center items-center">
+    <div class="flex justify-center items-center">
       <div>
-        <div class="text-center flex flex-wrap sm:flex-no-wrap justify-center px-4 sm:px-0">
+        <div
+          class="text-center flex flex-wrap sm:flex-nowrap justify-center px-4 sm:px-0"
+        >
           <div class="w-full sm:w-1/2">
             <div class="pl-8 sm:pl-16" data-animated-logo>
               {% include "_logo.svg" %}
             </div>
           </div>
           <div class="w-full sm:w-1/2 self-center">
-            <div class="text-4xl font-bold"><h1>JavaScriptMN</h1></div>
-            <p class="text-xl">
+            <div class="text-4xl leading-normal font-bold"><h1>JavaScriptMN</h1></div>
+            <p class="text-xl leading-normal">
               A monthly meetup for anyone interested in JavaScript and related
               technologies in the Twin Cities.
             </p>
@@ -37,13 +39,13 @@ changeFreq: daily
       <div>
         <div class="flex justify-end items-center mb-2">
           <h2
-            class="inline-block bg-black text-white text-2xl font-bold px-4 transform rotate-1"
+            class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal transform rotate-1"
           >
             Links
           </h2>
         </div>
         <ul
-          class="flex justify-center sm:justify-end items-center space-y-2 sm:space-y-0 sm:space-x-2 flex-wrap sm:flex-no-wrap"
+          class="flex justify-center sm:justify-end items-center space-y-2 sm:space-y-0 sm:space-x-2 flex-wrap sm:flex-nowrap"
         >
           {% for link in actionLinks %}
           <li class="w-full sm:w-auto">
@@ -60,20 +62,19 @@ changeFreq: daily
   </div>
 </div>
 
-
 {# location, speaking #}
 
 <div class="container mx-auto px-2 mb-10">
   <div class="x-h-screen flex justify-center items-center">
     <div class="w-full">
       <section class="mb-8">
         <h2
-          class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
+          class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal mb-2 transform -rotate-1"
         >
           Location
         </h2>
         <div
-          class="border-jsmn-yellow border-4 p-4 flex justify-between items-center flex-wrap sm:flex-no-wrap space-y-4 sm:space-y-0"
+          class="border-jsmn-yellow border-4 p-4 flex justify-between items-center flex-wrap sm:flex-nowrap space-y-4 sm:space-y-0"
         >
           <div class="w-full sm:w-1/2">
             <p class="text-lg leading-7">
@@ -99,13 +100,13 @@ changeFreq: daily
       <section class="mb-8">
         <div class="flex justify-start items-center mb-2">
           <h2
-            class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
+            class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal transform -rotate-1"
           >
             Speak
           </h2>
         </div>
         <div
-          class="border-jsmn-yellow border-4 p-4 flex justify-between items-center flex-wrap sm:flex-no-wrap space-y-4 sm:space-y-0"
+          class="border-jsmn-yellow border-4 p-4 flex justify-between items-center flex-wrap sm:flex-nowrap space-y-4 sm:space-y-0"
         >
           <div>
             <h3 class="text-2xl font-bold">Interested in speaking?</h3>
@@ -116,10 +117,11 @@ changeFreq: daily
           </div>
           <div class="w-full sm:w-auto">
             <a
-              class="block text-xl font-semibold border-2 border-black p-4 hover:bg-jsmn-yellow transition-all duration-100"
+              class="text-xl font-semibold border-2 border-black p-4 hover:bg-jsmn-yellow transition-all duration-100 flex justify-evenly items-center"
               href="{{ '/speak/' | url }}"
-              >Learn More</a
             >
+              <span>Speak at JSMN!</span>
+            </a>
           </div>
         </div>
       </section>
@@ -128,7 +130,7 @@ changeFreq: daily
       <section class="mb-8">
         <div class="flex justify-between items-center mb-2">
           <h2
-            class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
+            class="inline-block bg-black text-white text-2xl font-bold px-4 leading-normal transform -rotate-1"
           >
             Sponsors
           </h2>
@@ -139,11 +141,12 @@ changeFreq: daily
           </p>
         </div>
         <div class="border-jsmn-yellow border-4 p-4">
-          {% for section in sponsors %}
-          {% if section.showOnHome === true %}
+          {% for section in sponsors %} {% if section.showOnHome === true %}
           <div class="w-2/3 mx-auto mb-4">
             <h3 class="font-bold text-2xl">{{ section.section | safe }}</h3>
-            <div class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0">
+            <div
+              class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0"
+            >
               {% for sponsor in section.sponsors %}
               <div class="flex justify-center items-center">
                 <a
@@ -163,8 +166,7 @@ changeFreq: daily
               {% endfor %}
             </div>
           </div>
-          {% endif %}
-          {% endfor %}
+          {% endif %} {% endfor %}
         </div>
       </section>
     </div>

src/index.njk

@@ -21,13 +21,13 @@ layout: base
   </div>
 
   <div
-    class="flex flex-wrap sm:flex-no-wrap space-x-0 sm:space-x-4 space-y-8 sm:space-y-0"
+    class="flex flex-wrap sm:flex-nowrap space-x-0 sm:space-x-4 space-y-8 sm:space-y-0"
   >
     {# first option #}
     <section class="w-full sm:w-1/3">
       <div class="border-4 border-jsmn-yellow shadow-lg">
         <div class="px-2 text-center my-4">
-          <p role="img" aria-label="silver medal" class="text-8xl">🥈</p>
+          <p role="img" aria-label="silver medal" class="text-8xl leading-normal">🥈</p>
           <h2 class="text-3xl">Silver</h2>
           <p class="text-xl">$250 / year</p>
         </div>
@@ -54,7 +54,7 @@ layout: base
     <section class="w-full sm:w-1/3">
       <div class="border-4 border-jsmn-yellow shadow-lg">
         <div class="px-2 text-center my-4">
-          <p role="img" aria-label="gold medal" class="text-8xl">🥇</p>
+          <p role="img" aria-label="gold medal" class="text-8xl leading-normal">🥇</p>
           <h2 class="text-3xl">Gold</h2>
           <p class="text-xl">$1,000 / year</p>
         </div>
@@ -95,7 +95,7 @@ layout: base
           </div>
         </div>
         <div class="px-2 text-center my-4">
-          <p role="img" aria-label="diamond" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
+          <p role="img" aria-label="diamond" class="text-8xl leading-normal transform duration-200 hover:-rotate-12">💎</p>
           <h2 class="text-3xl">Diamond</h2>
           <p class="text-xl">$2,500 / year</p>
         </div>