core: added home page

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