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
Show Stats 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 {
display: none;
box-shadow: 0 0 0.5em black;
background-color: black;
}
#nav-mini .menu a:hover {
@ -316,7 +317,6 @@ h1, h2, h3, h4, h5, p {
}
#nav-mini {
background: black;
display: block;
position: fixed;
top: 0;
@ -326,27 +326,38 @@ h1, h2, h3, h4, h5, p {
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;
}
#nav-ctrl:checked + label > img {
#nav-ctrl:hover + label {
filter: invert(100%);
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 {
display: 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;
display: inline-block;
}
/* 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>
<html>
<head>
<meta name="title" content="Manos Katsomallos" />
<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">
<title>Manos Katsomallos</title>
</head>
<body>
<nav id="nav">
<a href="#home">Home</a>
<a href="#about">About</a>
@ -24,11 +21,10 @@
<a href="#education">Education</a>
<a href="#contact">Contact</a>
</nav>
<nav id="nav-mini">
<input type="checkbox" id="nav-ctrl" checked="false"/>
<input type="checkbox" id="nav-ctrl"/>
<label for="nav-ctrl">
<img src="img/menu.svg"/>
<!-- <img src="img/menu.svg"/> -->
</label>
<div class="menu">
<a href="#home">Home</a>
@ -38,7 +34,6 @@
<a href="#contact">Contact</a>
</div>
</nav>
<div id="home">
<div class="content">
<div class="title">Manos Katsomallos</div>
@ -60,7 +55,6 @@
</div>
</div>
</div>
<div id="about">
<div class="content">
<div class="left">
@ -82,7 +76,6 @@
</div>
</div>
</div>
<div id="experience">
<div class="content">
<div class="left">
@ -141,7 +134,6 @@
</div>
</div>
</div>
<div id="education">
<div class="content">
<div class="left">
@ -191,7 +183,6 @@
</div>
</div>
</div>
<div id="contact">
<div class="content">
<h1 class="title">Contact</h1>
@ -212,7 +203,6 @@
</a>
</div>
</div>
<footer id="footer">
<div class="social">
<a href="mailto:manos@delkappa.com" target="_blank"><img src="img/email.svg"/></a>
@ -231,6 +221,5 @@
</div>
<div class="text">&copy; 2020 Manos Katsomallos</div>
</footer>
</body>
</html>