Fix missing css classes for tailwind

chringel21 · Mar 21, 2022 · c4c822c · c4c822c
1 parent 475d370
commit c4c822c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 64 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+./assets/js/main.js
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -227,10 +227,8 @@
   .isso-comment-footer {
     @apply flex flex-row;
   }
-}
 
-@layer components {
-/* Shamelessly ripped from https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/ */
+  /* Shamelessly ripped from https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/ */
   .copy-code-button {
     @apply border rounded bg-white border-gray-900 block ml-auto mr-0;
     /* Until we get a new version of Tailwind that supports 
@@ -256,11 +254,11 @@
     @apply bg-gray-200;
   }
 
-  .link {
-    @apply opacity-0 ml-1 align-middle;
+  .link-owner:hover > .link {
+    @apply opacity-90 transition ease-in-out delay-150 duration-300;
   }
 
-  .link-owner:hover .link {
-    @apply opacity-90 transition ease-in-out delay-150 duration-300;
+  .link {
+    @apply opacity-0 ml-1 align-middle;
   }
-}
+}
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
@@ -3,90 +3,90 @@ const { borderColor, fontWeight, fontFamily } = require('tailwindcss/defaultThem
 
 module.exports = {
   content: [
-    './themes/**/layouts/**/*.html',
-    './themes/**/assets/js/**/*.js',
-    './layouts/**/*.html',
-    './assets/js/**/*.js',
+    "./themes/**/layouts/**/*.html",
+    "./themes/**/assets/js/**/*.js",
+    "./layouts/**/*.html",
+    "./assets/js/**/*.js",
   ],
   theme: {
     extend: {
       fontFamily: {
-        'headline': ['Comfortaa'],
-        'body': ['Fira Sans']
+        headline: ["Comfortaa"],
+        body: ["Fira Sans"],
       },
       typography: (theme) => ({
         DEFAULT: {
           css: {
             h1: {
-              color: theme('colors.gray.500'),
-              fontWeight: '300',
+              color: theme("colors.gray.500"),
+              fontWeight: "300",
             },
             a: {
-              fontWeight: '300',
-              color: theme('colors.accent.500'),
-              '&:hover': {
-                color: theme('colors.accent.700')
-              }
-            }
+              fontWeight: "300",
+              color: theme("colors.accent.500"),
+              "&:hover": {
+                color: theme("colors.accent.700"),
+              },
+            },
           },
         },
         dark: {
           css: {
-            color: theme('colors.gray.200'),
-            h1: { color: theme('colors.gray.200') },
-            h2: { color: theme('colors.gray.200') },
-            h3: { color: theme('colors.gray.200') },
-            h4: { color: theme('colors.gray.200') },
-            h5: { color: theme('colors.gray.200') },
-            h6: { color: theme('colors.gray.200') },
-            a: { color: theme('colors.accent.500') },
-            p: { color: theme('colors.gray.200') },
-            ul: { color: theme('colors.gray.200') },
-            ol: { color: theme('colors.gray.200') },
-            strong: { color: theme('colors.gray.200') },
-            span: { color: theme('colors.gray.200') },
-            code: { 
-              color: theme('colors.gray.200'),
-              fontWeight: 800
-             }
-          }
-        }
+            color: theme("colors.gray.200"),
+            h1: { color: theme("colors.gray.200") },
+            h2: { color: theme("colors.gray.200") },
+            h3: { color: theme("colors.gray.200") },
+            h4: { color: theme("colors.gray.200") },
+            h5: { color: theme("colors.gray.200") },
+            h6: { color: theme("colors.gray.200") },
+            a: { color: theme("colors.accent.500") },
+            p: { color: theme("colors.gray.200") },
+            ul: { color: theme("colors.gray.200") },
+            ol: { color: theme("colors.gray.200") },
+            strong: { color: theme("colors.gray.200") },
+            span: { color: theme("colors.gray.200") },
+            code: {
+              color: theme("colors.gray.200"),
+              fontWeight: 800,
+            },
+          },
+        },
       }),
     },
     colors: {
       black: colors.black,
       white: colors.white,
       gray: colors.gray,
-      accent: colors.green
+      accent: colors.green,
     },
-    borderColor: theme => ({
-      ...theme('colors')
+    borderColor: (theme) => ({
+      ...theme("colors"),
     }),
-    keyframes: theme => ({
+    keyframes: (theme) => ({
       blink: {
-        '0%, 100%': { color: 'transparent' },
-        '50%': { color: theme('colors.accent.500') }
+        "0%, 100%": { color: "transparent" },
+        "50%": { color: theme("colors.accent.500") },
       },
       bounce: {
-        '0%, 100%': {
-          transform: 'translateY(-25%)',
-          'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)'
+        "0%, 100%": {
+          transform: "translateY(-25%)",
+          "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
         },
-        '50%': {
-          transform: 'translateY(0)',
-          'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)'
-        }
-      }
+        "50%": {
+          transform: "translateY(0)",
+          "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
+        },
+      },
     }),
     animation: {
-      blink: 'blink 1s step-end infinite',
-      bounce: 'bounce 1s infinite'
-    }
+      blink: "blink 1s step-end infinite",
+      bounce: "bounce 1s infinite",
+    },
   },
   plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/line-clamp')
-  ]
-}
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/line-clamp"),
+  ],
+};
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,6 +1,7 @@
 <footer class="bottom-0 w-full bg-gray-200 dark:bg-black p-4 text-xs text-center text-gray-400">
   <p>made with <a href="https://gohugo.io" class="underline hover:text-accent-400">Hugo</a> and <a href="https://tailwindcss.com" class="underline hover:text-accent-400">TailwindCSS</a></p>
   <p>&copy; {{ .Site.Params.footerCopyrightText }}</p>
+  <div class="hidden link copy-code-button link-owner"></div>
 </footer>
 {{ if or (findRE "<pre" .Content 1) (eq .Section "post" ) }}
   {{ $functionsScriptPath := "js/functions.js" }}