feat: improve CustomLink visibility on light mode

SuperSuperDev · Oct 12, 2021 · 67c2f85 · 67c2f85
1 parent dbf029c
commit 67c2f85
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 19 deletions.
diff --git a/src/components/links/CustomLink.tsx b/src/components/links/CustomLink.tsx
@@ -11,8 +11,9 @@ export default function CustomLink({
     <UnstyledLink
       {...rest}
       className={clsx(
-        'inline-flex items-center font-bold hover:text-primary-400 animated-underline',
-        'focus:outline-none focus-visible:text-primary-400 ',
+        'custom-link inline-flex items-center font-bold animated-underline',
+        'focus:outline-none focus-visible:ring ring-primary-400/70',
+        'border-b border-dotted border-dark hover:border-black/0',
         className
       )}
     >

diff --git a/src/pages/components.tsx b/src/pages/components.tsx
@@ -35,8 +35,8 @@ export default function ComponentsPage() {
               <li className='space-y-2'>
                 <h2 className='text-lg md:text-xl'>CustomLink</h2>
                 <p className='text-sm text-gray-300 !mt-1'>
-                  Add styling on top of UnstyledLink, giving an animated
-                  underline and hover color.
+                  Add styling on top of UnstyledLink, giving a dotted and
+                  animated underline.
                 </p>
                 <div className='space-x-2'>
                   <CustomLink href='/'>Internal Links</CustomLink>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -13,18 +13,19 @@ export default function HomePage() {
       <main>
         <section className='bg-dark'>
           <div className='flex flex-col items-center justify-center min-h-screen text-center text-white layout'>
-            <h1 className='text-2xl md:text-4xl'>
-              <CustomLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
-                Next.js + Tailwind CSS + TypeScript Starter
-              </CustomLink>
-            </h1>
+            <h1>Next.js + Tailwind CSS + TypeScript Starter</h1>
             <p className='mt-2 text-sm text-gray-300'>
               A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
               Import, Seo, Link component, pre-configured with Husky{' '}
             </p>
+            <p className='mt-2 text-sm text-gray-200'>
+              <CustomLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
+                See the repository
+              </CustomLink>
+            </p>
 
             <ButtonLink
-              className='mt-4'
+              className='mt-6'
               href='/components'
               variants='secondary'
             >
@@ -56,3 +57,12 @@ export default function HomePage() {
     </>
   );
 }
+
+/**
+ * Default info that you should change:
+ * components/Seo.tsx
+ * next-sitemap.js
+ * public/favicon
+ *
+ * Please refer to the README.md
+ */
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --clr-primary-400: #00e0f3;
+  --clr-primary-500: #00c4fd;
+}
+
 @layer base {
   /* inter var - latin */
   @font-face {
@@ -17,19 +22,19 @@
 
   /* Write your own custom base styles here */
   h1 {
-    @apply text-3xl font-bold md:text-5xl font-primary;
+    @apply text-2xl font-bold md:text-4xl font-primary;
   }
 
   h2 {
-    @apply text-2xl font-bold md:text-4xl font-primary;
+    @apply text-xl font-bold md:text-3xl font-primary;
   }
 
   h3 {
-    @apply text-xl font-bold md:text-3xl font-primary;
+    @apply text-lg font-bold md:text-2xl font-primary;
   }
 
   h4 {
-    @apply text-lg font-bold font-primary;
+    @apply text-base font-bold md:text-lg font-primary;
   }
 
   body {
@@ -44,19 +49,24 @@
     max-width: 68.75rem;
     @apply w-11/12 mx-auto;
   }
+
+  .bg-dark a.custom-link {
+    @apply border-gray-200 hover:border-gray-200/0;
+  }
 }
 
 @layer utilities {
   .animated-underline {
     background-image: linear-gradient(#33333300, #33333300),
-      linear-gradient(to right, #00e0f3, #00c4fd);
+      linear-gradient(to right, var(--clr-primary-400), var(--clr-primary-500));
     background-size: 100% 2px, 0 2px;
     background-position: 100% 100%, 0 100%;
     background-repeat: no-repeat;
-    transition: background-size 0.3s ease;
+    transition: 0.3s ease;
+    transition-property: background-size, color, background-color, border-color;
   }
   .animated-underline:hover,
-  .animated-underline:focus {
+  .animated-underline:focus-visible {
     background-size: 0 2px, 100% 2px;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,8 +13,8 @@ module.exports = {
       },
       colors: {
         primary: {
-          400: '#00E0F3',
-          500: '#00c4fd',
+          400: 'var(--clr-primary-400)',
+          500: 'var(--clr-primary-500)',
         },
         dark: '#222222',
       },