Code refactoring and installed Headwind

vigetlabs · Oct 31, 2024 · 623ee6e · 623ee6e
1 parent 458f343
commit 623ee6e
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 76 deletions.
diff --git a/src/layouts/Application.astro b/src/layouts/Application.astro
@@ -62,13 +62,13 @@ import '../styles/global.css';
 <!DOCTYPE html>
 <html lang="en" class="scroll-smooth focus:scroll-auto">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="/favicon.png">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/favicon.png" />
 
   <link rel="preconnect" href="//a-us.storyblok.com/">
-  <link rel="dns-prefetch" href="//a-us.storyblok.com/">
-  <link rel="preload" as="font" href={`${rootUrl}fonts/FunctionPro-Bold-webfont.woff`} type="font/woff" crossorigin="anonymous">
+  <link rel="dns-prefetch" href="//a-us.storyblok.com/" />
+  <link rel="preload" as="font" href={`${rootUrl}fonts/FunctionPro-Bold-webfont.woff`} type="font/woff" crossorigin="anonymous" />
 
   <!-- HTML Meta Tags -->
   <title>{title}</title>
@@ -151,17 +151,16 @@ import '../styles/global.css';
   '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-N3P6MM');</script>
 
-  <header class="absolute top-9 left-0 z-20 w-full px-3">
-    <div class="mx-auto flex max-w-7xl items-center justify-center sm:justify-between">
-      {currentPath === "/" ? (
-        <h1>
-          <img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />
-        </h1>
-      ) : (
-        <a href="/">
-          <img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />
-        </a>
-      )}
+  <header class="absolute left-0 z-20 w-full px-3 top-9">
+    <div class="flex items-center justify-center mx-auto max-w-7xl sm:justify-between">
+      {(() => {
+        const logoImg = <img src={logo.src} class="h-auto w-[160px]" alt="Pointless Corp." />;
+        return currentPath === "/" ? (
+          <h1>{logoImg}</h1>
+        ) : (
+          <a href="/">{logoImg}</a>
+        );
+      })()}
 
       <nav class="hidden sm:block">
         <ul class="flex gap-4 font-functionpro">
@@ -176,21 +175,21 @@ import '../styles/global.css';
     <slot />
   </main>
   <footer class="flex flex-col items-center px-5 uppercase py-[50px] font-functionpro">
-    {currentPath === "/" ? (
-      <img src={logoLarge.src} class="h-auto w-[212px] sm:w-[282px]" alt="Pointless Corp." />
-    ) : (
-      <img src={logoLargeWhite.src} class="h-auto w-[212px] sm:w-[282px]" alt="Pointless Corp." />
-    )}
+    <img
+      src={currentPath === "/" ? logoLarge.src : logoLargeWhite.src}
+      class="h-auto w-[212px] sm:w-[282px]"
+      alt="Pointless Corp."
+    />
 
-    <p class="mt-8 text-xs">The innovation lab at <a class="underline hover:no-underline focus:no-underline" href="http://viget.com">Viget</a></p>
+    <p class="mt-8 text-xs">The innovation lab at <a class="underline hover:no-underline focus:no-underline" href="https://www.viget.com/">Viget</a></p>
 
     <p class="mt-6">
       <a class="footer-social inline-block rounded-full border transition duration-300 border-gray-light p-[13px] hover:border-gray-dark focus:border-gray-dark" aria-label="Pointless Corp. on X" href="http://x.com/pointlesscorp">
         <Fragment set:html={iconX} />
       </a>
     </p>
 
-    <p class="footer-copyright mt-5 text-xs">&copy; {new Date().getFullYear()} Pointless Corp.</p>
+    <p class="mt-5 text-xs footer-copyright">&copy; {new Date().getFullYear()} Pointless Corp.</p>
   </footer>
 </body>
 </html>
diff --git a/src/storyblok/Homepage.astro b/src/storyblok/Homepage.astro
@@ -39,7 +39,7 @@ function renderContent(content: any) {
             .map(size => `${imageFilename}/m/${size}x0/filters:format(avif) ${size}w`)
             .join(', ')}
           sizes={`100vw`}
-          class="absolute top-0 left-0 z-0 h-full w-full object-cover"
+          class="absolute top-0 left-0 z-0 object-cover w-full h-full"
         />
       );
     })()
@@ -51,26 +51,26 @@ function renderContent(content: any) {
     <ul class="flex flex-wrap justify-center gap-20">
       <li class="text-center uppercase font-functionpro text-mud">
         <Fragment set:html={iconTools} />
-        <span class="mt-4 inline-block">Tools</span>
+        <span class="inline-block mt-4">Tools</span>
       </li>
       <li class="text-center uppercase font-functionpro text-mud">
         <Fragment set:html={iconExperiments} />
-        <span class="mt-4 inline-block">Experiments</span>
+        <span class="inline-block mt-4">Experiments</span>
       </li>
       <li class="text-center uppercase font-functionpro text-mud">
         <Fragment set:html={iconStunts} />
-        <span class="mt-4 inline-block">Stunts</span>
+        <span class="inline-block mt-4">Stunts</span>
       </li>
     </ul>
 
     <div class="mt-12 px-3 text-center uppercase font-functionpro text-brick text-[20px] leading-[1em] md:text-[36px]">
-      <div class="mx-auto max-w-4xl about-text" set:html={renderContent(blok.aboutText)} />
+      <div class="max-w-4xl mx-auto space-y-12 about-text" set:html={renderContent(blok.aboutText)} />
     </div>
   </section>
 )}
 
 <section id="projects" class="py-[60px]">
-  <h2 class="text-center text-4xl uppercase font-functionpro text-brick-light">Projects</h2>
+  <h2 class="text-4xl text-center uppercase font-functionpro text-brick-light">Projects</h2>
 
   {projects && (
     <ProjectList projects={projects} />
@@ -96,7 +96,7 @@ function renderContent(content: any) {
     </h2>
 
     <div class="mt-12 px-3 text-center uppercase font-functionpro text-brick text-[32px] leading-[1em] sm:text-[48px]">
-      <div class="mx-auto max-w-3xl process-text" set:html={renderContent(blok.processText)} />
+      <div class="max-w-3xl mx-auto process-text" set:html={renderContent(blok.processText)} />
     </div>
   </section>
 )}
@@ -161,7 +161,7 @@ function renderContent(content: any) {
   "
 >
   {blok.culturePhotos && (
-    <div class="relative col-span-1 grid grid-cols-2 lg:grid-cols-1"
+    <div class="relative grid grid-cols-2 col-span-1 lg:grid-cols-1"
       @mouseenter="isHovering = true; stopRotation()"
       @mouseleave="isHovering = false; !prefersReducedMotion && isLargeScreen && startRotation()"
     >
@@ -190,7 +190,7 @@ function renderContent(content: any) {
   )}
 
   {blok.processPhotos && (
-    <div class="col-span-1 grid grid-cols-2">
+    <div class="grid grid-cols-2 col-span-1">
       {blok.processPhotos.slice(0, 4).map((image: ImageType) => (
         <Image
           image={image}
@@ -228,12 +228,12 @@ function renderContent(content: any) {
       <li
         x-data={`{ expanded: ${index === 0} }`}
         x-id="['faq-question', 'faq-answer']"
-        class="mb-11 px-3"
+        class="px-3 mb-11"
       >
         {item.question && (
           <h3 class="relative pl-10">
             <span
-              class="absolute top-0 left-0 block h-6 w-6 rounded-full transition-colors duration-300"
+              class="absolute top-0 left-0 block w-6 h-6 transition-colors duration-300 rounded-full"
               :class="expanded ? 'bg-red' : 'bg-green'"
             >
               <i class="absolute top-1/2 left-1/2 block w-3 -translate-x-1/2 -translate-y-1/2 bg-white h-[2px]"></i>
@@ -245,7 +245,7 @@ function renderContent(content: any) {
               :aria-expanded="expanded"
               :aria-controls="$id('faq-answer')"
               :id="$id('faq-question')"
-              class="text-base uppercase leading-6 font-functionpro text-green"
+              class="text-base leading-6 uppercase font-functionpro text-green"
             >
               {item.question}
             </button>

diff --git a/src/storyblok/Project.astro b/src/storyblok/Project.astro
@@ -24,12 +24,12 @@ function renderContent(content: any) {
       src={blok.logo.filename}
       inferSize={true}
       alt=""
-      class="mx-auto mb-5 block max-w-full"
+      class="block max-w-full mx-auto mb-5"
     />
   )}
 
   <!-- Project Details -->
-  <ul class="mx-auto table border-collapse text-center uppercase metatable font-functionpro">
+  <ul class="table mx-auto text-center uppercase border-collapse metatable font-functionpro">
     {blok.url && (
       <li class="table-cell border">
         <span class="block border-b px-3 metatable-label text-[10px] py-[2px]">Visit</span>
@@ -76,7 +76,7 @@ function renderContent(content: any) {
   </ul>
 
   <!-- Project Description -->
-  {blok.description && <section class="mx-auto max-w-3xl text-center project-description my-[60px] text-[24px] leading-[1.6em]" set:html={renderContent(blok.description)} />}
+  {blok.description && <section class="mx-auto max-w-3xl text-center project-description my-[60px] text-[24px] leading-[1.6em] space-y-9" set:html={renderContent(blok.description)} />}
 
   <!-- Example Blocks -->
   {blok.examples && blok.examples.length > 0 && (
@@ -151,7 +151,7 @@ function renderContent(content: any) {
               >
                 <span class="sr-only">Slide {index + 1}</span>
                 <span
-                  class="absolute top-1/2 left-1/2 block -translate-x-1/2 -translate-y-1/2 rounded-full border transition-all duration-300 ease-in-out"
+                  class="absolute block transition-all duration-300 ease-in-out -translate-x-1/2 -translate-y-1/2 border rounded-full top-1/2 left-1/2"
                   :class={`currentImage === ${index} ? 'selected w-3 h-3' : ' w-2 h-2'`}
                 ></span>
               </button>
@@ -164,8 +164,8 @@ function renderContent(content: any) {
 
   <!-- Related Content -->
   {blok.relatedContent && blok.relatedContent.length > 0 && (
-    <section class="mx-auto mt-14 mb-10 max-w-7xl">
-      <h2 class="mb-3 text-center text-4xl uppercase font-functionpro">More about {name}</h2>
+    <section class="mx-auto mb-10 mt-14 max-w-7xl">
+      <h2 class="mb-3 text-4xl text-center uppercase font-functionpro">More about {name}</h2>
 
       <ul class="text-center uppercase font-functionpro">
         {blok.relatedContent.map((related) => (
@@ -187,9 +187,9 @@ function renderContent(content: any) {
 
   <!-- More Projects -->
   <section class="mx-auto mt-14 max-w-7xl">
-    <h2 class="mb-3 text-center text-4xl uppercase font-functionpro">More Pointless Projects</h2>
+    <h2 class="mb-3 text-4xl text-center uppercase font-functionpro">More Pointless Projects</h2>
 
-    <ul class="text-center text-lg uppercase font-functionpro xs:columns-2 md:columns-3">
+    <ul class="text-lg text-center uppercase font-functionpro xs:columns-2 md:columns-3">
       {projects.map((project: { slug: string; name: string }) => (
         <li class="py-2">
           <a href={`/${project.slug}`} class="!no-underline hover:!underline">{project.name}</a>

diff --git a/src/storyblok/bloks/EmbeddedContentBlok.astro b/src/storyblok/bloks/EmbeddedContentBlok.astro
@@ -2,12 +2,12 @@
 const { blok } = Astro.props;
 ---
 
-<figure class="mx-auto my-10 max-w-2xl">
+<figure class="max-w-2xl mx-auto my-10">
   {blok.embed && (
     <div set:html={blok.embed} />
   )}
 
   {blok.caption && (
-    <figcaption class="mt-3 text-center text-xs uppercase font-functionpro">{blok.caption}</figcaption>
+    <figcaption class="mt-3 text-xs text-center uppercase font-functionpro">{blok.caption}</figcaption>
   )}
 </figure>
diff --git a/src/storyblok/bloks/ImageBlok.astro b/src/storyblok/bloks/ImageBlok.astro
@@ -13,15 +13,15 @@ const imageUrl = blok.image?.filename || ''
     <Image
       src={`${imageUrl}/m/filters:format(avif)`}
       alt={blok.alt || ''}
-      class="relative z-10 mx-auto block h-auto max-w-full"
+      class="relative z-10 block h-auto max-w-full mx-auto"
       srcset={[320, 480, 640, 768, 1024, 1366, 1536, 1920, 2048]
         .map(size => `${imageUrl}/m/${size}x0/filters:format(avif) ${size}w`)
         .join(', ')}
       sizes={`100vw`}
       inferSize={true}
     />
 
-    <div class="absolute top-0 left-1/2 z-0 h-full w-full max-w-4xl -translate-x-1/2 transform text-center">
+    <div class="absolute top-0 z-0 w-full h-full max-w-4xl text-center transform -translate-x-1/2 left-1/2">
       <Fragment set:html={circle} />
     </div>
   </div>

diff --git a/src/storyblok/bloks/TextBlok.astro b/src/storyblok/bloks/TextBlok.astro
@@ -5,5 +5,5 @@ const { blok } = Astro.props;
 ---
 
 {blok.text && (
-  <div class="mx-auto my-10 max-w-3xl text-blok" set:html={renderRichText(blok.text)} />
+  <div class="max-w-3xl mx-auto my-10 space-y-9 text-blok" set:html={renderRichText(blok.text)} />
 )}
diff --git a/src/storyblok/bloks/VideoBlok.astro b/src/storyblok/bloks/VideoBlok.astro
@@ -27,7 +27,7 @@ const embedUrl = getEmbedUrl(blok.videoUrl);
     <div class="relative h-0 max-w-full overflow-hidden bg-black video-container pb-[56.25%]">
       <iframe
         src={embedUrl}
-        class="absolute top-0 left-0 h-full w-full"
+        class="absolute top-0 left-0 w-full h-full"
         allow="fullscreen; picture-in-picture"
         allowfullscreen
       ></iframe>
@@ -37,6 +37,6 @@ const embedUrl = getEmbedUrl(blok.videoUrl);
   )}
 
   {blok.caption && (
-    <figcaption class="mt-3 text-center text-xs uppercase font-functionpro">{blok.caption}</figcaption>
+    <figcaption class="mt-3 text-xs text-center uppercase font-functionpro">{blok.caption}</figcaption>
   )}
 </figure>
diff --git a/src/storyblok/components/ContactLink.astro b/src/storyblok/components/ContactLink.astro
@@ -9,7 +9,7 @@ function renderContent(content) {
 ---
 
 <a href={href} class="relative block px-10 text-center leading-7 contact-link pt-[284px] text-brick-light pb-[70px] md:w-1/3">
-  <div class="absolute right-0 left-0 flex justify-center" style={`top: ${topPosition};`}>
+  <div class="absolute left-0 right-0 flex justify-center" style={`top: ${topPosition};`}>
     <Fragment set:html={icon} />
   </div>
 

diff --git a/src/storyblok/components/ProjectList.astro b/src/storyblok/components/ProjectList.astro
@@ -78,7 +78,7 @@ const { projects } = Astro.props;
     }
   })"
 >
-  <div class="mt-10 hidden flex-col items-center justify-center text-sm uppercase font-functionpro sm:flex lg:flex-row">
+  <div class="flex-col items-center justify-center hidden mt-10 text-sm uppercase font-functionpro sm:flex lg:flex-row">
     <div class="flex items-center gap-2 lg:mr-7">
       <span class="text-brick-light">Filter:</span>
       <Toggle label="Tools" type="tools" />
@@ -106,7 +106,7 @@ const { projects } = Astro.props;
     </div>
   </div>
 
-  <div class="project-list mx-auto mt-5 max-w-7xl rounded-xl p-8 bg-brick">
+  <div class="p-8 mx-auto mt-5 project-list max-w-7xl rounded-xl bg-brick">
     <ul class="grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
       {projects.map((project, index) => {
         const { content } = project;
@@ -116,7 +116,7 @@ const { projects } = Astro.props;
 
         return (
           <li
-            class="relative block overflow-hidden rounded pb-20 text-center project-item"
+            class="relative block pb-20 overflow-hidden text-center rounded project-item"
             data-type={content.type}
             style={`
               --projectBackgroundColor: ${backgroundColor};
@@ -136,20 +136,20 @@ const { projects } = Astro.props;
                 <img
                   src={content.icon.filename}
                   alt=""
-                  class="h-auto w-full"
+                  class="w-full h-auto"
                 />
               ) : (
                 <AstroImage
                   src={`${content.icon.filename}/m/filters:format(avif)`}
                   alt=""
-                  class="h-auto w-full"
+                  class="w-full h-auto"
                   inferSize={true}
                 />
               )
             )}
 
-            <div class="-mt-11 px-3">
-              <p class="mb-2 text-xl uppercase leading-5 font-functionpro">
+            <div class="px-3 -mt-11">
+              <p class="mb-2 text-xl leading-5 uppercase font-functionpro">
                 <a class="project-item-link" href={`/${project.slug}`}>{project.name}</a>
               </p>
               {content.tagline && <p class="text-xs leading-5">{content.tagline}</p>}

diff --git a/src/storyblok/components/Toggle.astro b/src/storyblok/components/Toggle.astro
@@ -10,7 +10,7 @@ interface Props {
 const { label, type } = Astro.props;
 ---
 
-<label class="flex cursor-pointer items-center space-x-3">
+<label class="flex items-center space-x-3 cursor-pointer">
   <input
     type="checkbox"
     :checked={`filters.${type}`}
@@ -19,11 +19,11 @@ const { label, type } = Astro.props;
   />
   <span class="text-mud-light">{label}</span>
   <span
-    class="relative inline-block h-8 w-16 rounded-full peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2 transition-colors duration-300"
+    class="relative inline-block w-16 h-8 transition-colors duration-300 rounded-full peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
     :class={`filters.${type} ? 'bg-green text-green-dark' : 'bg-red text-red-dark'`}
   >
-    <i class="absolute top-1/2 left-0 z-10 mx-1 h-6 w-6 -translate-y-1/2 transform rounded-full bg-white transition-all duration-300 ease-in-out" :class={`filters.${type} ? 'translate-x-8' : 'translate-x-0'`}></i>
-    <span class="absolute top-1/2 right-3 z-0 -translate-y-1/2 transform transition-opacity duration-300" :class={`filters.${type} ? 'opacity-0' : 'opacity-100'`}><Fragment set:html={iconX} /></span>
-    <span class="absolute top-1/2 left-3 z-0 -translate-y-1/2 transform transition-opacity duration-300" :class={`filters.${type} ? 'opacity-100' : 'opacity-0'`}><Fragment set:html={iconCheck} /></span>
+    <i class="absolute left-0 z-10 w-6 h-6 mx-1 transition-all duration-300 ease-in-out transform -translate-y-1/2 bg-white rounded-full top-1/2" :class={`filters.${type} ? 'translate-x-8' : 'translate-x-0'`}></i>
+    <span class="absolute z-0 transition-opacity duration-300 transform -translate-y-1/2 top-1/2 right-3" :class={`filters.${type} ? 'opacity-0' : 'opacity-100'`}><Fragment set:html={iconX} /></span>
+    <span class="absolute z-0 transition-opacity duration-300 transform -translate-y-1/2 top-1/2 left-3" :class={`filters.${type} ? 'opacity-100' : 'opacity-0'`}><Fragment set:html={iconCheck} /></span>
   </span>
 </label>
diff --git a/src/storyblok/components/ToggleButton.astro b/src/storyblok/components/ToggleButton.astro
@@ -2,7 +2,7 @@
 const { label, name, value, isActive, onClick } = Astro.props;
 ---
 
-<label class="flex cursor-pointer items-center uppercase group space-x-2">
+<label class="flex items-center space-x-2 uppercase cursor-pointer group">
   <input
     type="radio"
     name={name}
@@ -12,15 +12,15 @@ const { label, name, value, isActive, onClick } = Astro.props;
     class="sr-only peer"
   />
   <span
-    class="relative inline-block h-6 w-6 rounded-full border peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
+    class="relative inline-block w-6 h-6 border rounded-full peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
     :class={`{ 'border-green': ${isActive}, 'border-gray-light': !${isActive} }`}
   >
     <i
-      class="absolute top-1/2 left-1/2 z-10 h-3 w-3 -translate-x-1/2 -translate-y-1/2 transform rounded-full transition duration-300"
+      class="absolute z-10 w-3 h-3 transition duration-300 transform -translate-x-1/2 -translate-y-1/2 rounded-full top-1/2 left-1/2"
       :class={`{ 'bg-white': ${isActive}, 'bg-gray-light': !${isActive} }`}
     ></i>
     <i
-      class="absolute top-1/2 left-1/2 z-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 transform rounded-full transition-all duration-300 bg-green"
+      class="absolute z-0 w-3 h-3 transition-all duration-300 transform -translate-x-1/2 -translate-y-1/2 rounded-full top-1/2 left-1/2 bg-green"
       :class={`{ 'w-6 h-6': ${isActive}, 'w-3 h-3': !${isActive} }`}
     ></i>
   </span>