From e03ae32b59b5a6050912dfec173a584b84f946f2 Mon Sep 17 00:00:00 2001
From: Pedram Ashofteh Ardakani <pedramardakani@pm.me>
Date: Thu, 7 May 2020 02:05:06 +0430
Subject: 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.
---
about.html | 2 +-
css/base.css | 7 ++++++-
index.html | 4 ++--
tutorial.html | 2 +-
4 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/about.html b/about.html
index 3747068..7f4b4f4 100644
--- a/about.html
+++ b/about.html
@@ -55,7 +55,7 @@
<div id="nav-hamburger-items" class="button">
<a href="index.html">Home</a>
<a href="about.html">About</a>
- <a href="http://git.maneage.org/project.git/">⤓ Git</a>
+ <a href="http://git.maneage.org/project.git/">Git</a>
<a href="tutorial.html">Tutorial</a>
</div>
</nav>
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 */
diff --git a/index.html b/index.html
index 7f6d784..ac98f41 100755
--- a/index.html
+++ b/index.html
@@ -51,12 +51,12 @@
<header role="banner">
<!-- global navigation -->
<nav role="navigation" id="nav-hamburger-wrapper">
- <label for="nav-hamburger-input">☰</label>
<input type="checkbox" id="nav-hamburger-input"/>
+ <label for="nav-hamburger-input">|||</label>
<div id="nav-hamburger-items" class="button">
<a href="index.html">Home</a>
<a href="about.html">About</a>
- <a href="http://git.maneage.org/project.git/">⤓ Git</a>
+ <a href="http://git.maneage.org/project.git/">Git</a>
<a href="tutorial.html">Tutorial</a>
</div>
</nav>
diff --git a/tutorial.html b/tutorial.html
index dedd33a..0432507 100644
--- a/tutorial.html
+++ b/tutorial.html
@@ -55,7 +55,7 @@
<div id="nav-hamburger-items" class="button">
<a href="index.html">Home</a>
<a href="about.html">About</a>
- <a href="http://git.maneage.org/project.git/">⤓ Git</a>
+ <a href="http://git.maneage.org/project.git/">Git</a>
<a href="tutorial.html">Tutorial</a>
</div>
</nav>
--
cgit v1.2.1