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 {
width: 40px;
height: 40px; }
body div.page-contents nav > a > img.open-menu-icon {
body div.page-contents nav > a.menu-expand > img {
width: 30px;
height: 30px;
padding-top: 15px; }
@ -154,6 +154,12 @@ body {
color: blueviolet; }
body div.page-contents nav a.menu-expand {
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 {
position: fixed;
display: flex;
@ -162,9 +168,9 @@ body {
height: 60px; }
body div.page-contents nav.mobile-shortcuts a {
height: 100%;
width: 16.6666666667%; }
width: 16.66667%; }
body div.page-contents nav.mobile-shortcuts div {
width: 66.6666666667%; }
width: 66.66667%; }
body div.page-contents nav.mobile-foldable {
display: none;
background: blueviolet;
@ -214,3 +220,4 @@ body {
body div.page-contents div.description div.articles a {
width: 45%;
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;
height: 30px;
padding-top: 15px;
@ -202,6 +202,17 @@ body {
}
a.menu-expand {
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">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
<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 class="mobile-foldable" id="mobile-foldable"><%
my $first = 1;