manos/WWW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile menu fix

Browse Source
This commit is contained in:
Manos Katsomallos
2019-12-31 14:22:03 +02:00
parent 70679271bc
commit 86df60bd98
3 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
css/styles.css
View File

@ -309,6 +309,7 @@ h1, h2, h3, h4, h5, p {
#nav-mini .menu { #nav-mini .menu {
display: none; display: none;
box-shadow: 0 0 0.5em black; box-shadow: 0 0 0.5em black;
background-color: black;
} }
#nav-mini .menu a:hover { #nav-mini .menu a:hover {
@ -316,7 +317,6 @@ h1, h2, h3, h4, h5, p {
} }
#nav-mini { #nav-mini {
background: black;
display: block; display: block;
position: fixed; position: fixed;
top: 0; top: 0;
@ -326,27 +326,38 @@ h1, h2, h3, h4, h5, p {
z-index: 1; z-index: 1;
} }
#nav-ctrl + label > img { #nav-ctrl + label {
width: 3em;
height: 3em;
background-color: white;
background-image: url("../img/menu.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
box-shadow: 0 0 0.5em black;
display: block;
cursor: pointer; cursor: pointer;
} }
#nav-ctrl:checked + label > img { #nav-ctrl:hover + label {
filter: invert(100%); filter: invert(100%);
box-shadow: 0 0 0.5em white; box-shadow: 0 0 0.5em white;
color: gray; }
#nav-ctrl:checked + label {
filter: invert(100%);
box-shadow: 0 0 0.5em white;
background-image: url("../img/close.svg");
background-size: 25%;
}
#nav-ctrl:checked:hover + label {
filter: invert(0%);
box-shadow: 0 0 0.5em black;
} }
#nav-ctrl:checked + label + .menu { #nav-ctrl:checked + label + .menu {
display: block; display: inline-block;
}
#nav-mini img {
display: block;
background-color: white;
height: 1.75em;
width: 1.75em;
padding: 0.5em;
box-shadow: 0 0 0.5em black;
} }
/* About */ /* About */

1
img/close.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 645 B

15
index.html
View File

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="title" content="Manos Katsomallos" /> <meta name="title" content="Manos Katsomallos" />
<meta name="description" content="Computer scientist, problem solver, son of his father and not his brother."> <meta name="description" content="Computer scientist, problem solver, son of his father and not his brother.">
@ -14,9 +13,7 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<title>Manos Katsomallos</title> <title>Manos Katsomallos</title>
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<a href="#home">Home</a> <a href="#home">Home</a>
<a href="#about">About</a> <a href="#about">About</a>
@ -24,11 +21,10 @@
<a href="#education">Education</a> <a href="#education">Education</a>
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</nav> </nav>
<nav id="nav-mini"> <nav id="nav-mini">
<input type="checkbox" id="nav-ctrl" checked="false"/> <input type="checkbox" id="nav-ctrl"/>
<label for="nav-ctrl"> <label for="nav-ctrl">
<img src="img/menu.svg"/> <!-- <img src="img/menu.svg"/> -->
</label> </label>
<div class="menu"> <div class="menu">
<a href="#home">Home</a> <a href="#home">Home</a>
@ -38,7 +34,6 @@
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</div> </div>
</nav> </nav>
<div id="home"> <div id="home">
<div class="content"> <div class="content">
<div class="title">Manos Katsomallos</div> <div class="title">Manos Katsomallos</div>
@ -60,7 +55,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="about"> <div id="about">
<div class="content"> <div class="content">
<div class="left"> <div class="left">
@ -82,7 +76,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="experience"> <div id="experience">
<div class="content"> <div class="content">
<div class="left"> <div class="left">
@ -141,7 +134,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="education"> <div id="education">
<div class="content"> <div class="content">
<div class="left"> <div class="left">
@ -191,7 +183,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="contact"> <div id="contact">
<div class="content"> <div class="content">
<h1 class="title">Contact</h1> <h1 class="title">Contact</h1>
@ -212,7 +203,6 @@
</a> </a>
</div> </div>
</div> </div>
<footer id="footer"> <footer id="footer">
<div class="social"> <div class="social">
<a href="mailto:manos@delkappa.com" target="_blank"><img src="img/email.svg"/></a> <a href="mailto:manos@delkappa.com" target="_blank"><img src="img/email.svg"/></a>
@ -231,6 +221,5 @@
</div> </div>
<div class="text">&copy; 2020 Manos Katsomallos</div> <div class="text">&copy; 2020 Manos Katsomallos</div>
</footer> </footer>
</body> </body>
</html> </html>