From 556d774a5e8054ba6848c580fee5b654b8d6f4b2 Mon Sep 17 00:00:00 2001
From: Phuntsok Drak-pa <phundrak@phundrak.fr>
Date: Tue, 3 Sep 2019 02:24:06 +0200
Subject: [PATCH] Better and simplified arrows when rolling/unrolling content

---
 css/style.css | 21 ++++++++++++++++-----
 js/main.js    |  5 ++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8c13eed..e67e0f8 100644
--- a/css/style.css
+++ b/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 {
-    content: "⌄";
-    padding-left: 20px;
+.rotated::after {
+    -webkit-transform: rotate(var(--after-rotation));
+    -moz-transform: rotate(var(--after-rotation));
+    -o-transform: rotate(var(--after-rotation));
+    -ms-transform: rotate(var(--after-rotation));
+    transform: rotate(var(--after-rotation));
 }
 
 .themeBtn {
diff --git a/js/main.js b/js/main.js
index ee45c85..5e5e7d4 100644
--- a/js/main.js
+++ b/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('rolled');
+            $header.find('>:first-child').toggleClass('rotated');
         });
     });
 }