Update - Freshen up (jordihales#50)

* Init * Freshen up * Fix 900 font weight * Replace space-x with gap
anurag-roy · Oct 7, 2022 · 567aa3b · 567aa3b
1 parent 437443c
commit 567aa3b
Show file tree

Hide file tree

Showing 46 changed files with 573 additions and 427 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,90 +1,35 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Optional npm cache directory
-.npm
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Optional eslint cache
-.eslintcache
+# testing
+/coverage
 
-# Optional REPL history
-.node_repl_history
+# next.js
+/.next/
+/out/
 
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+# production
+/build
 .nuxt
 
-# Nuxt generate
-dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
+# misc
+.DS_Store
+*.pem
 
-# Service worker
-sw.*
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# macOS
-.DS_Store
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Vim swap files
-*.swp
+# vercel
+.vercel
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![Hypercolor](https://user-images.githubusercontent.com/50486078/133603928-3ade1e65-6658-4a9a-a200-a3e964280a27.png)
+![Hypercolor](https://hypercolor.dev/social.png)
 
 A curated collection of beautiful Tailwind CSS gradients using the full
 range of Tailwind CSS colors. Easily copy and paste the class names, CSS

diff --git a/app.html b/app.html
diff --git a/assets/css/main.css → assets/css/tailwind.css b/assets/css/main.css → assets/css/tailwind.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/components/ActionSave.vue b/components/ActionSave.vue
@@ -1,38 +1,56 @@
 <template>
   <div>
     <div class="sr-only">
-      <div v-if="standard" ref="image" class="w-screen h-screen" :class="gradient" />
-      <div v-if="mesh" ref="image" class="w-screen h-screen" :style="gradient" />
-      <div v-if="grainy" ref="image" class="relative w-screen h-screen" :class="gradient">
-        <div class="absolute inset-0 filter brightness-100 contrast-150 noise" :style="`--color: ${color}`" />
+      <div
+        v-if="standard"
+        ref="image"
+        class="h-screen w-screen"
+        :class="gradient"
+      />
+      <div
+        v-if="mesh"
+        ref="image"
+        class="h-screen w-screen"
+        :style="gradient"
+      />
+      <div
+        v-if="grainy"
+        ref="image"
+        class="relative h-screen w-screen"
+        :class="gradient"
+      >
+        <div
+          class="noise absolute inset-0 brightness-100 contrast-150 filter"
+          :style="`--color: ${color}`"
+        />
       </div>
     </div>
 
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <button
         v-if="standard"
-        class="p-2.5 rounded-xl bg-gray-800/75 hover:text-pink-500 transition-colors"
+        class="rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
         aria-label="Copy Tailwind CSS class names"
         @click="handleTailwind"
       >
-        <icon-tailwind class="w-4 h-4" />
+        <icon-tailwind class="h-4 w-4" />
       </button>
 
       <button
         v-if="standard || mesh"
-        class="p-2.5 rounded-xl bg-gray-800/75 hover:text-pink-500 transition-colors"
+        class="rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
         aria-label="Copy CSS"
         @click="handleCode"
       >
-        <icon-code class="w-4 h-4" />
+        <icon-code class="h-4 w-4" />
       </button>
 
       <button
-        class="p-2.5 rounded-xl bg-gray-800/75 hover:text-pink-500 transition-colors"
+        class="rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
         aria-label="Download image"
         @click="handleImage"
       >
-        <icon-image class="w-4 h-4" />
+        <icon-image class="h-4 w-4" />
       </button>
     </div>
   </div>
@@ -47,20 +65,20 @@ export default {
   props: {
     name: {
       type: String,
-      required: true
+      required: true,
     },
     gradient: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
       type: String,
-      default: 'standard'
-    }
+      default: 'standard',
+    },
   },
   computed: {
     standard() {
@@ -71,7 +89,7 @@ export default {
     },
     grainy() {
       return this.type === 'grainy'
-    }
+    },
   },
   methods: {
     handleTailwind() {
@@ -83,7 +101,9 @@ export default {
     handleCode() {
       this.code = this.mesh
         ? this.gradient
-        : getComputedStyle(this.$refs.image).getPropertyValue('background-image')
+        : getComputedStyle(this.$refs.image).getPropertyValue(
+            'background-image'
+          )
 
       navigator.clipboard.writeText(this.code)
 
@@ -102,8 +122,8 @@ export default {
     },
     showToast() {
       this.$toast.success('Copied to Clipboard')
-    }
-  }
+    },
+  },
 }
 </script>
 

diff --git a/components/ContentBanner.vue b/components/ContentBanner.vue
@@ -1,19 +1,21 @@
 <template>
   <section class="relative text-center">
-    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24 lg:py-32">
-      <div class="flex flex-col max-w-3xl mx-auto">
+    <div
+      class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32"
+    >
+      <div class="mx-auto flex max-w-3xl flex-col">
         <h1
-          class="mt-1 text-4xl font-extrabold text-transparent uppercase tracking-tighest sm:text-5xl lg:text-7xl bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text"
+          class="mt-1 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-4xl font-extrabold uppercase tracking-tighter text-transparent sm:text-5xl lg:text-7xl"
           v-text="title"
         />
 
         <h2
-          class="order-first font-medium tracking-wide text-transparent bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text"
+          class="order-first bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text font-medium tracking-wide text-transparent"
           v-text="subtitle"
         />
       </div>
 
-      <p class="max-w-2xl mx-auto mt-8 text-xl font-medium text-white">
+      <p class="mx-auto mt-8 max-w-2xl text-xl font-medium text-white">
         <slot />
       </p>
     </div>
@@ -25,12 +27,12 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     subtitle: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
 </script>
diff --git a/components/GeneratorControls.vue b/components/GeneratorControls.vue
@@ -1,19 +1,24 @@
 <template>
-  <section class="text-white bg-gray-900 border-t border-b border-gray-800/75">
-    <div class="max-w-screen-xl px-4 py-4 mx-auto space-y-4 sm:px-6 lg:px-8">
+  <section class="border-t border-b border-gray-800/75 bg-gray-900 text-white">
+    <div class="mx-auto max-w-screen-xl space-y-4 px-4 py-4 sm:px-6 lg:px-8">
       <div class="lg:grid lg:grid-cols-3">
         <div class="flex items-center">
-          <action-save :gradient="gradient" :color="color" :type="type" name="Hypercolor Gradient" />
+          <action-save
+            :gradient="gradient"
+            :color="color"
+            :type="type"
+            name="Hypercolor Gradient"
+          />
 
           <button
-            class="p-2.5 rounded-xl bg-gray-800/75 ml-2 hover:text-pink-500 transition-colors"
+            class="ml-2 rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
             @click="$emit('random')"
           >
-            <icon-refresh class="w-4 h-4" />
+            <icon-refresh class="h-4 w-4" />
           </button>
         </div>
 
-        <div class="mt-4 lg:mt-0 lg:col-span-2">
+        <div class="mt-4 lg:col-span-2 lg:mt-0">
           <slot />
         </div>
       </div>
@@ -26,20 +31,20 @@ export default {
   props: {
     directions: {
       type: Array,
-      required: true
+      required: true,
     },
     gradient: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
       type: String,
-      default: 'standard'
-    }
-  }
+      default: 'standard',
+    },
+  },
 }
 </script>