move(styles): moved all css into a new dir - styles

1 files changed, 133 insertions, 0 deletions

diff --git a/components/styles/header.css b/components/styles/header.css
new file mode 100644
index 0000000..845168a
--- /dev/null
+++ b/components/styles/header.css
@@ -0,0 +1,133 @@
+header {
+    overflow: hidden;
+    position: fixed;
+    top: 2rem;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%; /* Adjust width as needed */
+    height: var(--topBarHeight);
+    align-items: center;
+    text-align: center;
+    z-index: 1000;
+    background-color: #000;
+    border-radius: 32px;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+.navBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.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;}
+
+.hleft, .hright {
+    display: flex;
+}
+
+.hright {
+    gap: 1rem; /* Adjust the gap between links as needed */
+}
+
+.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.01);
+    /* 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