diff options
| author | Pedram Ashofteh Ardakani <pedramardakani@pm.me> | 2020-05-07 02:05:06 +0430 |
|---|---|---|
| committer | Pedram Ashofteh Ardakani <pedramardakani@pm.me> | 2020-05-07 02:07:17 +0430 |
| commit | e03ae32b59b5a6050912dfec173a584b84f946f2 (patch) | |
| tree | afcea68a61ef8425f5cde79db3f0b42f798d743a | |
| parent | f9aa40e0d79237ed2dd547340e3c221a35264e0a (diff) | |
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.
| -rw-r--r-- | about.html | 2 | ||||
| -rw-r--r-- | css/base.css | 7 | ||||
| -rwxr-xr-x | index.html | 4 | ||||
| -rw-r--r-- | tutorial.html | 2 |
4 files changed, 10 insertions, 5 deletions
@@ -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 */ @@ -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> |