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
Show Stats 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;
}
#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 {
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 {
@ -306,58 +370,8 @@ h1, h2, h3, h4, h5, p {
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 {
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 */

8
index.html
View File

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