init

css/tools/nav.css

@@ -0,0 +1,173 @@
+nav{
+    background-color: #0f0f10;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    z-index: 999;
+}
+nav a{
+    color: white;
+    text-decoration: none;
+}
+.nav-logo{
+    position: relative;
+    height: fit-content;
+
+    width: 100%;
+}
+.nav-logo img{
+    margin: 1em;
+    height: 2.5em;
+}
+.mobile-nav .nav-logo button{
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    border: 0;
+    color: white;
+    height: auto;
+    width: 1.6em;
+    background-color: #edbf63;
+    font-size: 3em;
+}
+.mobile-nav .nav-links{
+    -webkit-transition: max-height 1s, color 1s ease; 
+    -moz-transition: max-height 1s, color 1s ease; 
+    -ms-transition: max-height 1s, color 1s ease; 
+    -o-transition: max-height 1s, color 1s ease; 
+    transition: max-height 1s, color 1s ease;
+    overflow: hidden;
+
+    max-height: 0;
+}
+.mobile-nav .nav-links-expanded{
+    max-height: 100em;
+}
+.mobile-nav .nav-items{
+    display: block;
+    height: 3em;
+    text-align: center;
+
+    line-height: 3em;
+
+    font-size: 2em;
+
+    border-color: white;
+    border-style: solid;
+    border-top-width: 0.05em;
+}
+.mobile-nav .nav-items:hover{
+    background-color: #c9ab5f;
+    max-height: 20em;
+}
+/*#drop-act:hover{
+    color: black;
+}*/
+
+.mobile-nav .dropdown-content{
+    width: 100%;
+    margin-right: auto;
+
+    -webkit-transition: max-height 1s; 
+    -moz-transition: max-height 1s; 
+    -ms-transition: max-height 1s; 
+    -o-transition: max-height 1s; 
+    transition: max-height 1s;  
+    overflow: hidden;
+    max-height: 0;
+
+    background-color: #847546;
+
+    /*border-color: white;
+    border-style: solid;
+    border-right-width: 0.2em;*/
+}
+.mobile-nav .dropdown-active{
+    max-height: 40em;
+}
+
+
+
+
+
+
+
+.desktop-nav{
+    display: flex;
+    flex-direction: row;
+}
+
+.desktop-nav .nav-logo{
+    width: min-content;
+}
+
+.desktop-nav-second-section{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 100%;
+}
+
+.desktop-nav .dropdown-content{
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    -ms-transition: max-height 1s;
+    -o-transition: max-height 1s;
+    transition: max-height 1s;
+
+    max-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    
+    z-index: 5;
+    background-color: black;
+    border-bottom-right-radius: 0.5em;
+    border-bottom-left-radius: 0.5em;
+    margin-top: 1.45em;
+    margin-left: -2em;
+}
+
+.desktop-nav .dropdown:hover .dropdown-content{
+    max-height: 20em;
+}
+.desktop-nav .dropdown .dropdown-content .nav-items{
+    padding: 1em;
+}
+
+.nav-items{
+    -webkit-transition: color 0.5s ease; 
+    -moz-transition: color 0.5s ease; 
+    -ms-transition: color 0.5s ease; 
+    -o-transition: color 0.5s ease; 
+    transition: color 0.5s ease;
+}
+.nav-items:hover{
+    color: #edbf63;
+}
+
+.dropdown{
+    z-index: 99;
+}
+
+
+@media screen and (min-width: 1000px){
+    .mobile-nav{
+        display: none;
+    }
+    .nav-logo img {
+        margin: 1em;
+        height: 1.8em;
+    }
+}
+@media screen and (max-width: 1000px){
+    .desktop-nav{
+        display: none;
+    }
+    
+}