Difference between revisions of "Template:Rotterdam HR/css/main"

Revision as of 14:37, 17 October 2018 (view source) Rensb (Talk | contribs) ← Older edit		Revision as of 16:56, 17 October 2018 (view source) Meijug (Talk | contribs) Newer edit →
Line 28:		Line 28:
	.page-wikistat { background: var(--color-software-secondary) !important; }		.page-wikistat { background: var(--color-software-secondary) !important; }
	.page-hardware,		.page-hardware,
−	.page-peristalticpump,	+	.page-peristaltic-pump,
−	.page-testtubeshaker,	+	.page-test-tube-shaker,
−	.page-temperaturecontroller { background: var(--color-hardware-secondary) !important; }	+	.page-temperature-controller { background: var(--color-hardware-secondary) !important; }
	/* ----- iGEM STYLE FIXES ----- */		/* ----- iGEM STYLE FIXES ----- */

---

Revision as of 16:56, 17 October 2018

/* ----- color palet ----- */

root {

 --color-primary: #1B5E20;
 --color-secondary: #C8E6C9;
 --color-dark: rgb(50, 50, 50);
 --color-red: #E57373;

 --color-wetlab: #1B5E20;
 --color-hardware: #3949AB;
 --color-hardware-secondary: #C5CAE9;
 --color-software: #424242;
 --color-software-secondary: #a1a1a1;

}

/* ------ PAGE ------ */ .page > .title {

 color: white;
 background: var(--color-primary);
 padding: 10px 20px;
 margin: auto;
 text-align: center;
 font-size: 46px;

}

.page { background: var(--color-secondary); } .page-software, .page-wikistat { background: var(--color-software-secondary) !important; } .page-hardware, .page-peristaltic-pump, .page-test-tube-shaker, .page-temperature-controller { background: var(--color-hardware-secondary) !important; }

/* ----- iGEM STYLE FIXES ----- */

1. globalWrapper {

 padding: 0 !important;

}

ul { list-style-image: none; }

1. content {

width: 100%; margin: 0; padding: 0; background: none; }

1. bodyContent a[href ^="https://"], .link-https {

 padding: 5px 0;

}

1. HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{

font-family: candara; line-height: initial; }

1. bodyContent h3, #bodyContent h4, #bodyContent h5 {

margin-bottom: 0; padding: 0 5px; line-height: 1.1em; }

1. top_title, #top_menu_under {

display: none; }

1. top_menu_14 {

position: initial; }

1. top_menu_inside #user_item {

margin-right: 0; float: none; }

1. top_menu_inside {

margin: 0 auto; width: 90%; }

1. mw-content-text > p {

 margin: 0 !important;

}

body { font-family: candara; background: white;

 font-size: 13px;

}

/* ----- NAVBAR ----- */ .menu { display: flex; }

.menu, .sub-menu {

 margin: 0;
 padding: 0;
 list-style: none;
 box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);

}

.menu .main-item {

 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 flex: 1;
 height: 44px;
 padding: 5px;
 text-align: center;
 text-decoration: none;
 color: white;
 background: var(--color-dark);

fill: currentColor; z-index: 1; }

.menu .main-item::before {

 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: currentColor;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.menu .home-button {

 width: 200px;
 position: relative;

}

.menu .home-button a {

 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: -80px;
 border-radius: 0 0 50% 50%;
 background: var(--color-dark);

}

.sub-menu {

 position: absolute;
 top: 54px;
 left: 0;
 right: 0;
 transform: scale(1, 0);
 transform-origin: top;
 transition: transform 250ms;

}

.sub-menu .sub-item {

 padding: 10px 5px;
 border-top: rgba(255, 255, 255, 0.25) solid 2px;
 color: var(--color-dark);

transition: color 200ms; min-width: 96px; max-height: fit-content; }

.menu .construction::after {

 content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
 position: absolute;
 top: 5px;
 left: 0;
 right: 0;
 bottom: 5px;
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 12px;
 color: orange;
 background: var(--color-dark);
 transform: scale(1, 0);
 transform-origin: bottom;
 transition: transform 250ms;

}

.menu .main-item:hover::before {

 transform: scale(1, 1);

}

.menu .construction:hover::after {

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu {

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu .sub-item {

 color: white;
 transition: color 200ms 100ms;

}

1. menuToggle a {

 text-decoration: none;
 color: white;
 transition: color 0.3s ease;

}

1. menuToggle a:hover {

 color: gray;

}

1. menuToggle {

 display: none;
 position: relative;
 top: -35px;

left: 20px; width: 50px;

 z-index: 1;
 -webkit-user-select: none;
 user-select: none;

}

1. menuToggle input {

 display: block;
 width: 40px;
 height: 32px;
 position: absolute;
 top: -7px;
 left: -5px;
 
 cursor: pointer;
 
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
 
 -webkit-touch-callout: none;

}

/*

* Just a quick hamburger
*/

1. menuToggle span {

 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 background: white;
 border-radius: 3px;
 
 z-index: 1;
 
 transform-origin: 4px 0px;
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             opacity 0.55s ease;

}

1. menuToggle span:first-child

{

 transform-origin: 0% 0%;

}

1. menuToggle span:nth-last-child(2)

{

 transform-origin: 0% 100%;

}

/*

* Transform all the slices of hamburger
* into a crossmark.
*/

1. menuToggle input:checked ~ span

{

 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: white;

}

/*

* But let's hide the middle one.
*/

1. menuToggle input:checked ~ span:nth-last-child(3)

{

 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);

}

/*

* Ohyeah and the last one should go the other direction
*/

1. menuToggle input:checked ~ span:nth-last-child(2)

{

 transform: rotate(-45deg) translate(0, -1px);

}

/*

* Make this absolute positioned
* at the top left of the screen
*/

1. mobile-menu

{

 position: absolute;

width: 200px;

 margin: -100px 0 0 -50px;
 padding: 50px;
 padding-top: 125px;
 background: var(--color-dark);
 list-style-type: none;
 -webkit-font-smoothing: antialiased;

/* to stop flickering of text in safari */

 transform-origin: 0% 0%;
 transform: translate(-100%, 0);
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}

1. mobile-menu li

{

 padding: 5px 0;
 font-size: 16px;
 height: 0.75em;
 display: flex;
 align-items: center;

}

1. mobile-menu li svg {

 width: 1em;
 height: 1em;
 margin-right: 10px;
 fill: currentColor;

}

1. mobile-menu li span {

 width: 100%;
 height: 0.75em;
 background: none;

}

/*

* And let's slide it in from the left
*/

1. menuToggle input:checked ~ ul

{

 transform: none;

}

@media only screen and (max-width: 1230px) {

 .main-item {
   font-size: smaller;
 }

}

@media only screen and (max-width: 1060px) { .home-button { display: none; }

}

@media only screen and (max-width: 900px) {

 .menu {
   height: 50px;
   width: 100%;
   background: var(--color-dark);
 }
 
 .menu .main-item {
   display: none;

}

#menuToggle { display: block;

 }
 

}

/* ------ HEADER ------ */

.header {

 position: relative;
 height: 40vh;
 min-height: 260px;
 width: 100%;
 background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
 display: flex;
 align-items: center;
 text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);

}

.header::before {

 content: ;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

}

.header div {

 margin: auto;
 display: flex;
 flex-direction: column;

align-items: center; }

.header div svg {

 width: 160px;
 height: 160px;

}

.header div h1 { padding: 0;

 margin-top: 0;
 font-size: 50px;

}

/* ------ FOOTER ------ */

.multiple-items-footer { margin: 0 auto; display: flex; justify-content: space-around; width: 250px; }

.item-footer { width: 50px; height: 50px; margin: 5px; filter: invert(50%); transition: 0.4s; }

.item-footer:hover { filter: invert(100%); transition: 0.1s; }

1. footer {

padding: 40px 0; background: rgb(50, 50, 50); text-align: center; color: white; font-size: 20px; }

/* ------ CONTAINERS ------ */

.nav-cards {

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin: 20px auto;

}

.nav-card {

 width: 180px;
 height: 180px;
 margin: 10px;
 position: relative;
 color: white;
 text-align: center;
 background: var(--color-software);
 box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 transition: 200ms;
 border-radius: 3px;

}

.nav-card svg {

 position: absolute;
 fill: white;
 width: 50%;
 height: 50%;
 top: 10%;
 left: 25%;

}

.nav-card h2 {

 position: absolute;
 bottom: 0;
 left: 5px;

right: 5px; color: white; }

.nav-card::before, .nav-card::after {

 content: ;
 position: absolute;
 top: 5px;
 left: 5px;
 right: 5px;
 bottom: 5px;
 transition: transform 400ms;

}

.nav-card::before {

 border-top: white solid 1px;
 border-bottom: white solid 1px;
 transform: scale(0, 1);

}

.nav-card::after {

 border-left: white solid 1px;
 border-right: white solid 1px;
 transform: scale(1, 0);

}

.nav-card:hover::before {

 transform: scale(1, 1);

}

.nav-card:hover::after {

 transform: scale(1, 1);

}

.text-container {

 position: relative;
 text-align: center;
 margin: 60px auto;
 padding: 10px;
 max-width: 1000px;

}

.text-container h1 {

 font-size: 40px;
 position: relative;
 color: var(--color-primary);

}

.text-container h1::after {

 content: ;
 position: absolute;
 bottom: 0;
 left: 10%;
 right: 10%;
 height: 4px;
 border-radius: 2px;
 background: currentColor;

}

.text-container p {

 margin-bottom: 20px;
 font-size: 24px !important;
 text-align: center !important;

}

.nav-button { position: relative !important;

 padding: 10px 20px !important;
 background: var(--color-primary) !important;
 color: white !important;
 text-decoration: none !important;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
 font-size: 20px !important;
 display: block;
 width: fit-content;
 margin: 10px auto;

}

.nav-button::before {

 content: '> ';

}

.nav-button::after {

 content: ;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 3px;
 background: white;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.nav-button:hover::after {

 transform: scale(1, 1);

}

/* ----- CAROUSEL ----- */ @import url("https://fonts.googleapis.com/css?family=Roboto:900"); /**

 * style variables

• /

/**

 * Control & indicator mixin

• /

.carousel {

 height: 400px;
 width: 500px;
 overflow: hidden;
 text-align: center;
 position: relative;
 padding: 0;
 list-style: none;

/**

 * Where the magic happens
 */

/**

   * Control element - right/left arrows
 */

/**

   * Element for holding slide indicators
 */

/**

   * Indicator for indicating active slide
 */

/**

   * Create rules for when slides are contained within a track
 */

} .carousel__controls, .carousel__activator {

 display: none;

} .carousel__activator:nth-of-type(1):checked ~ .carousel__track {

 -webkit-transform: translateX(0%);
         transform: translateX(0%);

} .carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {

 transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;
 -webkit-transform: scale(1);
         transform: scale(1);

} .carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {

 display: block;
 opacity: 1;

} .carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {

 opacity: 1;

} .carousel__activator:nth-of-type(2):checked ~ .carousel__track {

 -webkit-transform: translateX(-100%);
         transform: translateX(-100%);

} .carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {

 transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;
 -webkit-transform: scale(1);
         transform: scale(1);

} .carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {

 display: block;
 opacity: 1;

} .carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {

 opacity: 1;

} .carousel__activator:nth-of-type(3):checked ~ .carousel__track {

 -webkit-transform: translateX(-200%);
         transform: translateX(-200%);

} .carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {

 transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;
 -webkit-transform: scale(1);
         transform: scale(1);

} .carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {

 display: block;
 opacity: 1;

} .carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {

 opacity: 1;

} .carousel__activator:nth-of-type(4):checked ~ .carousel__track {

 -webkit-transform: translateX(-300%);
         transform: translateX(-300%);

} .carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {

 transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;
 -webkit-transform: scale(1);
         transform: scale(1);

} .carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {

 display: block;
 opacity: 1;

} .carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {

 opacity: 1;

} .carousel__activator:nth-of-type(5):checked ~ .carousel__track {

 -webkit-transform: translateX(-400%);
         transform: translateX(-400%);

} .carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {

 transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;
 -webkit-transform: scale(1);
         transform: scale(1);

} .carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {

 display: block;
 opacity: 1;

} .carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {

 opacity: 1;

} .carousel__control {

 height: 30px;
 width: 30px;
 margin-top: -15px;
 top: 50%;
 position: absolute;
 display: block;
 cursor: pointer;
 border-width: 5px 5px 0 0;
 border-style: solid;
 border-color: #fafafa;
 opacity: 0.35;
 outline: 0;
 z-index: 3;

} .carousel__control:hover {

 opacity: 1;

} .carousel__control--backward {

 left: 10px;
 -webkit-transform: rotate(-135deg);
         transform: rotate(-135deg);

} .carousel__control--forward {

 right: 10px;
 -webkit-transform: rotate(45deg);
         transform: rotate(45deg);

} .carousel__indicators {

 position: absolute;
 bottom: 20px;
 width: 100%;
 text-align: center;

} .carousel__indicator {

 height: 15px;
 width: 15px;
 border-radius: 100%;
 display: inline-block;
 z-index: 2;
 cursor: pointer;
 opacity: 0.35;
 margin: 0 2.5px 0 2.5px;

} .carousel__indicator:hover {

 opacity: 0.75;

} .carousel__track {

 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 0;
 margin: 0;
 transition: -webkit-transform 0.5s ease 0s;
 transition: transform 0.5s ease 0s;
 transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;

} .carousel__track .carousel__slide {

 display: block;
 top: 0;
 left: 0;
 right: 0;
 opacity: 1;

} .carousel__track .carousel__slide:nth-of-type(1) {

 -webkit-transform: translateX(0%);
         transform: translateX(0%);

} .carousel__track .carousel__slide:nth-of-type(2) {

 -webkit-transform: translateX(100%);
         transform: translateX(100%);

} .carousel__track .carousel__slide:nth-of-type(3) {

 -webkit-transform: translateX(200%);
         transform: translateX(200%);

} .carousel__track .carousel__slide:nth-of-type(4) {

 -webkit-transform: translateX(300%);
         transform: translateX(300%);

} .carousel__track .carousel__slide:nth-of-type(5) {

 -webkit-transform: translateX(400%);
         transform: translateX(400%);

} .carousel--scale .carousel__slide {

 -webkit-transform: scale(0);
         transform: scale(0);

} .carousel__slide {

 height: 100%;
 position: absolute;
 overflow-y: auto;
 opacity: 0;

} /**

 * Theming

• /

.my-carousel {

 border-radius: 5px;
 margin: 96px auto 0 auto !important;

} .carousel__slide {

 overflow: hidden;

} .carousel--thumb .carousel__indicator {

 height: 30px;
 width: 30px;

} .carousel__indicator {

 background-color: #fafafa;

} /* .carousel__slide:nth-of-type(1), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {

 background-image: url("https://unsplash.it/300?random");
 background-size: cover;
 background-position: center;

} .carousel__slide:nth-of-type(2), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {

 background-image: url("https://unsplash.it/600?random");
 background-size: cover;
 background-position: center;

} .carousel__slide:nth-of-type(3), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {

 background-image: url("https://unsplash.it/900?random");
 background-size: cover;
 background-position: center;

} .carousel__slide:nth-of-type(4), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {

 background-image: url("https://unsplash.it/1200?random");
 background-size: cover;
 background-position: center;

} .carousel__slide:nth-of-type(5), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {

 background-image: url("https://unsplash.it/1500?random");
 background-size: cover;
 background-position: center;

} */

.relevant {

 margin-top: 100px;

}

.accordion {

 background-color: #eee;
 color: #444;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 transition: 0.4s;

}

.active, .accordion:hover {

 background-color: #ccc;

}

.accordion:after {

 content: '\002B';
 color: #777;
 font-weight: bold;
 float: right;
 margin-left: 5px;

}

.active:after {

 content: "\2212";

}

.panel {

 padding: 0 18px;
 background-color: rgba(0,0,0,0.1);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;

}

.nomination {

 max-width: 800px;
 padding: 20px 32px;
 border: white solid 4px;
 border-radius: 8px;
 margin: 20px auto;
 background: #E57373;
 box-shadow: 0 0 20px rgba(0,0,0,0.1);
 display: flex;

}

.nomination p, .nomination h2 {

 color: white;
 text-align: center !important;

}

.nomination p {

 font-size: medium !important;

}

.nomination a.nav-button {

 background: rgba(0, 0, 0, 0.5) !important;

}