Difference between revisions of "Template:Vilnius-Lithuania/CSS/Collaborations"

Revision as of 17:51, 28 August 2020

body, html {

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.introContainer {

 width: 100%;
 height: 45vh;
 background-color: #121212;
 color: #FAFAFC;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

} .introContainer .heading {

 font-family: "montserrat-black";
 font-size: calc(4.5vw + 10px);
 text-transform: uppercase;
 padding-left: 10vw;
 line-height: 0.9;

} .introContainer .heading.other {

 padding-left: 0;
 padding-right: 10vw;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;

}

.milkWave {

 z-index: 2;
 width: 100%;
 top: 0;
 height: calc(45vh + 2px);
 position: absolute;
 content: "";
 pointer-events: none;
 background-position: bottom;
 background-origin: border-box;
 background-size: 100%;
 background-repeat: no-repeat;
 background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);

}

main {

 box-sizing: border-box;
 min-height: calc(55vh - 18px);
 background-color: #FAFAFC;
 color: #121212;
 padding: 32px 6vw 72px 12vw;
 display: flex;
 justify-content: space-evenly;
 align-items: stretch;

} main .collabInfo {

 box-sizing: border-box;
 padding-right: 64px;
 display: flex;
 flex-direction: column;

} main .collabInfo .name {

 font-family: "montserrat-black";
 font-size: 1.4rem;
 text-transform: uppercase;
 margin-bottom: 12px;

} main .collabInfo .text {

 font-size: 1.2rem;

} main .collabInfo .controls {

 flex-grow: 1;
 margin-top: 32px;
 display: flex;
 justify-content: center;

} main .collabInfo .controls > div {

 flex-grow: 1;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: flex-end;
 max-width: 400px;

} main .collabInfo .controls .previous, main .collabInfo .controls .next {

 border-radius: 1000px;
 width: 64px;
 height: 64px;
 background-image: url(https://static.igem.org/mediawiki/2020/1/15/T--Vilnius-Lithuania--arrowNext.svg);
 background-repeat: no-repeat;
 background-position: center;
 cursor: pointer;
 transition: transform 0.2s ease-out;

} main .collabInfo .controls .previous:hover, main .collabInfo .controls .next:hover {

 transform: scale(1.1);

} main .collabInfo .controls .previous {

 transform: scaleX(-1);

} main .collabInfo .controls .previous:hover {

 transform: scaleX(-1) scale(1.1);

} main .collabInfo .controls .select {

 flex-grow: 1;
 height: 64px;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;

} main .collabInfo .controls .select span {

 box-sizing: border-box;
 width: 16px;
 height: 16px;
 border-radius: 1000px;
 display: inline-block;
 border: 2px solid #121212;
 background-color: transparent;
 transition: 0.3s;
 cursor: pointer;

} main .collabInfo .controls .select span.active {

 background-color: #121212;

} main .collabInfo .controls .select span:hover {

 transform: scale(1.2);

} main .collabPhotos {

 display: flex;
 flex-direction: row;
 align-items: center;

} main .collabPhotos span {

 box-sizing: border-box;
 display: inline-block;
 border-radius: 1000px;
 width: 25vw;
 height: 25vw;
 background-position: center;
 background-size: cover;
 position: relative;

} main .collabPhotos span:first-child {

 margin-right: -3vw;
 z-index: 2;
 overflow: hidden;

} main .collabPhotos span:first-child::before {

 content: "";
 width: 100%;
 height: 100%;
 display: inline-block;
 margin-left: 19vw;
 border-radius: 1000px 0 0 1000px;
 box-sizing: border-box;
 background-color: #6281EF;
 opacity: 0.7;

} main .collabPhotos span:last-child {

 margin-left: -3vw;

} @media (max-aspect-ratio: 3/2) {

 main {
   padding: 7vw 7vw 72px;
   flex-direction: column-reverse;
   justify-content: unset;
   align-items: flex-start;
 }
 main .collabInfo {
   padding-right: 0;
 }
 main .collabPhotos {
   margin-bottom: 48px;
   align-self: center;
 }
 main .collabPhotos span {
   width: 42vw;
   height: 42vw;
 }
 main .collabPhotos span:first-child::before {
   margin-left: 36vw;
 }

}