Difference between revisions of "Team:Leiden/test/css/style css"

Line 102: Line 102:
 
   position: -webkit-sticky;
 
   position: -webkit-sticky;
 
   position: sticky;
 
   position: sticky;
−
   top: 0;
+
   top: 16px;
 
   background: var(--accent-green-1);
 
   background: var(--accent-green-1);
 
   height: 53px;
 
   height: 53px;

Revision as of 13:20, 7 April 2018

root {
 --ULblue: #000066;
 --whiteish: #F7F7F7;
 --blackish: #111;
 --accent-green-1: #86CB92;
 --accent-green-2: #71B48D;
 --accent-purple-1: #404E7C;
 --accent-blue-1: #05668D;
 --accent-blue-2: #028090;

}

/* Global */

  1. top_title {
 display: none;

}

  1. content {
 width: 100%;
 padding: 0;
 margin: 0;
 line-height: normal;
 position: absolute;
 top: 9px;

}

li, ul { 

 margin: 0;
 line-height: normal;
 list-style-type: none;
 list-style-image: none;
 display: block;

}

  • {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;

}

body { 

 background-color: var(--whiteish);
 color: var(--blackish);
 font-size: 16px;

}

.container { 

 width: 80%;
 margin: auto;

}

a { 

 color: inherit;

}

/* Header */

header { 

 background: -webkit-gradient(linear, left top, right bottom, from(#654789), color-stop(#414B8C), color-stop(#68B13E), color-stop(#EDE630), color-stop(#F07E34), to(#E63B33));
 background: linear-gradient(to bottom right, #654789, #414B8C, #68B13E, #EDE630, #F07E34, #E63B33);
 height: 75vh;
 position: relative;
 background-attachment: fixed;

}

.overlay { 

 position: absolute;
 height: 100%;
 width: 100%;
 background: rgba(255, 255, 255, 0.2);

}

.logo { 

 position: absolute;
 background: url('../img/logo_v2.0.png');
 height: 50%;
 max-height: 300px;
 width: 100%;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 bottom: 30%;

}

.title { 

 height: 100px;
 width: calc(100% - 30px);
 margin: auto 15px;
 background: url('../img/InsertTitle.png');
 background-position: center;
 background-repeat: no-repeat;
 background-size: contain;
 position: absolute;
 bottom: 10%;

}

/* Navbar */

nav { 

 position: -webkit-sticky;
 position: sticky;
 top: 16px;
 background: var(--accent-green-1);
 height: 53px;
 font-size: 20px;
 -webkit-box-shadow: 0 2px 5px var(--accent-green-2);
 box-shadow: 0 2px 5px var(--accent-green-2);

}

nav>div>ul { 

 float: right;
 display: inline-block;

}

nav>div>ul .hasdropdown { 

 padding: 15px 30px;
 float: left;

}

.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;
 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(--accent-green-1);

}

.dropdownContent a { 

 padding: 10px 20px;
 display: block;

}

nav li:hover { 

 background: var(--accent-green-2);

}

.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;

}

.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;

}

@-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: 29px;
 padding: 11px 15px 8px;
 display: none;
 cursor: pointer;

}

  1. closeSideMenu {
 color: var(--whiteish);
 top: 10px;
 right: 10px;

}

  1. closeSideMenu i {
 padding: 10px 15px;

}

/* Responsiveness */

@media (max-width: 700px) { 

 .container {
   width: 100%;
 }

}

@media (max-width: 600px) { 

 #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;
 }
 nav>div>ul {
   float: left;
   padding-left: 20px;
   width: 100%;
 }
 nav>div>ul .hasdropdown {
   padding: 15px 30px;
   float: none;
   margin: auto;
 }
 .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%;
 }

}

/* Main body - Section */

section { 

 padding: 10px;

}