diff --git a/css/styles.css b/css/styles.css index 39c0e09..ee9dddf 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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 */ diff --git a/index.html b/index.html index 30c9415..6a1785a 100644 --- a/index.html +++ b/index.html @@ -23,15 +23,13 @@