Fix `Git` button and the `hamburger` menu label

* The `hamburger` label is not showing properly in different browsers.
  Maybe that specific html unicode is not supported in all browsers. I
  used a trick to fix this issue using the pipe character `|` ;-)
  You could read about that here too:
  https://stackoverflow.com/a/61645811/6474744
* The `down-arrow` unicode also did not work as expected through some
  browsers. It was decided to remove this label totally. Maybe later
  we can adopt using `standard` unicode html characters that are
  `known` to be widely used across various browsers in different
  platforms.

1 files changed, 6 insertions, 1 deletions

diff --git a/css/base.css b/css/base.css
index cbb57bc..b612d5e 100644
--- a/css/base.css
+++ b/css/base.css
@@ -146,6 +146,12 @@ li > code {
 #nav-hamburger-wrapper label,
 #nav-hamburger-input {
     display: none;
+    transform: rotate(90deg);
+    transition-duration: 0.3s;
+}
+
+#nav-hamburger-wrapper input:checked + label {
+    transform: rotate(0);
 }
 
 /* Horizontal hamburger menu items. Keep the tabs in one line and don't
@@ -284,7 +290,6 @@ section {
         color: #fff;
         font-style: normal;
         font-size: 1.2em;
-        transition-duration: 0.2s;
     }
 
     /* Break down menu items into vertical */