feat: styles & enhancement

jamerrq · Apr 26, 2024 · 4ba6f6f · 4ba6f6f
1 parent 3413b30
commit 4ba6f6f
Show file tree

Hide file tree

Showing 30 changed files with 297 additions and 1,031 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -39,10 +39,12 @@ export default defineConfig({
         globDirectory: 'dist/client',
         globPatterns: [
           // '**/*.{woff2}',
-          // '_astro/*.module.*.js',
+          '_astro/*.module.*.js',
           // '_astro/client.*.js',
-          // '_astro/hoisted.*.js',
-          // '_astro/*icons.*.js'
+          '_astro/hoisted.*.js',
+          // '_astro/*icons.*.js',
+          '_astro/preload-helper.*.js',
+          '_astro/workbox-*.js'
         ],
         // Don't fallback on document based (e.g. `/some-page`) requests
         // This removes an errant console.log message from showing up.

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
   "type": "module",
   "devDependencies": {
     "@fontsource/calistoga": "^5.0.19",
+    "@fontsource/fira-mono": "^5.0.13",
     "@fontsource/fira-sans": "^5.0.19",
     "@midudev/tailwind-animations": "^0.0.7",
     "@typescript-eslint/eslint-plugin": "latest",

diff --git a/public/img/blog/duolingo-pwa.webp b/public/img/blog/duolingo-pwa.webp
diff --git a/public/img/blog/facebook-pwa.webp b/public/img/blog/facebook-pwa.webp
diff --git a/public/img/blog/lichess-pwa.webp b/public/img/blog/lichess-pwa.webp
diff --git a/public/img/blog/youtube-pwa.webp b/public/img/blog/youtube-pwa.webp
diff --git a/src/components/badges/badge.astro b/src/components/badges/badge.astro
@@ -25,7 +25,7 @@ const { props } = Astro
     border-image-slice: 0.9 1 1 1;
     border-image-width: 0.15rem;
 
-    animation: move 5s infinite var(--timing);
+    animation: move 3.14159s infinite var(--timing);
   }
 
   .badge .fill {

diff --git a/src/components/badges/email-badge.astro b/src/components/badges/email-badge.astro
@@ -14,42 +14,38 @@ import Badge from './badge.astro'
   >
     [email protected]
     <svg
-      class='w-4 h-4 ml-2 text-slate-900 group'
-      aria-hidden='true'
-      xmlns='http://www.w3.org/2000/svg'
-      width='12'
-      height='12'
-      fill='none'
-      viewBox='0 0 24 24'
+      id='Layer_1'
+      version='1.1'
+      viewBox='0 0 56.7 56.7'
+      xml:space='preserve'
+      class='w-4 h-4 ml-2 group fill-current'
+      ><path
+        d='M53.1719,14.5953l0.0011-0.0011l-0.0011,0.0008v-1.184c0-2.2468-1.8384-4.0852-4.0853-4.0852l-0.0012,0.0011l-0.0024,0.0018  l0.0036-0.0029H7.3962l0.0161,0.0131l-0.0161-0.012c-2.2468,0-4.0853,1.8384-4.0853,4.0853v27.9073  c0,2.2468,1.8384,4.0851,4.0853,4.0851h1.4543h38.6578v-0.001c4.2856-0.0498,5.5728-1.1102,5.6702-4.0809L53.1719,14.5953z   M46.0429,10.3258L28.1753,23.487L10.4239,10.3258H46.0429z M9.8608,20.5521l16.5508,11.4004l0.0166,0.0115L9.8513,43.4907  L9.8608,20.5521z M10.2886,44.4046l17.0151-11.8314l0.2985,0.2077c0.1716,0.1194,0.3714,0.1792,0.5712,0.1792  c0.1982,0,0.8773-0.39,0.8773-0.39l17.0197,11.8345H10.2886z M46.4973,43.4836L29.9305,31.9641l9.2394-6.3642l7.3274-5.0472V43.4836  z'
+      ></path></svg
     >
-      <path
-        stroke='currentColor'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-        stroke-width='2'
-        d='M8 7H5a2 2 0 0 0-2 2v4m5-6h8M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m0 0h3a2 2 0 0 1 2 2v4m0 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6m18 0s-4 2-9 2-9-2-9-2m9-2h.01'
-      ></path>
-    </svg>
   </div>
   <button
     class='absolute translate-x-[150%] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100 flex items-center gap-2'
     id='copyMailButton'
   >
     {lang === 'en' ? 'copy this email' : 'copia este correo'}
     <svg
-      data-name='Layer 1'
+      enable-background='new 0 0 512 512'
       id='Layer_1'
-      viewBox='0 0 32 32'
-      xmlns='http://www.w3.org/2000/svg'
-      class='w-6 h-6 fill-current dark:text-neutral-200 group text-slate-900'
-      ><title></title><path
-        d='M24.89,6.61H22.31V4.47A2.47,2.47,0,0,0,19.84,2H6.78A2.47,2.47,0,0,0,4.31,4.47V22.92a2.47,2.47,0,0,0,2.47,2.47H9.69V27.2a2.8,2.8,0,0,0,2.8,2.8h12.4a2.8,2.8,0,0,0,2.8-2.8V9.41A2.8,2.8,0,0,0,24.89,6.61ZM6.78,23.52a.61.61,0,0,1-.61-.6V4.47a.61.61,0,0,1,.61-.6H19.84a.61.61,0,0,1,.61.6V6.61h-8a2.8,2.8,0,0,0-2.8,2.8V23.52Zm19,3.68a.94.94,0,0,1-.94.93H12.49a.94.94,0,0,1-.94-.93V9.41a.94.94,0,0,1,.94-.93h12.4a.94.94,0,0,1,.94.93Z'
+      version='1.1'
+      viewBox='0 0 512 512'
+      xml:space='preserve'
+      class='w-6 h-6 fill-current group'
+      ><path
+        d='M445.11,304.422l-65.654-41.484l65.188-48.212c3.203-2.364,3.878-6.875,1.51-10.074c-2.364-3.199-6.875-3.874-10.074-1.506  l-92.44,68.363l-0.039-0.031l-0.038,0.031l-92.441-68.363c-3.194-2.368-7.705-1.693-10.074,1.506  c-2.364,3.199-1.688,7.71,1.511,10.074l65.188,48.212l-65.65,41.484c-3.365,2.127-4.368,6.576-2.24,9.941  c1.37,2.167,3.703,3.358,6.095,3.358c1.32,0,2.647-0.361,3.844-1.118l70.382-44.474l19.144,14.162  c1.27,0.939,2.775,1.413,4.281,1.413c1.507,0,3.013-0.474,4.286-1.413l19.139-14.162l70.383,44.474  c1.195,0.757,2.527,1.118,3.844,1.118c2.392,0,4.728-1.191,6.095-3.358C449.473,310.998,448.472,306.549,445.11,304.422z'
+      ></path><path
+        d='M438.463,160.325H248.737c-27.857,0-50.521,24.694-50.521,55.045v81.256c0,30.354,22.664,55.049,50.521,55.049h189.727  c27.862,0,50.525-24.694,50.525-55.049V215.37C488.989,185.019,466.325,160.325,438.463,160.325z M472.451,296.626  c0,20.448-15.214,37.028-33.988,37.028H248.737c-18.77,0-33.983-16.58-33.983-37.028V215.37c0-20.447,15.214-37.023,33.983-37.023  h189.727c18.774,0,33.988,16.576,33.988,37.023V296.626z'
       ></path><path
-        d='M23.49,13.53h-9.6a.94.94,0,1,0,0,1.87h9.6a.94.94,0,1,0,0-1.87Z'
+        d='M161.824,204.391H31.176c-4.507,0-8.164,3.656-8.164,8.164c0,4.511,3.657,8.168,8.164,8.168h130.648  c4.503,0,8.16-3.657,8.16-8.168C169.985,208.048,166.327,204.391,161.824,204.391z'
       ></path><path
-        d='M23.49,17.37h-9.6a.94.94,0,1,0,0,1.87h9.6a.94.94,0,1,0,0-1.87Z'
+        d='M163.583,245.798H61.115c-3.533,0-6.402,3.653-6.402,8.164c0,4.507,2.869,8.168,6.402,8.168h102.468  c3.538,0,6.402-3.661,6.402-8.168C169.985,249.451,167.12,245.798,163.583,245.798z'
       ></path><path
-        d='M23.49,21.22h-9.6a.93.93,0,1,0,0,1.86h9.6a.93.93,0,1,0,0-1.86Z'
+        d='M164.965,287.2H84.598c-2.776,0-5.02,3.657-5.02,8.164c0,4.512,2.244,8.168,5.02,8.168h80.367  c2.771,0,5.02-3.656,5.02-8.168C169.985,290.857,167.737,287.2,164.965,287.2z'
       ></path></svg
     >
   </button>

diff --git a/src/components/badges/open-to-work.astro b/src/components/badges/open-to-work.astro
@@ -19,7 +19,7 @@ import Badge from './badge.astro'
     >
       {lang === 'en' ? 'Open To Work' : 'Disponible Para Ofertas'}
       <svg
-        class='w-4 h-4 ml-2 text-slate-900 group'
+        class='w-4 h-4 ml-2 group'
         aria-hidden='true'
         xmlns='http://www.w3.org/2000/svg'
         width='12'

diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -36,7 +36,7 @@ function ReadTimeBadge({
 }) {
   if (!readTime) return null
   return (
-    <span class='bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded  border border-blue-400'>
+    <span class='bg-blue-100 text-blue-800 text-xs font-semibold inline-flex items-center px-2.5 py-0.5 rounded border border-blue-400'>
       <svg
         class='w-2.5 h-2.5 me-1.5'
         aria-hidden='true'
@@ -94,7 +94,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
           .map((entry, index) => {
             return (
               <Fragment key={index}>
-                <li class='font-secondary uppercase text-sm xl:text-base py-4 px-4 rounded-[10px] cursor-pointer hover:bg-slate-400 dark:hover:bg-slate-600/70 border-emerald-200 transition-all ease-in-out flex flex-col gap-2 shadow'>
+                <li class='font-secondary uppercase text-sm xl:text-base py-4 px-4 rounded-[10px] cursor-pointer hover:border-slate-400 dark:hover:border-slate-600/70 border-emerald-200 transition-all ease-in-out flex flex-col gap-2 shadow border-2'>
                   <a
                     href={`${lang === 'en' ? entry.href : entry.hrefEs}`}
                     class='h-full'
@@ -112,7 +112,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
                     </div>
                     <Badges badges={entry.tags} />
                   </a>
-                  <span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded text-emerald-300 dark:text-emerald-900'>
+                  <span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded text-emerald-100 dark:text-emerald-950'>
                     {entry.date}
                   </span>
                 </li>

diff --git a/src/components/boxes/hbox.astro b/src/components/boxes/hbox.astro
@@ -17,7 +17,7 @@ const { href, title } = props
   href={href}
   title={title}
   data-animated={props.animated}
-  class=`card bg-slate-300/80 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full  text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
+  class=`card bg-slate-300/80 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full shadow text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
 >
   <slot />
 </a>
diff --git a/src/components/featured-and-projects/icons.tsx b/src/components/featured-and-projects/icons.tsx
@@ -97,7 +97,7 @@ export function DoubleLeft() {
   return (
     <svg
       viewBox='0 0 448 512'
-      class='w-6 h-6 fill-emerald-950'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z' />
@@ -109,7 +109,7 @@ export function DoubleRight() {
   return (
     <svg
       viewBox='0 0 448 512'
-      class='w-6 h-6 fill-emerald-950'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z' />
@@ -121,7 +121,7 @@ export function DoubleUp() {
   return (
     <svg
       viewBox='0 0 384 512'
-      class='w-6 h-6 fill-emerald-950'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M54.63 246.6L192 109.3l137.4 137.4C335.6 252.9 343.8 256 352 256s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-160-160c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25S42.13 259.1 54.63 246.6zM214.6 233.4c-12.5-12.5-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0L192 301.3l137.4 137.4C335.6 444.9 343.8 448 352 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L214.6 233.4z' />
@@ -133,7 +133,7 @@ export function DoubleDown() {
   return (
     <svg
       viewBox='0 0 384 512'
-      class='w-6 h-6 fill-emerald-950'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path d='M169.4 278.6C175.6 284.9 183.8 288 192 288s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L192 210.8L54.63 73.38c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L169.4 278.6zM329.4 265.4L192 402.8L54.63 265.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l160 160C175.6 476.9 183.8 480 192 480s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25S341.9 252.9 329.4 265.4z' />

diff --git a/src/components/featured-and-projects/link.tsx b/src/components/featured-and-projects/link.tsx
@@ -1,13 +1,3 @@
-const ANCHOR_STYLES = [
-  'font-thin',
-  'responsive-text',
-  'dark:text-amber-300',
-  'text-amber-950',
-  'flex',
-  'w-6 h-6',
-  'xl:w-8 xl:h-8'
-].join(' ')
-
 type LinkProps = {
   href: string
   title: string
@@ -29,7 +19,7 @@ export default function Link({ href, title }: LinkProps) {
       href={href}
       target='_blank'
       rel='noopener noreferrer'
-      class={ANCHOR_STYLES}
+      class='font-thin responsive-text dark:text-amber-300 text-amber-950 grid place-content-center w-4 h-4 xl:w-8 xl:h-8 mx-2'
       title={title}
       aria-label={title}
     >