From 321cb323697bfcab25b576162c03f684a69d06f8 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Mon, 15 May 2023 13:20:50 +0800
Subject: [PATCH] Modularize site styles

The content is starting to use more and more custom Asciidoctor roles
so it is starting to be tedious to put it in one SCSS file.
---
 assets/scss/animations.scss  | 58 ++++++++++++++++++++++++++++++++++++
 assets/scss/asciidoctor.scss |  2 ++
 assets/scss/extend.scss      | 53 +++++---------------------------
 assets/scss/roles.scss       | 24 +++++++++++++++
 4 files changed, 92 insertions(+), 45 deletions(-)
 create mode 100644 assets/scss/animations.scss
 create mode 100644 assets/scss/roles.scss

diff --git a/assets/scss/animations.scss b/assets/scss/animations.scss
new file mode 100644
index 0000000..fecd62b
--- /dev/null
+++ b/assets/scss/animations.scss
@@ -0,0 +1,58 @@
+@keyframes shake {
+  $distance: 1px;
+  from { transform: translate(-$distance); }
+  to { transform: translate($distance); }
+}
+
+@keyframes extreme-shake {
+  $distance: 3px;
+  from { transform: translate(-$distance); }
+  to { transform: translate($distance); }
+}
+
+@keyframes bounce {
+  $baseSize: 3em;
+  $baseRotation: 20deg;
+  from {
+    transform: rotate($baseRotation) translateX($baseSize)
+      translateY(-#{$baseSize / 5});
+  }
+  to {
+    transform: rotate(-$baseRotation) translateX(-$baseSize)
+      translateY(-#{$baseSize / 5});
+  }
+}
+
+@keyframes pulse {
+  from {
+    width: #{$tooltip-size / 2};
+  }
+  to {
+    width: #{$tooltip-size};
+  }
+}
+
+@keyframes rainbow {
+  $colorOrder: "07" "08" "09" "0A" "0B" "0C" "0D" "0E" "0F";
+  $divide: floor(100 / length($colorOrder));
+  @for $i from 1 to length($colorOrder) {
+    #{$i * $divide}% {
+      fill: var(--base#{nth($colorOrder, $i)});
+    }
+  }
+}
+
+@media (prefers-reduced-motion) {
+  @keyframes bounce {
+    $baseSize: 1em;
+    $baseRotation: 10deg;
+    from {
+      transform: rotate($baseRotation) translateX($baseSize)
+        translateY(-#{$baseSize / 5});
+    }
+    to {
+      transform: rotate(-$baseRotation) translateX(-$baseSize)
+        translateY(-#{$baseSize / 5});
+    }
+  }
+}
diff --git a/assets/scss/asciidoctor.scss b/assets/scss/asciidoctor.scss
index 0120ceb..e10bdc3 100644
--- a/assets/scss/asciidoctor.scss
+++ b/assets/scss/asciidoctor.scss
@@ -1,4 +1,6 @@
 // Asciidoctor-specific styles
+@import "roles";
+
 .anchor {
   &::before {
     content: "§";
diff --git a/assets/scss/extend.scss b/assets/scss/extend.scss
index 0293db5..64220f3 100644
--- a/assets/scss/extend.scss
+++ b/assets/scss/extend.scss
@@ -2,6 +2,7 @@
 $tooltip-size: 5em;
 $line-height: 1.45;
 
+@import "animations";
 @import "asciidoctor";
 
 :root {
@@ -82,19 +83,6 @@ article.post {
   background: var(--base01);
 }
 
-// Asciidoctor roles (e.g., [.text-center]) on a block.
-.text-center {
-  text-align: center;
-}
-
-.line-through {
-  text-decoration: line-through;
-}
-
-.break-anywhere {
-  overflow-wrap: anywhere;
-}
-
 // Custom layouts
 #logo {
   --size: $tooltip-size;
@@ -115,38 +103,6 @@ article.post {
   }
 }
 
-@keyframes bounce {
-  $baseSize: 3em;
-  $baseRotation: 20deg;
-  from {
-    transform: rotate($baseRotation) translateX($baseSize)
-      translateY(-#{$baseSize / 5});
-  }
-  to {
-    transform: rotate(-$baseRotation) translateX(-$baseSize)
-      translateY(-#{$baseSize / 5});
-  }
-}
-
-@keyframes pulse {
-  from {
-    width: #{$tooltip-size / 2};
-  }
-  to {
-    width: #{$tooltip-size};
-  }
-}
-
-@keyframes rainbow {
-  $colorOrder: "07" "08" "09" "0A" "0B" "0C" "0D" "0E" "0F";
-  $divide: floor(100 / length($colorOrder));
-  @for $i from 1 to length($colorOrder) {
-    #{$i * $divide}% {
-      fill: var(--base#{nth($colorOrder, $i)});
-    }
-  }
-}
-
 [data-tooltip] {
   &::before {
     --scale: 0;
@@ -177,3 +133,10 @@ code[data-lang] {
     color: unset;
   }
 }
+
+// Prefer reduced animations.
+@media (prefers-reduced-motion) {
+  #logo svg {
+    animation: bounce 0.6s ease-in-out alternate infinite;
+  }
+}
diff --git a/assets/scss/roles.scss b/assets/scss/roles.scss
new file mode 100644
index 0000000..6469bfa
--- /dev/null
+++ b/assets/scss/roles.scss
@@ -0,0 +1,24 @@
+// Asciidoctor roles (e.g., [.text-center]) on a block.
+.inline-block {
+  display: inline-block;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.break-anywhere {
+  overflow-wrap: anywhere;
+}
+
+.shake {
+  animation: shake 0.1s alternate ease-in-out infinite;
+}
+
+.extreme-shake {
+  animation: extreme-shake 0.1s alternate ease-in-out infinite;
+}