From 11da12783624e5b72a23bf30ce211b1a34202d87 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Wed, 10 Jan 2024 11:01:59 +0800 Subject: updated header, made index page unscrollable since no need + the blob will made it scroll --- src/css/index.css | 4 +++- src/css/style.css | 33 +++++++++++++++++++++------------ 2 files changed, 24 insertions(+), 13 deletions(-) (limited to 'src/css') diff --git a/src/css/index.css b/src/css/index.css index 633ac01a..09dbb508 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -6,7 +6,8 @@ width: 100%; top: 0; left: 0; - overflow-x: hidden; + overflow: hidden; + position: fixed; -ms-overflow-style: none; scrollbar-width: none; z-index: -6; @@ -15,6 +16,7 @@ display: none; } + /* main info window ======================================= */ .indexPage { overflow: hidden; diff --git a/src/css/style.css b/src/css/style.css index 3e6ab521..5d277551 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,5 +1,5 @@ :root { - --topBarHeight: 3em; + --topBarHeight: 5em; --neon-bg-color: #05010d } @@ -327,31 +327,37 @@ body::-webkit-scrollbar { header { position: fixed; - top: 0; + top: 2rem; left: 0; - width: 100%; - height: 3em; + width: 75%; + margin-left: 12.5%; + height: var(--topBarHeight); justify-content: space-between; align-items: center; + text-align: center; /* background: color(0, 0, 0, .1); */ z-index: 1000; - background: rgba(0, 0, 0, 0.2); + /* background: rgba(0, 0, 0, 0.2); */ + background-color: #000; + border-radius: 32px; transition: all 0.3s; } .navBar a { position: relative; height: 100%; - font-size: 5mm; + text-align: center; + font-size: 2rem; text-transform: capitalize; text-align: center; text-decoration: none; - margin-left: 5mm; - margin-right: 5mm; - padding-top: 3mm; - padding-bottom: 3mm; - border-radius: 8px; + margin-left: 10mm; + margin-right: 10mm; + padding-top: 5mm; + /* padding-bottom: 3mm; */ + border-radius: 32px; color: #F4E8C1; + transition: all .3s } .navBar .hleft a {float: left;} @@ -449,13 +455,16 @@ a:hover { text-underline-offset: 1px; position: relative; height: 100%; - font-size: 5mm; + /* font-size: 5mm; */ text-transform: capitalize; text-align: center; + /* start */ margin-left: 5mm; margin-right: 5mm; padding-top: 3mm; padding-bottom: 3mm; + /* end + these lines will make it more appearence and jigully when hovered */ font-weight: bold; -webkit-transition: all .5s; transition: all .5s; -- cgit v1.2.3