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

@@ -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});
+    }
+  }
+}

assets/scss/asciidoctor.scss

@@ -1,4 +1,6 @@
 // Asciidoctor-specific styles
+@import "roles";
+
 .anchor {
   &::before {
     content: "§";

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;
+  }
+}

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;
+}