diff --git a/hp_assets/css/main.css b/hp_assets/css/main.css index 65d1779..46c640a 100644 --- a/hp_assets/css/main.css +++ b/hp_assets/css/main.css @@ -6,19 +6,18 @@ body {font-family: sans-serif; background: url("../img/sayagata-400px.png") repe #bg-overlay { position:fixed; - padding:0; - margin:0; - top:0; - left:0; - width: 100%; - height: 100%; + padding:0; + margin:0; + top:0; + left:0; + width: 100%; + height: 100%; background-color: #fff; opacity: 0; z-index: 2; transition: .3s all; } - body.menu-shown #bg-overlay {opacity: 0.3;} #mobile-menu-wrap {z-index: 3; position: absolute; top: 15px; left: 15px;} @@ -27,27 +26,26 @@ body.menu-shown #bg-overlay {opacity: 0.3;} .bg {border-radius: 5px; background-color: rgba(0, 0, 0, .5); padding: 20px;} .bg a {color: #fff;} -#links-wrap {font-size: 80px; - position: fixed; - left: 50%; - top: 50%; +#links-wrap { + font-size: 80px; - transform: translate(-50%, -50%); - - /* - Not even necessary really. - e.g. Height could be left out! - */ - width: -moz-fit-content; - width: -webkit-fit-content; - - - max-width: 80%; - max-height: 90%; - overflow: auto; - display: flex; - + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + width: -moz-fit-content; + width: -webkit-fit-content; + height: -moz-fit-content; + height: -webkit-fit-content; + + max-width: 90%; + max-height: 90%; + + overflow: auto; + display: flex; } + #links-wrap a {transition: .3s all;} #links-wrap a:hover {color: #d3d3d3;} #links-wrap .link {display: inline-block; width: 33%; float: left; text-align: center;}