Upload website

dist/css/nav.css

@@ -0,0 +1,290 @@
+nav {
+    width: 100vw;
+    height: 15vh;
+}
+
+.nav-placeholder {
+    height: 15vh;
+}
+
+.nav-menu .logo-wrapper {
+    display: none;
+    height: 90%;
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.nav-menu .logo {
+    height: 100%;
+}
+
+.nav-top-bar .logo-wrapper:hover {
+    transform: unset;
+}
+
+nav a {
+    /* TODO: Update colours */
+    color: var(--color-text-primary);
+    text-decoration: none;
+    transform: scale(1);
+    transition: transform 0.75s;
+}
+
+nav a:hover {
+    transform: scale(1.1);
+}
+
+.nav-link-wrapper {
+    margin-bottom: 30px;
+}
+
+.nav-link-dropdown a {
+    font-size: 1.1rem;
+}
+
+.nav-icon {
+    font-size: 2rem;
+}
+
+.nav-menu {
+    position: fixed;
+    left: -100vw;
+    top: 15vh;
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    padding-left: 2.5vw;
+    padding-right: 2.5vw;
+    height: 80vh;
+    width: 95vw;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    background-color: var(--color-background-accent);
+    transition: left 0.5s, top 0.5s;
+}
+
+.nav-top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 15vh;
+    background-color: var(--color-background-accent);
+    display: flex;
+    align-items: center;
+    z-index: 100;
+    border-bottom: black 1px solid;
+    transition: top 0.5s;
+}
+
+.nav-top-bar.slide-up {
+    top: -20vh;
+}
+
+.nav-top-bar .logo {
+    height: 100%;
+}
+
+.nav-top-bar .logo-wrapper {
+    display: unset;
+    height: 90%;
+    border-radius: 20px;
+    margin-left: 20px;
+    overflow: hidden;
+}
+
+.nav-menu.active {
+    left: 0;
+}
+
+.nav-link-header {
+    font-size: 1.2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s;
+}
+
+.nav-link-dropdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+
+/* Nav-Toggle button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+.nav-toggle {
+    margin-left: auto;
+    margin-right: 20px;
+    text-decoration: none;
+    color: var(--color-text-primary);
+    font-size: 5vh;
+    cursor: pointer;
+    width: 35px;
+    height: 25px;
+    z-index: 1;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-text-primary);
+}
+
+#line1 {
+    transform-origin: 0% 0%;
+    transition: transform 0.4s ease-in-out;
+}
+
+#line2 {
+    transition: transform 0.2s ease-in-out;
+}
+
+#line3 {
+    transform-origin: 0% 100%;
+    transition: transform 0.4s ease-in-out;
+}
+
+.nav-toggle.active #line1 {
+    transform: rotate(45deg) scaleX(0.95);
+}
+
+.nav-toggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.nav-toggle.active #line3 {
+    transform: rotate(-45deg) scaleX(0.95);
+}
+
+
+@media only screen and (min-width: 900px) {
+    nav {
+        height: 20vh;
+    }
+
+    nav a:hover {
+        transform: unset;
+    }
+
+    .nav-placeholder {
+        height: 20vh;
+    }
+
+    .nav-menu .logo-wrapper {
+        display: unset;
+    }
+
+    .nav-top-bar {
+        display: none;
+    }
+
+    .nav-menu {
+        padding: 0;
+        height: 20vh;
+        width: 100vw;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        top: 0;
+        left: 0;
+        border-bottom: var(--color-text-primary) 1px solid;
+    }
+
+    .nav-menu.slide-up {
+        top: -20vh;
+    }
+
+    .nav-link-dropdown {
+        transform: scaleY(0);
+        align-items: unset;
+        justify-content: unset;
+        position: absolute;
+        top: 100%;
+        min-width: 175px;
+        width: max-content;
+        transform-origin: top;
+        transition: transform 0.5s;
+        background-color: var(--color-background-primary);
+        border-radius: 10px;
+        padding: 15px;
+        z-index: 2;
+    }
+
+    .nav-link-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+        position: relative;
+        margin-left: 3%;
+        margin-right: 3%;
+        margin-bottom: unset;
+    }
+
+    .nav-link-header {
+        flex-direction: column;
+        min-width: 100px;
+        padding: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        position: relative;
+        z-index: 3;
+    }
+
+    .nav-link-header::before,
+    .nav-link-header::after {
+        opacity: 0;
+        border: var(--color-background-primary) 15px solid;
+        border-top-color: transparent;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        content: " ";
+        z-index: -1;
+        transition: opacity 0.4s;
+        bottom: -15px;
+    }
+
+    .nav-link-header::before {
+        border-left-color: transparent;
+        border-bottom-right-radius: 30px;
+        right: calc(100% - 15px);
+    }
+
+    .nav-link-header::after {
+        border-right-color: transparent;
+        border-bottom-left-radius: 30px;
+        left: calc(100% - 15px);
+    }
+
+    .nav-link-dropdown a:hover {
+        text-decoration: underline;
+    }
+
+    .nav-link-wrapper:hover .nav-link-header {
+        background-color: var(--color-background-primary);
+    }
+
+    .nav-link-wrapper:hover .nav-link-dropdown {
+        transform: scaleY(1);
+    }
+
+    .nav-link-wrapper:hover .nav-link-header::before,
+    .nav-link-wrapper:hover .nav-link-header::after {
+        transition-delay: 0.1s;
+        opacity: 1;
+    }
+
+    .nav-toggle {
+        display: none;
+    }
+}