Team:Leiden/css/navbarfooter css

/* Navbar */ nav {

 position: fixed;
 position: -webkit-sticky;
 position: sticky;
 top: 18px;
 background: var(--main);
 height: 54px;
 font-size: 18px;
 -webkit-box-shadow: 0 2px 5px var(--main_darker);
 box-shadow: 0 2px 5px var(--main_darker);
 z-index: 1003;

}

nav>div>ul {

 float: right;
 display: inline-block;

}

nav>div>ul .hasdropdown {

 padding: 15px 30px;
 float: left;

}

nav>#LogoSmall {

 background: inherit;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 145px;
 border-bottom-right-radius: 70%;
 -webkit-box-shadow: 0 2px 5px var(--main);
 box-shadow: 0 2px 5px var(--main);
 z-index: 1002;

}

nav>#LogoSmall>a {

 display: inline-block;

}

nav img {

 height: 80px;
 width: auto;
 margin: 10px;
 z-index: 1004;
 position: relative;

}

.hasdropdown {

 position: relative;
 top: 100%

}

.dropdownContent {

 position: absolute;
 overflow: hidden;
 top: 100%;
 right: 0;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 min-width: 200px;
 max-width: 250px;
 font-size: 0.9em;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;

}

.dropdownContent li {

 text-align: right;
 display: none;
 background-color: var(--main);
 z-index: 1003;
 position: relative;

}

.dropdownContent a {

 padding: 10px 20px;
 display: block;

}

nav li:hover {

 background: var(--main_darker);

}

.hasNoDropdown {

 float: left;

}

.hasNoDropdown a {

 padding: 15px 30px;
 display: block;

}

.dropdownContentOpen li {

 display: block;
 overflow: visible;
 opacity: 0;
 -webkit-animation: dropdown 300ms forwards;
 animation: dropdown 300ms forwards;
 z-index: 1002;
 border-right: 1px solid var(--main_darker);
 border-left: 1px solid var(--main_darker);

}

.dropdownContentOpen li:last-of-type {

 border-bottom: 1px solid var(--main_darker);

}

.dropdownContentOpen li:nth-child(1) {

 -webkit-animation-delay: 0s;
 animation-delay: 0s;

}

.dropdownContentOpen li:nth-child(2) {

 -webkit-animation-delay: 50ms;
 animation-delay: 50ms;

}

.dropdownContentOpen li:nth-child(3) {

 -webkit-animation-delay: 100ms;
 animation-delay: 100ms;

}

.dropdownContentOpen li:nth-child(4) {

 -webkit-animation-delay: 150ms;
 animation-delay: 150ms;

}

.dropdownContentOpen li:nth-child(5) {

 -webkit-animation-delay: 200ms;
 animation-delay: 200ms;

}

.dropdownContentOpen li:nth-child(6) {

 -webkit-animation-delay: 250ms;
 animation-delay: 250ms;

}

.dropdownContentOpen li:nth-child(7) {

 -webkit-animation-delay: 300ms;
 animation-delay: 300ms;

}

@-webkit-keyframes dropdown {

 0% {
   opacity: 0;
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
 }

 100% {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes dropdown {

 0% {
   opacity: 0;
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
 }

 100% {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

1. openSideMenu, #closeSideMenu {

 position: absolute;
 right: 0;
 top: 0;
 font-size: 30px;
 padding: 12.2px 15px 12.2px;
 display: none;
 cursor: pointer;

}

1. closeSideMenu {

 color: var(--whiteish);
 top: 10px;
 right: 10px;

}

1. closeSideMenu i {

 padding: 10px 15px;

}

/* Sidenav */ div.mainContent {

 display: block;
 -webkit-transition: margin-right 0.5s;
 transition: margin-right 0.5s;

}

div#sidenav {

 position: fixed;
 top: 30vh;
 right: -200px;
 width: 250px;
 padding: 20px 0px;
 background: rgba(69, 105, 144, 1);
 color: var(--whiteish);
 border-radius: 10px 0 0 10px;
 z-index: 51;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 max-height: calc(100vh - 100px);
 /* overflow-y: hidden; */

}

div#sidenav .scrollable {

 /* overflow-x: visible; */
 overflow-y: auto;
 max-height: calc(100vh - 140px);
 /* border: 1px solid red; */

}

div#sidenav.farRight {

 right: -290px;

}

div#sidenav.revealed {

 -webkit-box-shadow: 0 0 70px 20px rgba(255, 255, 255, 0.9);
 box-shadow: 0 0 70px 20px rgba(255, 255, 255, 0.9);
 right: 0;

}

div#sidenav p {

 font-size: 5px;
 color: var(--accent1);
 -webkit-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 text-align: left;
 display: block;
 counter-increment: step-counter;
 list-style-position: inside;
 text-indent: -25px;
 cursor: pointer;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 padding: 5px 0px 5px 43px;

}

div#sidenav p:nth-child(-n+9) {

 padding: 5px 15px 5px 47px;

}

div#sidenav.revealed p {

 font-size: 15px;
 color: var(--whiteish);

}

div#sidenav.revealed p:nth-child(-n+9) {

 padding: 5px 15px 5px 64px;

}

div#sidenav.revealed p:nth-child(n+10) {

 padding: 5px 0px 5px 60px;

}

div#sidenav p::before {

 content: counter(step-counter);
 margin-right: 15px;
 font-size: 15px;
 color: var(--whiteish);

}

div#sidenav p:nth-child(-n+9)::before {

 margin-right: 20px

}

div#sidenav p::after {

 position: absolute;
 content: ;
 top: 0;
 left: 30px;
 height: 100%;
 width: 0px;
 background: var(--accent2);
 -webkit-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 display: block;

}

div#sidenav.revealed p:hover::after {

 width: 27px;

}

div#sidenav p.current {

 background: rgba(62, 94, 130, 1);

}

1. ClickToCollapseSidenav {

 position: absolute;
 top: 50%;
 left: -27px;
 width: 27px;
 height: 50px;
 background: var(--accent2);
 color: var(--accent1);
 z-index: 52;
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);
 -webkit-transform-origin: 100% 0%;
 transform-origin: 100% 0%;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 border-radius: 23px 0 0 23px;
 cursor: pointer;

}

1. ClickToCollapseSidenav i {

 font-size: 25px;
 position: absolute;
 top: 50%;
 left: 8px;
 -webkit-transform: translate(0, -50%);
 transform: translate(0, -50%);

}

1. sidenav.revealed #ClickToCollapseSidenav {

 -webkit-transform: translate(0, -50%) rotateY(180deg);
 transform: translate(0, -50%) rotateY(180deg);

}

/* Footer */ footer {

 background: var(--background);
 /* #C6C6C6; */
 padding: 30px 20px;
 min-height: -webkit-max-content;
 min-height: -moz-max-content;
 min-height: max-content;
 font-size: 14px;
 position: relative;
 z-index: 999;

}

footer>div {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;

}

footer #social_media, footer #contact {

 display: inline-block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 position: relative;
 margin: 30px;
 text-align: center;

}

footer h1 {

 padding-bottom: 25px;

}

footer i {

 font-size: 50px;
 padding: 5px;
 -webkit-transition: color 0.5s 0.1s;
 transition: color 0.5s 0.1s;

}

footer #social_media a {

 display: inline-block;

}

1. facebook:hover {

 color: #3B5998;

}

1. twitter:hover {

 color: #1da1f2;

}

1. linkedin:hover {

 color: #0077B5;

}

1. instagram:hover {

 color: #8a3ab9;

}

1. mail:hover {

 color: #7cbb00;

}

/* get navbar in two rows */ @media (max-width: 1015px) {

 nav {
   height: 108px;
   padding-left: 145px;
 }
 nav .container {
   width:90%;
   margin-right:25px;
 }

}

/* get navbar in hamburger menu */ @media (max-width: 768px) {

 nav .container {
   width:80%;
   margin-right:auto;
 }
 nav {
   height: 54px;
   padding-left: 0px;
 }

 .dropdownContentOpen li {
   border-right: none;
   border-left: none;
 }

 .dropdownContentOpen li:last-of-type {
   border-bottom: none;
 }

 #openSideMenu {
   display: block;
   color: var(--blackish);
 }

 #sideBar {
   color: var(--whiteish);
   max-width: 300px;
   height: 100%;
   position: fixed;
   top: 0;
   right: 0px;
   background: var(--blackish);
   opacity: 0.9;
   padding-top: 100px;
   display: none;
   z-index: 1050;
 }

 nav>div>ul {
   float: left;
   padding-left: 20px;
   width: 100%;
 }

 nav>div>ul .hasdropdown {
   padding: 15px 30px;
   margin: auto;
   min-width: 200px;
 }

 .hasNoDropdown {
   width: 200px;
 }

 .hasNoDropdown a {
   padding: 15px 30px;
   display: block;
 }

 .dropdownContentOpen {
   -webkit-animation: none;
   animation: none;
 }

 .dropdownContent {
   position: relative;
   top: 5px;
   max-width: 250px;
 }

 .dropdownContent li {
   text-align: left;
   background-color: var(--blackish);
 }

 .dropdownContent a {
   padding: 10px 10px 10px 15px;
   max-width: 210px;
 }

 nav li:hover {
   background: var(--blackish);
   color: white;
   font-size: 110%;
 }

 #ClickToCollapseSidenav, #sidenav {
   display: none
 }

 footer>div {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }

}