From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 7 Jan 2023 04:39:49 +0000 (-0800)
Subject: Organize selectors
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=e7636059e458e1f009b829fcfea431e4fab24228;p=utf-8-visualizer

Organize selectors
---

diff --git a/style.css b/style.css
index c26abd6..459ce3e 100644
--- a/style.css
+++ b/style.css
@@ -14,6 +14,10 @@ footer {
   justify-content: center;
 }
 
+footer {
+  margin-block: 8px;
+}
+
 main {
   inline-size: min(1080px, 100% - 16px);
   margin-inline: auto;
@@ -34,6 +38,12 @@ input {
   transition: filter 800ms;
 }
 
+input:hover,
+input:focus-within {
+  filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
+  transition: filter 400ms;
+}
+
 div#visualizations {
   inline-size: fit-content;
   margin-inline: auto;
@@ -43,16 +53,6 @@ div#visualizations {
   justify-content: center;
 }
 
-input:hover,
-input:focus-within {
-  filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
-  transition: filter 400ms;
-}
-
-footer {
-  margin-block: 8px;
-}
-
 a {
   line-height: 0;
   background: hsl(222deg 50% 30%);
@@ -87,6 +87,7 @@ a>svg {
   transition: opacity 200ms;
 }
 
+/* These keyframes are used in the al-point-visualization template styling, but must be declared globally */
 @keyframes slideIn {
   from {
     transform: translateY(-100%);