diff options
Diffstat (limited to 'components/header.css')
| -rw-r--r-- | components/header.css | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/components/header.css b/components/header.css new file mode 100644 index 0000000..057ad90 --- /dev/null +++ b/components/header.css @@ -0,0 +1,123 @@ +header { + overflow: hidden; + position: fixed; + top: 2rem; + left: 0; + /* width: 75%; */ + /* width: 100%; */ + /* max-width: fit-content; */ + /* margin-left: 12.5%; */ + height: var(--topBarHeight); + /* justify-content: fit-content; */ + align-items: center; + text-align: center; + /* background: color(0, 0, 0, .1); */ + z-index: 1000; + /* background: rgba(0, 0, 0, 0.2); */ + background-color: #000; + border-radius: 32px; + transition: all 0.1s; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +.navBar a { + font-family: var(--font-jetbrains); + position: relative; + height: 100%; + text-align: center; + font-size: 2rem; + font-weight: 500; + text-transform: capitalize; + text-align: center; + text-decoration: none; + margin-left: 10mm; + margin-right: 10mm; + padding-top: 5mm; + /* padding-bottom: 3mm; */ + border-radius: 32px; + color: #F4E8C1; + transition: all .3s; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +.navBar .hleft a {float: left;} +.navBar .hright a {float: right;} + +.navBar a::after { + content: ''; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 1mm; + background: rgba(128, 128, 128, 0.2); + border-radius: 1mm; + transform: scaleX(0); + -webkit-transition: all 0.3s; + transition: all 0.3s; +} + +.navBar a:hover::after { + transform: scaleX(1.1); +} + +.navBar a:hover { + /* background: rgba(255, 255, 255, 0.2); */ + /* outline: ridge rgba(128, 128, 128, .6); */ + /* -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); */ + -webkit-transition: all 1s; + transition: all 1s +} + +.navBar a.active::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1mm; + background: rgba(128, 128, 128, .9); + border-radius: 1mm; + transform: scaleX(1); +} + +.navBar:active, +.navBar:hover, +header:hover, +#navBarHeader:hover +/* #navBarHeader:active */ +{ + transform: scale(1.005); + /* -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); */ + transition: all 0.5s +} + +header:active, +#navBarHeader:active, +.navBar:active { + transform: scale(1.05); + /* transition: transform 700ms; */ +} + +.navBar, +header, +#navBarHeader { + /* -webkit-backdrop-filter: blur(2.5px); + backdrop-filter: blur(2.5px); */ + transition: all 0.5s +} + +header.minimizedIsland { + opacity: 0; + scale: 0; + -webkit-animation-name: minimizeIsland; + animation-name: minimizeIsland; + animation-fill-mode: forwards; + transition: all 0.3s +}
\ No newline at end of file |