format code

src/components/Footer.astro

@@ -10,13 +10,13 @@ const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
-  <div class="clear-both bg-nix-blue-darker font-light text-white">
+  <div class="bg-nix-blue-darker clear-both font-light text-white">
     <Container>
       <div class="flex flex-col flex-wrap gap-y-8 py-14 sm:flex-row">
         {
           footerMenu.data.sections.map((menu) => (
             <div class="basis-1/2 lg:basis-1/4">
-              <h4 class="mb-4 font-heading text-xl font-bold text-nix-blue">
+              <h4 class="font-heading text-nix-blue mb-4 text-xl font-bold">
                 {menu.name}
               </h4>
               <ul class="space-y-2 font-extralight">

src/components/Header.astro

@@ -25,7 +25,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
     >
       <Link
         href="/"
-        class="flex select-none items-center justify-between gap-2 md:justify-start"
+        class="flex items-center justify-between gap-2 select-none md:justify-start"
       >
         <InlineSVG
           class="h-12 w-auto"
@@ -41,7 +41,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
       <button
         aria-label="Main Navigation Toggle"
-        class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
+        class="bg-nix-blue-light block rounded-lg p-4 md:hidden"
         id="navigation-toggle"
       >
         <span class="mb-1.5 block h-1 w-8 bg-white"></span>
@@ -60,7 +60,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         headerMenu.data.items.map((item) => (
           <Link
             class:list={[
-              'pb-6 pt-7',
+              'pt-7 pb-6',
               navbarItemStyle,
               currentTopRoute === item.link
                 ? navbarItemActiveStyle
@@ -77,7 +77,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         href="https://search.nixos.org"
         arial-label="Nixos package and options search"
       >
-        <Icon class="hidden h-8 w-8 text-nix-blue md:block" name="mdi:search" />
+        <Icon class="text-nix-blue hidden h-8 w-8 md:block" name="mdi:search" />
         <span class="inline-block md:hidden">Search</span>
       </Link>
     </nav>

src/components/layout/CodeInline.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<code class="bg-neutral-100 rounded-lg border-1 px-2 py-1 text-nix-orange-dark"
+<code class="text-nix-orange-dark rounded-lg border-1 bg-neutral-100 px-2 py-1"
   ><slot /></code
 >

src/components/layout/Divider.astro

@@ -24,7 +24,7 @@ const { style = 'slope', mirrorX = false, mirrorY = false } = Astro.props;
   role="separator"
   src={styleMap[style]}
   class:list={[
-    'left-0 right-0 block h-16 w-full',
+    'right-0 left-0 block h-16 w-full',
     heightMap[style],
     mirrorY ? 'translate-y-[1px]' : 'translate-y-[-1px]',
     {

src/components/layout/PageHeader.astro

@@ -11,21 +11,21 @@ import Container from './Container.astro';
 ---
 
 <div
-  class="hidden bg-cover bg-bottom bg-no-repeat py-24 inline-svg-header-nixdarkblue md:block"
+  class="inline-svg-header-nixdarkblue hidden bg-cover bg-bottom bg-no-repeat py-24 md:block"
 >
   <Container class="grid grid-cols-3 text-white">
     <div class="col-span-2 flex flex-col gap-4">
       {
         parentPath && (
           <a
             href={parentPath}
-            class="invisible -mb-4 -mt-6 text-white! md:visible"
+            class="invisible -mt-6 -mb-4 text-white! md:visible"
           >
             <span class="text-nixblue">←</span> Back
           </a>
         )
       }
-      <h1 class="text-left font-heading text-4xl font-bold">
+      <h1 class="font-heading text-left text-4xl font-bold">
         {text}
       </h1>
       {subtext && <p class="text text-left">{subtext}</p>}

src/components/layout/Tabs.astro

@@ -99,7 +99,7 @@ const uid = crypto.randomUUID();
   <Container class="grid w-full gap-8 px-12 pt-8 lg:grid-cols-[30%_auto]">
     <nav class:list={['tab-bar']}>
       <Container
-        class="grid gap-0 rounded-3xl bg-nix-blue-extralight px-0! py-8 md:grid-cols-1"
+        class="bg-nix-blue-extralight grid gap-0 rounded-3xl px-0! py-8 md:grid-cols-1"
       >
         {
           tabs.map(async (name, idx) => {

src/components/pages/blog/BlogListEntry.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 >
   <a href={generatePathFromPost(post)}>
     <h2
-      class="font-ned, composition in a document, page, applicaextrabold font-heading text-4xl leading-tight text-nix-blue"
+      class="font-ned, composition in a document, page, applicaextrabold font-heading text-nix-blue text-4xl leading-tight"
     >
       {post.data.title}
     </h2>

src/components/pages/community/OfficialCommunityLink.astro

@@ -22,7 +22,7 @@ const {
 
 <li
   class:list={[
-    'flex-1 cursor-pointer rounded-xl bg-nix-blue p-4 transition-all hover:bg-nix-blue-dark',
+    'bg-nix-blue hover:bg-nix-blue-dark flex-1 cursor-pointer rounded-xl p-4 transition-all',
     type === 'icon' && 'flex flex-col items-center justify-center',
     extraClasses,
   ]}

src/components/pages/community/UnofficialCommunityLink.astro

@@ -20,7 +20,7 @@ const {
 
 <li
   class:list={[
-    'flex-1 cursor-pointer rounded-xl border-2 border-nix-blue bg-white p-4 transition-all hover:bg-nix-blue-extralight',
+    'border-nix-blue hover:bg-nix-blue-extralight flex-1 cursor-pointer rounded-xl border-2 bg-white p-4 transition-all',
     type === 'icon' && 'flex flex-col items-center justify-center',
   ]}
 >

src/components/pages/community/teams/MembersDisplay.astro

@@ -11,12 +11,12 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
 
 <aside
   class:list={[
-    !isSubteam && 'w-full rounded-xl bg-nix-blue-extralight px-4 py-3',
+    !isSubteam && 'bg-nix-blue-extralight w-full rounded-xl px-4 py-3',
     extraClasses,
   ]}
 >
   <h2 class={titleClasses}>{title}</h2>
-  <ul class="ml-4 mt-2 list-disc font-light">
+  <ul class="mt-2 ml-4 list-disc font-light">
     {
       members.map((member) => (
         <li class="mb-1 last:mb-0">
@@ -52,10 +52,10 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
   {
     contact && (
       <>
-        <h2 class="mt-4 font-heading text-3xl font-bold text-nix-blue">
+        <h2 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
           Contact
         </h2>
-        <ul class="ml-4 mt-2 list-disc">
+        <ul class="mt-2 ml-4 list-disc">
           {contact.map((contact) => (
             <li class="mb-1 last:mb-0">
               <a href={contact.href}>{contact.name}</a>

src/components/pages/download/DownloadHeader.astro

@@ -10,21 +10,21 @@ interface Props {
 const { title, subTitle, currentVersion } = Astro.props;
 ---
 
-<Container class="mt-16 grid grid-cols-2 bg-nix-blue py-8 text-white md:py-6">
-  <h1 class="self-center font-heading text-3xl font-bold leading-none">
+<Container class="bg-nix-blue mt-16 grid grid-cols-2 py-8 text-white md:py-6">
+  <h1 class="font-heading self-center text-3xl leading-none font-bold">
     {title}
     <span class="hidden lg:inline">
       {subTitle}
     </span>
   </h1>
   <div class="flex flex-col justify-center self-center">
     <div class="text-end">
-      <h2 class="hidden pb-2 font-heading text-2xl font-bold md:inline">
+      <h2 class="font-heading hidden pb-2 text-2xl font-bold md:inline">
         Current version
       </h2>
       <a
         href="#"
-        class="rounded-2xl bg-nix-green px-4 py-2 text-center text-2xl font-bold text-white! no-underline!"
+        class="bg-nix-green rounded-2xl px-4 py-2 text-center text-2xl font-bold text-white! no-underline!"
         >{currentVersion}</a
       >
     </div>

src/components/pages/explore/TimelineCenter.astro

@@ -6,10 +6,10 @@ interface Props {
 const { number = 0 } = Astro.props;
 ---
 
-<div class="absolute left-[-3rem] top-0 hidden h-full w-1 bg-nix-blue md:block">
+<div class="bg-nix-blue absolute top-0 left-[-3rem] hidden h-full w-1 md:block">
 </div>
 <div
-  class="absolute left-[-5rem] top-0 hidden h-[4rem] w-[4rem] rounded-[2rem] bg-nix-green text-center text-[3rem] font-bold leading-[4rem] text-white md:block"
+  class="bg-nix-green absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold text-white md:block"
 >
   {number}
 </div>

src/components/pages/explore/TimelineText.astro

@@ -20,10 +20,10 @@ const {
 import Tag from '../../ui/Tag.astro';
 ---
 
-<h2 class="font-heading text-[2rem] font-bold leading-[2.2rem] text-nix-blue">
+<h2 class="font-heading text-nix-blue text-[2rem] leading-[2.2rem] font-bold">
   {heading}
 </h2>
-<p class="text-neutral-500 text-xl font-bold leading-[2.2rem]">{subHeading}</p>
+<p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
 <div
   class="flex flex-wrap gap-1"
   class:list={[

src/components/ui/Asciinema.astro

@@ -33,7 +33,7 @@ const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
   {
     title && (
       <a href={`#${demoId}`} class="no-underline!" id={`${demoId}-link`}>
-        <h3 class="font-heading text-xl font-bold text-nix-blue">{title}</h3>
+        <h3 class="font-heading text-nix-blue text-xl font-bold">{title}</h3>
       </a>
     )
   }
@@ -78,7 +78,7 @@ const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
 
 <style is:global>
   @reference "./../../styles/base.css";
-  
+
   .ap-play-button {
     @apply !relative;
   }

src/components/ui/Banner.astro

@@ -6,7 +6,7 @@ import Container from '../layout/Container.astro';
 
 <div
   class:list={[
-    'clickable bg-nix-blue-extralight font-heading font-bold text-nix-blue-dark',
+    'clickable bg-nix-blue-extralight font-heading text-nix-blue-dark font-bold',
     wrapperClasses,
   ]}
 >

src/components/ui/Citation.astro

@@ -19,7 +19,7 @@ const { id, onBlueBackground } = Astro.props;
     </summary>
     <div
       class:list={[
-        'shadow-lg absolute mt-1 max-w-sm rounded-sm border border-gray-300 p-2 text-sm',
+        'absolute mt-1 max-w-sm rounded-sm border border-gray-300 p-2 text-sm shadow-lg',
         !onBlueBackground && 'bg-white!',
         onBlueBackground && 'bg-nix-blue-darker!',
       ]}

src/components/ui/Input.astro

@@ -26,22 +26,23 @@ const {
       {
         'text-nix-blue': color === 'nix-blue',
         'text-white': color === 'white',
-        'left-3 top-3.5 md:block': size === 'lg',
-        'left-2.5 top-1.5': size === 'sm-full',
+        'top-3.5 left-3 md:block': size === 'lg',
+        'top-1.5 left-2.5': size === 'sm-full',
       },
     ]}
     name="mdi:search"
   />
   <input
     type="text"
-    class="outline-2 outline-transparent border-gray-200 focus:border-nix-blue-light focus:outline-nix-blue-light"
+    class="focus:border-nix-blue-light focus:outline-nix-blue-light border-gray-200 outline-2 outline-transparent"
     class:list={[
       'text-normal rounded-full placeholder-gray-400',
       {
-        'placeholder-grey-200 text-nix-blue bg-white border-gray-200': color === 'nix-blue',
-        'border-white bg-transparent text-white placeholder-nix-blue-extralight':
+        'placeholder-grey-200 text-nix-blue border-gray-200 bg-white':
+          color === 'nix-blue',
+        'placeholder-nix-blue-extralight border-white bg-transparent text-white':
           color === 'white',
-        'w-full border-2 py-3 pl-11 pr-4 text-xl md:w-[30rem]': size === 'lg',
+        'w-full border-2 py-3 pr-4 pl-11 text-xl md:w-[30rem]': size === 'lg',
         'w-full border-1 px-10 py-2 md:pl-11': size === 'sm-full',
       },
     ]}

src/components/ui/Quotation.astro

@@ -5,7 +5,7 @@ const {} = Astro.props;
 ---
 
 <div
-  class="rounded-3xl bg-nix-blue-extralight p-8 font-bold text-nix-blue-darker"
+  class="bg-nix-blue-extralight text-nix-blue-darker rounded-3xl p-8 font-bold"
 >
   <slot />
 </div>

src/pages/404.astro

@@ -6,7 +6,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Not Found">
   <Container>
     <h1
-      class="mb-4 mt-10 font-heading text-4xl font-extrabold leading-none text-nix-blue"
+      class="font-heading text-nix-blue mt-10 mb-4 text-4xl leading-none font-extrabold"
     >
       Not found
     </h1>

src/pages/blog.astro

@@ -55,7 +55,7 @@ const blogMenu = await getEntry('menus', 'blog');
 <Layout title="Blog">
   <PageHeader text="Blog" />
   <Container class="py-8">
-    <p class="mb-2 text-center text-2xl font-light text-nix-blue">
+    <p class="text-nix-blue mb-2 text-center text-2xl font-light">
       Click boxes to filter content
     </p>
     <div
@@ -77,14 +77,14 @@ const blogMenu = await getEntry('menus', 'blog');
               />
               <label
                 for={`check-${e.id}`}
-                class="relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 border-nix-blue fill-nix-blue p-4 text-nix-blue before:icon-[mdi--checkbox-blank-outline] peer-checked:before:icon-[mdi--checkbox-marked-outline] before:absolute before:right-4 before:block before:h-8 before:w-8 hover:bg-nix-blue-darker hover:fill-white hover:text-white peer-checked:bg-nix-blue peer-checked:fill-white peer-checked:text-white peer-checked:before:absolute peer-checked:before:block peer-checked:before:h-8 peer-checked:before:w-8 peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 md:w-auto md:flex-col md:p-8 md:before:right-2 md:before:top-2"
+                class="border-nix-blue fill-nix-blue text-nix-blue before:icon-[mdi--checkbox-blank-outline] peer-checked:before:icon-[mdi--checkbox-marked-outline] hover:bg-nix-blue-darker peer-checked:bg-nix-blue peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 before:absolute before:right-4 before:block before:h-8 before:w-8 peer-checked:before:absolute peer-checked:before:block peer-checked:before:h-8 peer-checked:before:w-8 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8 md:before:top-2 md:before:right-2"
               >
                 <InlineSVG src={e.icon} class="w-12 md:w-24" />
                 <span class="font-light">{e.title}</span>
               </label>
             </div>
             <div class="pt-6 md:hidden">
-              <label class="relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 border-nix-blue fill-nix-blue p-4 text-nix-blue hover:bg-nix-blue-darker hover:fill-white hover:text-white peer-checked:bg-nix-blue peer-checked:fill-white peer-checked:text-white peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 md:w-auto md:flex-col md:p-8">
+              <label class="border-nix-blue fill-nix-blue text-nix-blue hover:bg-nix-blue-darker peer-checked:bg-nix-blue peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8">
                 <a href={'/blog/' + e.id + '-rss.xml'}>
                   <InlineSVG
                     src="/src/assets/image/blog-menu/rss.svg"

src/pages/blog/[category]/[year]/[id].astro

@@ -27,7 +27,7 @@ const { Content } = await entry.render();
       ? `Published on ${entry.data.date.toDateString()}`
       : null}
   />
-  <Container class="mb-4 mt-8 flex flex-col gap-8">
+  <Container class="mt-8 mb-4 flex flex-col gap-8">
     <article class="text-light-bold">
       <Content />
     </article>