From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 6 Feb 2022 01:09:51 +0000 (-0800)
Subject: Organize CSS by section
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=4bb21582ed747e881d8f36f2a209ce3e8b59246e;p=css-loaders

Organize CSS by section
---

diff --git a/index.html b/index.html
index 5f56eb8..541317f 100644
--- a/index.html
+++ b/index.html
@@ -22,12 +22,7 @@
       margin-inline: auto;
     }
 
-    .skeleton-line {
-      block-size: 1rem;
-      margin-block: 1rem;
-      animation: shimmer 1s infinite alternate;
-      background: hsl(0deg 0% 50%);
-    }
+    /* Skeleton loaders */
 
     @keyframes shimmer {
       100% {
@@ -35,6 +30,13 @@
       }
     }
 
+    .skeleton-line {
+      block-size: 1rem;
+      margin-block: 1rem;
+      animation: shimmer 1s infinite alternate;
+      background: hsl(0deg 0% 50%);
+    }
+
     .skeleton-inline-container {
       display: flex;
     }
@@ -61,6 +63,14 @@
       background: hsl(0deg 0% 50%);
     }
 
+    /* Spinners */
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
     .inline-spinner {
       display: inline-block;
       box-sizing: border-box;
@@ -72,9 +82,11 @@
       animation: spin 1s infinite;
     }
 
-    @keyframes spin {
+    /* Dividers */
+
+    @keyframes shiftRight {
       100% {
-        transform: rotate(360deg);
+        background-position: 100%;
       }
     }
 
@@ -95,12 +107,6 @@
       background-size: 400%;
       animation: shiftRight 3s linear infinite alternate;
     }
-
-    @keyframes shiftRight {
-      100% {
-        background-position: 100%;
-      }
-    }
   </style>
   <link rel="icon" href="data:;base64,=">
   <title>css-loaders</title>