Better and simplified arrows when rolling/unrolling content

css/style.css

@@ -12,6 +12,10 @@
     src: url("../fonts/NotoSansRunic-Regular.ttf");
 }
 
+:root {
+    --after-rotation: 90deg;
+}
+
 body {
     font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
     font-weight: normal;
@@ -160,14 +164,21 @@ a.footref {
     margin: 0 2px;
 }
 
-.rolled::after {
+h2::after,
+h3::after,
+h4::after,
+h5::after {
     content: "➤";
-    padding-left: 20px;
+    margin-left: 20px;
+    display: inline-block;
 }
 
-.unrolled::after {
+.rotated::after {
-    content: "⌄";
+    -webkit-transform: rotate(var(--after-rotation));
-    padding-left: 20px;
+    -moz-transform: rotate(var(--after-rotation));
+    -o-transform: rotate(var(--after-rotation));
+    -ms-transform: rotate(var(--after-rotation));
+    transform: rotate(var(--after-rotation));
 }
 
 .themeBtn {

js/main.js

@@ -15,15 +15,14 @@ function roll_elems() {
     // Except for the footnotes
     $('.footnotes').removeClass('rolled');
 
-    // // Make the rollable headers actually rollable and rolled
+    // Make the rollable headers actually rollable and rolled
     $('.header-container').each(function($header) {
         $header = $(this);
         $header.click(function() {
             $header.nextAll().each(function() {
                 $(this).slideToggle(500);
             });
-            $header.find('>:first-child').toggleClass('unrolled');
+            $header.find('>:first-child').toggleClass('rotated');
-            $header.find('>:first-child').toggleClass('rolled');
         });
     });
 }