style: sort classes

PHS-TSA · Dec 22, 2023 · 24bf7d5 · 24bf7d5
1 parent 68750d3
commit 24bf7d5
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 46 deletions.
diff --git a/src/components/Cover.tsx b/src/components/Cover.tsx
@@ -7,8 +7,8 @@ interface Props {
 }
 
 const Title: FunctionalComponent<Props> = ({ title, children }) => (
-  <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
-    <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+  <div class="mx-0 bg-green-500 px-4 py-8 dark:bg-green-700">
+    <div class="mx-auto flex max-w-screen-md flex-col items-center justify-center">
       <Logo />
       <h1 class="text-4xl font-bold dark:text-white">{title}</h1>
       {children}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -53,27 +53,27 @@ const icons = [
 
 const Footer: FunctionalComponent<Props> = ({ class: classes = "" }) => (
   <footer
-    class={`bg-white dark:bg-black grid grid-flow-col grid-rows-footer-mobile grid-cols-footer-mobile sm:grid-rows-footer-desktop sm:grid-cols-footer-desktop w-full max-w-screen-xlg gap-x-2 gap-y-16 sm:gap-x-8 md:gap-16 p-8 text-sm ${classes}`}
+    class={`max-w-screen-xlg grid w-full grid-flow-col grid-cols-footer-mobile grid-rows-footer-mobile gap-x-2 gap-y-16 bg-white p-8 text-sm dark:bg-black sm:grid-cols-footer-desktop sm:grid-rows-footer-desktop sm:gap-x-8 md:gap-16 ${classes}`}
   >
-    <div class="row-start-1 row-end-2 col-start-1 col-end-3 sm:col-end-2">
+    <div class="col-start-1 col-end-3 row-start-1 row-end-2 sm:col-end-2">
       <div class="flex items-center gap-1">
         <IconSolarPanel2
-          class="inline-block dark:text-white w-6 h-6"
+          class="inline-block h-6 w-6 dark:text-white"
           aria-hidden="true"
         />
-        <div class="font-bold text-2xl dark:text-white">{siteName}</div>
+        <div class="text-2xl font-bold dark:text-white">{siteName}</div>
       </div>
       <div class="text-gray-500 dark:text-gray-400">{slogan}</div>
     </div>
 
     {menus.map((item) => (
-      <div class={"mb-4 row-start-2 sm:row-start-auto"} key={item.title}>
-        <span class="font-bold dark:text-white py-4 pr-4">{item.title}</span>
+      <div class={"row-start-2 mb-4 sm:row-start-auto"} key={item.title}>
+        <span class="py-4 pr-4 font-bold dark:text-white">{item.title}</span>
         <ul class="mt-2">
           {item.children.map((child) => (
             <li class="mt-2" key={child.name}>
               <a
-                class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-4 pr-4"
+                class="py-4 pr-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                 href={`${item.url}${child.href}`}
               >
                 {child.name}
@@ -84,13 +84,13 @@ const Footer: FunctionalComponent<Props> = ({ class: classes = "" }) => (
       </div>
     ))}
 
-    <div class="text-gray-500 dark:text-gray-400 space-y-2 align-middle col-start-3 col-end-4 sm:col-start-auto sm:col-end-auto row-start-1 row-end-3 sm:row-end-auto">
-      <div class="text-xs m-1">Made with</div>
+    <div class="col-start-3 col-end-4 row-start-1 row-end-3 space-y-2 align-middle text-gray-500 dark:text-gray-400 sm:col-start-auto sm:col-end-auto sm:row-end-auto">
+      <div class="m-1 text-xs">Made with</div>
       {icons.map((tool, index) => (
         <>
           <a
             href={tool.href}
-            class="inline-block hover:text-black dark:hover:text-white m-1"
+            class="m-1 inline-block hover:text-black dark:hover:text-white"
             title={tool.name}
             key={tool.name}
           >

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -34,14 +34,14 @@ const menus = [
   },
 ];
 const Header: FunctionalComponent<Props> = ({ active }: Props) => (
-  <header class="bg-white dark:bg-black w-full max-w-screen-xlg py-6 px-8 flex flex-col sm:flex-row gap-4 h-20">
-    <a class="flex items-center flex-1" href="/">
-      <IconSolarPanel2 aria-hidden="true" class="dark:text-white w-6 h-6" />
-      <div class="text-2xl ml-1 font-bold dark:text-white">{siteName}</div>
+  <header class="max-w-screen-xlg flex h-20 w-full flex-col gap-4 bg-white px-8 py-6 dark:bg-black sm:flex-row">
+    <a class="flex flex-1 items-center" href="/">
+      <IconSolarPanel2 aria-hidden="true" class="h-6 w-6 dark:text-white" />
+      <div class="ml-1 text-2xl font-bold dark:text-white">{siteName}</div>
     </a>
     <ul class="flex flex-row flex-wrap items-center gap-6">
       {menus.map((menu) => (
-        <li key={menu.name} class="h-8 items-end flex">
+        <li key={menu.name} class="flex h-8 items-end">
           <HeaderMenu
             title={menu.name}
             active={

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -10,7 +10,7 @@ const Logo: FunctionalComponent = () => (
   //   alt="the Fresh logo: a sliced lemon dripping with juice"
   // />
   <IconBolt
-    class="text-yellow-200 dark:text-yellow-400 h-52 w-52"
+    class="h-52 w-52 text-yellow-200 dark:text-yellow-400"
     aria-hidden="true"
   />
 );

diff --git a/src/islands/HeaderMenu.tsx b/src/islands/HeaderMenu.tsx
@@ -21,44 +21,43 @@ function makeTextStyle(active: boolean): string {
 }
 
 function makeBorderStyle(active: boolean): string {
-  return `border-gray-500 dark:border-gray-400 hover:border-gray-700 dark:hover:border-gray-200 ${
+  return `border-gray-500 hover:border-gray-700 dark:border-gray-400 dark:hover:border-gray-200 ${
     active ? "border-b-2" : ""
   }`;
 }
 
 const prettyFocus =
-  "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 rounded-sm";
+  "rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75";
 
 const HeaderMenu: FunctionalComponent<Props> = ({
   title,
   items,
   active,
   href,
 }) =>
-  items !== undefined
-    ? (
-      <Popover class="relative">
-        <Popover.Button class={`h-8 ${prettyFocus} ${makeBorderStyle(active)}`}>
-          <span class={`${makeTextStyle(active)} flex flex-row`}>
-            {title} <IconChevronDown class="w-6 h-6" aria-hidden="true" />
-          </span>
-        </Popover.Button>
-
-        <Popover.Panel>
-          <div class="absolute z-10 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none grid grid-flow-row">
-            {items.map((link) => <a href={`${href}${link.url}`}>{link.name}
-            </a>)}
-          </div>
-        </Popover.Panel>
-      </Popover>
-    )
-    : (
-      <a
-        href={href}
-        class={`h-8 ${makeTextStyle(active)} ${makeBorderStyle(active)}`}
-      >
-        {title}
-      </a>
-    );
+  items !== undefined ? (
+    <Popover class="relative">
+      <Popover.Button class={`h-8 ${prettyFocus} ${makeBorderStyle(active)}`}>
+        <span class={`${makeTextStyle(active)} flex flex-row`}>
+          {title} <IconChevronDown class="w-6 h-6" aria-hidden="true" />
+        </span>
+      </Popover.Button>
+
+      <Popover.Panel>
+        <div class="absolute right-0 z-10 mt-2 grid w-56 origin-top-right grid-flow-row divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+          {items.map((link) => (
+            <a href={`${href}${link.url}`}>{link.name}</a>
+          ))}
+        </div>
+      </Popover.Panel>
+    </Popover>
+  ) : (
+    <a
+      href={href}
+      class={`h-8 ${makeTextStyle(active)} ${makeBorderStyle(active)}`}
+    >
+      {title}
+    </a>
+  );
 
 export { HeaderMenu as default };
diff --git a/src/routes/_layout.tsx b/src/routes/_layout.tsx
@@ -4,7 +4,7 @@ import Footer from "../components/Footer.tsx";
 import Header from "../components/Header.tsx";
 
 const Layout: FunctionalComponent<PageProps> = ({ Component, url }) => (
-  <div class="flex flex-col min-h-screen">
+  <div class="flex min-h-screen flex-col">
     <Header active={url.pathname} />
     <Component />
     <Footer class="mt-auto" />