style: apply prettier changes

srcery-colors · Aug 12, 2023 · b9fc152 · b9fc152
1 parent 33ddbd4
commit b9fc152
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 65 deletions.
diff --git a/src/community/index.html b/src/community/index.html
@@ -11,21 +11,21 @@
     <title>Srcery Theme - Community activities and communications</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header community=true }}
       <section class="w-full">
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             <!-- <div class="svg w-8 mr-2" x-html="icon"></div> -->
             Discord
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             We run a Discord server for those interested. You're welcome to join
             us there if you have any burning questions or just wanna say hi.
           </p>
@@ -41,10 +41,10 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
         </div>
 
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Merchandise
           </h2>
-          <p class="text-justify mb-3">
+          <p class="mb-3 text-justify">
             Get our brand new merchandise featuring the Srcery color scheme!
             We're not making any profit from the sales, so you are instead
             showing your support by wearing and using the merch. Thank you for
@@ -57,7 +57,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Community
           </h2>
           <p class="text-justify">
@@ -67,45 +67,45 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </p>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Core team
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.members">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 border-4 border-bright_black w-1/2 rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div x-text="user.login"></div>
               </a>
             </template>
           </div>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Contributors
           </h2>
           <div
-            class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
+            class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
           >
             <template x-for="user in github.contributors">
               <a
                 :href="user.html_url"
                 target="_blank"
-                class="flex break-all flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
+                class="flex flex-col items-center break-all border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
               >
                 <img
                   :src="user.avatar_url"
                   alt="github user avatar"
-                  class="p-1 w-1/2 border-4 border-bright_black rounded-full mb-2"
+                  class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
                 />
                 <div class="break-word" x-text="user.login"></div>
               </a>

diff --git a/src/index.html b/src/index.html
@@ -12,16 +12,16 @@
     </title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header }}
       <section class="w-full">
-        <div class="text-justify mb-8">
+        <div class="mb-8 text-justify">
           <p class="mb-4">
             Srcery is dark syntax highlighting color scheme with clearly defined
             contrasting colors and a slightly earthy tone.
@@ -35,7 +35,7 @@
           </p>
         </div>
         <div class="w-full">
-          <h2 class="uppercase mb-4">Preview</h2>
+          <h2 class="mb-4 uppercase">Preview</h2>
           <p class="mb-8">
             Here's a few
             <a class="link" href="https://rosettacode.org/wiki/Rosetta_Code"
@@ -48,7 +48,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             for details about a specific editor/IDE.
           </p>
           <ul
-            class="flex overflow-x-auto overflow-y-hidden text-center border-bright_black"
+            class="flex overflow-x-auto overflow-y-hidden border-bright_black text-center"
           >
             <template x-for="(value, key) in languages">
               <li class="flex flex-1">
@@ -70,7 +70,7 @@ <h2 class="uppercase mb-4">Preview</h2>
             </template>
           </ul>
           <div
-            class="border-b-2 border-x-2 border-bright_black overflow-x-auto"
+            class="overflow-x-auto border-x-2 border-b-2 border-bright_black"
           >
             <pre id="preview" class="flex p-4">
                 <code class="font-iosevka" x-html="languages[activeTab].html">

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,42 +1,42 @@
-<header class="min-w-auto sm:min-w-[640px] sm:max-w-[640px] mb-8">
+<header class="min-w-auto mb-8 sm:min-w-[640px] sm:max-w-[640px]">
   <a
     href="/"
-    class="min-h-auto pt-2 sm:pt-0 sm:min-h-[546px] flex flex-col items-center mb-2"
+    class="min-h-auto mb-2 flex flex-col items-center pt-2 sm:min-h-[546px] sm:pt-0"
   >
     <div
-      class="flex sm:hidden p-5 rounded-full border-2 border-bright_black justify-center items-center"
+      class="flex items-center justify-center rounded-full border-2 border-bright_black p-5 sm:hidden"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
     <div
-      class="bg-triangle bg-no-repeat min-h-[546px] pt-[30%] hidden sm:flex min-w-full bg-center align-center justify-center"
+      class="align-center hidden min-h-[546px] min-w-full justify-center bg-triangle bg-center bg-no-repeat pt-[30%] sm:flex"
     >
       <img
         alt="Srcery glyph"
         src="/svg/glyph.svg"
-        class="glyph w-logo h-logo"
+        class="glyph h-logo w-logo"
       />
     </div>
-    <div class="mt-4 sm:mt-[-18%] flex items-center">
-      <div class="flex mr-2">
+    <div class="mt-4 flex items-center sm:mt-[-18%]">
+      <div class="mr-2 flex">
         <div class="dot bg-xgray2"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray10"></div>
       </div>
-      <h1 class="uppercase text-6xl">Srcery</h1>
-      <div class="flex ml-2">
+      <h1 class="text-6xl uppercase">Srcery</h1>
+      <div class="ml-2 flex">
         <div class="dot bg-xgray10"></div>
         <div class="dot bg-xgray7"></div>
         <div class="dot bg-xgray2"></div>
       </div>
     </div>
   </a>
   <nav
-    class="flex justify-center max-w-[384px] sm:max-w-full flex grow justify-between"
+    class="flex flex max-w-[384px] grow justify-center justify-between sm:max-w-full"
   >
     <span class="w-full text-left">
       <a href="/themes/" class="link uppercase {{#if themes}}sel{{/if}}"

diff --git a/src/partials/octocat.html b/src/partials/octocat.html
@@ -5,7 +5,7 @@
     aria-label="View source on Github"
   >
     <svg
-      class="text-bright_white fill-hard_black"
+      class="fill-hard_black text-bright_white"
       viewBox="0 0 250 250"
       aria-hidden="true"
     >

diff --git a/src/resources/index.html b/src/resources/index.html
@@ -12,17 +12,17 @@
     <title>Srcery Theme - Various resources</title>
   </head>
   <body
-    class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
+    class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
   >
     {{> octocat }}
     <main
       x-data="state"
-      class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
+      class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
     >
       {{> header resources=true }}
       <section class="w-full">
         <div class="mb-8">
-          <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
+          <h2 class="mb-3 text-center text-xl uppercase sm:text-left">
             Resources
           </h2>
           <p class="text-justify">
@@ -32,7 +32,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
           </p>
         </div>
         <div class="mb-8">
-          <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
+          <h3 class="mb-3 text-center uppercase sm:text-left">Palette</h3>
           <p class="mb-4" x-show="version">
             <span class="">Latest version:</span>
             <a
@@ -73,7 +73,7 @@ <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
               <div class="list-dot"></div>
               <a
                 target="_blank"
-                class="flex items-center link"
+                class="link flex items-center"
                 href="https://www.npmjs.com/package/@srcery-colors/srcery-palette"
               >
                 <div class="svg mr-2 w-8" x-html="icons.npm"></div>
@@ -88,13 +88,13 @@ <h3 class="mb-3 text-center sm:text-left uppercase">Palette</h3>
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Web assets
           </h2>
           <p class="mb-4">
             Aside from the palette itself, here are some useful web assets.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"
@@ -142,7 +142,7 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Graphic assets
           </h2>
           <p class="mb-4">
@@ -154,7 +154,7 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
             If you are looking for icons, logo, screenshots, etcetera, this is
             the place.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"
@@ -167,14 +167,14 @@ <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
           </ul>
         </div>
         <div class="mb-8">
-          <h2 class="text-xl mb-4 text-center sm:text-left uppercase">
+          <h2 class="mb-4 text-center text-xl uppercase sm:text-left">
             Miscellaneous
           </h2>
           <p class="mb-4">
             Here are some miscellaneous projects that don't really fit anywhere
             else. Mostly experiments and and other bits and bobs.
           </p>
-          <ul class="list-disc list-inside">
+          <ul class="list-inside list-disc">
             <li class="mb-2">
               <a
                 target="_blank"

diff --git a/src/style.css b/src/style.css
@@ -27,34 +27,34 @@
 
 @layer components {
   .dot {
-    @apply hidden tiny:block w-dot h-dot rounded-full mr-2;
+    @apply mr-2 hidden h-dot w-dot rounded-full tiny:block;
   }
   .link {
-    @apply border-b border-dotted hover:text-white border-white;
+    @apply border-b border-dotted border-white hover:text-white;
   }
   .tab {
-    @apply px-4 flex border-bright_black items-end justify-center pt-1 grow;
+    @apply flex grow items-end justify-center border-bright_black px-4 pt-1;
   }
   .tab-inactive {
     @apply border-b-2 hover:bg-xgray1;
   }
   .tab-active {
-    @apply border-e-2 border-s-2 border-t-2 border-b-transparent border-b-2;
+    @apply border-b-2 border-e-2 border-s-2 border-t-2 border-b-transparent;
   }
   .svg > svg > * {
     @apply fill-bright_white;
   }
   .code {
-    @apply whitespace-nowrap overflow-x-auto flex mb-3 p-4 bg-hard_black;
+    @apply mb-3 flex overflow-x-auto whitespace-nowrap bg-hard_black p-4;
   }
   .inline-code {
     @apply whitespace-nowrap bg-hard_black p-1;
   }
   .list-dot {
-    @apply w-[5px] h-[5px] bg-bright_white rounded-full mr-2;
+    @apply mr-2 h-[5px] w-[5px] rounded-full bg-bright_white;
   }
   .sel {
-    @apply text-bright_blue border-bright_blue;
+    @apply border-bright_blue text-bright_blue;
   }
 }