sergiotarxz
/
owlcode.tech
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Replacing the menu icon for something hopefully better.

This commit is contained in:
sergiotarxz 2023-05-01 05:40:29 +02:00
parent aab26a0f83
commit 1eb3dc87e9
5 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/styles.css
View File

@ -118,7 +118,7 @@ body {
body div.page-contents div.description a.suscribe-category-rss img { body div.page-contents div.description a.suscribe-category-rss img {
width: 40px; width: 40px;
height: 40px; } height: 40px; }
body div.page-contents nav > a > img.open-menu-icon { body div.page-contents nav > a.menu-expand > img {
width: 30px; width: 30px;
height: 30px; height: 30px;
padding-top: 15px; } padding-top: 15px; }
@ -154,6 +154,12 @@ body {
color: blueviolet; } color: blueviolet; }
body div.page-contents nav a.menu-expand { body div.page-contents nav a.menu-expand {
padding-bottom: 9px; } padding-bottom: 9px; }
body div.page-contents nav a.menu-expand .open-menu-icon-hover {
display: none; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover {
display: block; }
body div.page-contents nav a.menu-expand:hover .open-menu-icon {
display: none; }
body div.page-contents nav.mobile-shortcuts { body div.page-contents nav.mobile-shortcuts {
position: fixed; position: fixed;
display: flex; display: flex;
@ -162,9 +168,9 @@ body {
height: 60px; } height: 60px; }
body div.page-contents nav.mobile-shortcuts a { body div.page-contents nav.mobile-shortcuts a {
height: 100%; height: 100%;
width: 16.6666666667%; } width: 16.66667%; }
body div.page-contents nav.mobile-shortcuts div { body div.page-contents nav.mobile-shortcuts div {
width: 66.6666666667%; } width: 66.66667%; }
body div.page-contents nav.mobile-foldable { body div.page-contents nav.mobile-foldable {
display: none; display: none;
background: blueviolet; background: blueviolet;
@ -214,3 +220,4 @@ body {
body div.page-contents div.description div.articles a { body div.page-contents div.description div.articles a {
width: 45%; width: 45%;
margin-left: 5%; } } margin-left: 5%; } }

13
public/css/styles.scss
View File

@ -158,7 +158,7 @@ body {
} }
} }
} }
nav > a > img.open-menu-icon { nav > a.menu-expand > img {
width: 30px; width: 30px;
height: 30px; height: 30px;
padding-top: 15px; padding-top: 15px;
@ -202,6 +202,17 @@ body {
} }
a.menu-expand { a.menu-expand {
padding-bottom: 9px; padding-bottom: 9px;
.open-menu-icon-hover {
display: none;
}
&:hover {
.open-menu-icon-hover {
display: block;
}
.open-menu-icon {
display: none;
}
}
} }
} }

BIN
public/img/hamburger-menu-purple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/img/hamburger-menu-yellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

5
templates/layouts/default.html.ep
View File

@ -31,7 +31,10 @@
<nav class="mobile-shortcuts"> <nav class="mobile-shortcuts">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a> <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
<div></div> <div></div>
<a href="#mobile-foldable" class="menu-expand"><img class="open-menu-icon" src="/img/menu.png" alt="Expandir el menú."/></a> <a href="#mobile-foldable" class="menu-expand">
<img class="open-menu-icon" src="img/hamburger-menu-yellow.png" alt="Expandir el menú."/>
<img class="open-menu-icon-hover" src="img/hamburger-menu-purple.png" alt="Expandir el menú."/>
</a>
</nav> </nav>
<nav class="mobile-foldable" id="mobile-foldable"><% <nav class="mobile-foldable" id="mobile-foldable"><%
my $first = 1; my $first = 1;