diff --git a/css/styles.css b/css/styles.css
index b203be1..84f77c2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -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 */
diff --git a/img/close.svg b/img/close.svg
new file mode 100644
index 0000000..8144622
--- /dev/null
+++ b/img/close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 18fdc12..30c9415 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,5 @@
-
@@ -14,9 +13,7 @@
Manos Katsomallos
-
-
-
-
Manos Katsomallos
@@ -60,7 +55,6 @@
-
-
-
-
-
-