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

OCD

Browse Source
This commit is contained in:
Manos Katsomallos
2019-12-31 15:39:19 +02:00
parent cf2178e60b
commit b0dbcb8ff7
2 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
css/styles.css
View File

@ -40,8 +40,72 @@ h1, h2, h3, h4, h5, p {
text-transform: uppercase; text-transform: uppercase;
} }
#nav-mini {
position: fixed;
top: 0;
left: 5%;
outline: 0;
text-decoration: none;
z-index: 1;
}
#nav-mini .menu {
display: none;
box-shadow: 0 0 0.5em black;
background-color: black;
/* margin-left: 5%; */
}
#nav-mini .menu a { #nav-mini .menu a {
text-align: left; text-align: left;
padding: 1em 2em;
}
#nav-mini .menu .first {
padding-top: 1.5em;
}
#nav-mini .menu .last {
padding-bottom: 1.5em;
}
#nav-mini .menu a:hover {
color: gray;
}
#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;
cursor: pointer;
float: left;
margin-right: 0.5em;
}
/* #nav-ctrl:hover + label {
filter: invert(100%);
box-shadow: 0 0 0.5em white;
} */
#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: inline-block;
} }
#nav a:hover { #nav a:hover {
@ -306,58 +370,8 @@ h1, h2, h3, h4, h5, p {
display: none; display: none;
} }
#nav-mini .menu {
display: none;
box-shadow: 0 0 0.5em black;
background-color: black;
}
#nav-mini .menu a:hover {
color: gray;
}
#nav-mini { #nav-mini {
display: block; display: block;
position: fixed;
top: 0;
left: 5%;
outline: 0;
text-decoration: none;
z-index: 1;
}
#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:hover + label {
filter: invert(100%);
box-shadow: 0 0 0.5em white;
} */
#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: inline-block;
} }
/* About */ /* About */

8
index.html
View File

@ -23,15 +23,13 @@
</nav> </nav>
<nav id="nav-mini"> <nav id="nav-mini">
<input type="checkbox" id="nav-ctrl"/> <input type="checkbox" id="nav-ctrl"/>
<label for="nav-ctrl"> <label for="nav-ctrl"></label>
<!-- <img src="img/menu.svg"/> -->
</label>
<div class="menu"> <div class="menu">
<a href="#home">Home</a> <a href="#home" class="first">Home</a>
<a href="#about">About</a> <a href="#about">About</a>
<a href="#experience">Experience</a> <a href="#experience">Experience</a>
<a href="#education">Education</a> <a href="#education">Education</a>
<a href="#contact">Contact</a> <a href="#contact" class="last">Contact</a>
</div> </div>
</nav> </nav>
<div id="home"> <div id="home">