Organize CSS by section

diff --git a/index.html b/index.html
index 5f56eb8bc675018d01e93fa5c4a894db4334a4d2..541317f1396b251f350cf01bb02f1d80391b4da8 100644 (file)
--- 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>