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

Latest revision as of 08:58, 18 December 2020

.introContainer .memberDiv .memberName > a, main .instructorList .arrowMore, #bodyContent .instructor .instructorName a {

 cursor: pointer;
 transition: transform 0.3s;

} .introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover, #bodyContent .instructor .instructorName a:hover {

 transform: translateY(-2px);

} .introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active, #bodyContent .instructor .instructorName a:active {

 transform: translateY(2px);

}

body, html {

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

}

.introContainer {

 flex-direction: column-reverse;
 justify-content: center;
 align-items: center;
 height: calc(100vh + 8vw);
 background-image: url();
 background-size: cover;

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

 @-moz-document url-prefix() {
   .introContainer {
     min-height: 90vh;
     max-height: 90vh;
   }
 }

} .introContainer .heading {

 position: absolute;
 font-size: 12vh;
 top: 6vw;
 left: calc(24vw - 5vh);
 pointer-events: none;
 font-family: "montserrat-black";
 color: #6281EF;
 text-align: center;
 line-height: 1;
 transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1);

} .introContainer .heading div {

 display: inline;

} .introContainer .heading.novideo {

 font-size: 10vh;
 left: 4vw;

} .introContainer .heading.other {

 top: 7vw;
 left: calc(22vw - 5vh);
 padding-top: unset;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #6281EF;

} .introContainer .heading.other.novideo {

 left: 2vw;

} .introContainer .heading.other .invisible {

 color: transparent;
 -webkit-text-stroke-width: 0;
 -webkit-text-stroke-color: transparent;

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

 .introContainer .heading {
   font-size: 10vw;
   top: calc(43vh - 40vw);
   left: 10vw;
 }
 .introContainer .heading br {
   display: none;
 }
 .introContainer .heading.novideo {
   font-size: 8vw;
   left: 18vw;
   top: calc(6vh + 20px);
 }
 .introContainer .heading.other {
   font-size: 10vw;
   top: calc(43vh - 39vw);
   left: 8vw;
 }
 .introContainer .heading.other.novideo {
   font-size: 8vw;
   left: 16vw;
   top: calc(7vh + 20px);
 }

} .introContainer::before {

 content: unset;
 display: none;
 background-image: unset;

} .introContainer > span {

 position: absolute;
 margin-bottom: 14vh;
 left: calc(32vw - 5vh);
 width: calc(10vh + 36vw);
 height: calc(10vh + 36vw);
 background-attachment: unset;
 background-position: center;
 background-size: cover;
 overflow: hidden;
 align-self: center;
 font-weight: bold;
 transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s;

} .introContainer > span video {

 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span.novideo {

 left: 15vw;
 width: calc(10vh + 30vw);
 height: calc(10vh + 30vw);

} .introContainer > span.novideo video {

 opacity: 0;

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

 .introContainer > span {
   top: 45vh;
   transform: translateY(-50%);
   left: 12vw;
   width: 76vw;
   height: 76vw;
 }
 .introContainer > span.novideo {
   left: calc(35vw - 10vh);
   top: calc(10vw + 20px);
   padding-bottom: unset;
   width: calc(20vh + 30vw);
   height: calc(20vh + 30vw);
   transform: translateY(0%);
 }

} .introContainer > span > div {

 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 background-size: cover;
 background-position: center;
 opacity: 0;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span > div.transition {

 opacity: 1;

} .introContainer button.introVideoPlay {

 display: block;
 position: absolute;
 margin-bottom: 14vh;
 top: calc(35vh + 10vw);
 left: 14vw;
 width: 5vw;
 height: 5vw;
 border: unset;
 opacity: 0;
 pointer-events: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 40% 40%;
 background-repeat: no-repeat;
 background-position: 56% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;
 transition: 0.3s;

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

 .introContainer button.introVideoPlay {
   top: calc(40vw + 20px);
   left: calc(31.5vw - 10vh);
   width: 5vh;
   height: 5vh;
 }

} .introContainer button.introVideoPlay.novideo {

 pointer-events: unset;
 opacity: 1;

} .introContainer button.introVideoPlay:hover {

 transform: scale(1.1);

} .introContainer .memberDiv {

 position: absolute;
 left: calc(50vw + 10vh);
 width: calc(40vw - 10vh);
 margin-bottom: 18vh;
 color: #FAFAFC;
 transition: unset;
 font-family: "montserrat-light";

} .introContainer .memberDiv.transition {

 opacity: 0;
 transition: opacity 400ms;

} .introContainer .memberDiv.alternative {

 transition: opacity 400ms;
 opacity: 0;

} .introContainer .memberDiv.alternative.transition {

 opacity: 1;

} .introContainer .memberDiv .memberName {

 font-family: "montserrat-bold";
 font-size: calc(2.2vw + 1vh);
 text-transform: uppercase;
 display: flex;
 align-items: flex-end;
 flex-wrap: wrap;

} .introContainer .memberDiv .memberName span {

 margin-right: calc((2.2vw + 1vh) * 0.5);

} .introContainer .memberDiv .memberName > a, #bodyContent .instructor .instructorName a {

 display: inline-block;
 width: calc((2.2vw + 1vh) * 0.8);
 height: calc((2.2vw + 1vh) * 0.8);
 padding-right: 0 !important;
 background-image: url() !important;
 background-size: 100% !important;
 background-position: center !important;
 background-repeat: no-repeat;
 margin-bottom: calc((2.2vw + 1vh) * 0.2);

}

bodyContent .instructor .instructorName a {

 background-image: url() !important;
 width: 1rem;
 height: 1rem;
 margin-left: 8px;
 margin-bottom: 0;

} .introContainer .memberDiv .memberRole, .introContainer .memberDiv .memberStudy {

 font-size: calc(1.2vw + 1vh);
 text-transform: uppercase;
 margin: 8px 0 0;

} .introContainer .memberDiv .memberStudy {

 margin-bottom: 20px;

} .introContainer .memberDiv .memberQuestion {

 font-family: "montserrat-bold";
 font-size: calc(1.2vw + 1vh);
 margin-bottom: 8px;

} .introContainer .memberDiv .memberFunFact {

 font-size: calc(0.5vw + 1.5vh);

} .introContainer .memberDiv b {

 font-family: "montserrat";
 box-shadow: inset 0 -0.5em 0 -1px #6281EF;

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

 .introContainer .memberDiv {
   padding: 0 10vw;
   left: 0;
   top: 50vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: calc(100vh - 60vw);
   width: unset;
 }
 .introContainer .memberDiv .memberName {
   font-size: 3.3vh;
 }
 .introContainer .memberDiv .memberName > a {
   width: 2.6vh;
   height: 2.6vh;
   margin-bottom: 0.6vh;
 }
 .introContainer .memberDiv .memberRole {
   font-size: 2.7vh;
 }
 .introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact {
   font-size: 2.2vh;
 }

} .introContainer .bubbleList {

 position: absolute;
 top: calc(90vh - 66px);
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 box-sizing: border-box;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 16px;

} .introContainer .bubbleList::after {

 content: unset;
 color: transparent;

} @media (max-aspect-ratio: 121/66) {

 .introContainer .bubbleList {
   max-width: calc(69vh + 120px);
   top: calc(80vh - 96px);
 }

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

 .introContainer .bubbleList {
   max-width: unset;
   flex-wrap: nowrap;
   padding: unset;
   overflow-x: auto;
   justify-content: start;
   top: calc(90vh - 40px);
   padding: 0 8vw;
 }
 .introContainer .bubbleList::after {
   content: ".";
 }

} .introContainer .bubbleList > span {

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-position: center;
 background-size: cover;
 background-color: #6281EF;
 border-radius: 1000px;
 min-width: 10vh;
 min-height: 10vh;
 max-width: 10vh;
 max-height: 10vh;
 margin: 10px;
 transform: scale(1);
 color: transparent;
 transition: transform 0.3s, color 0.3s;
 font-family: "montserrat-bold";

} .introContainer .bubbleList > span > span {

 font-size: 1rem;
 z-index: 1;
 pointer-events: none;

} .introContainer .bubbleList > span::before {

 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background-color: transparent;
 pointer-events: none;
 transition: background-color 0.3s;
 position: absolute;
 border-radius: 1000px;

} .introContainer .bubbleList > span:hover {

 transform: scale(1.2);
 color: #FAFAFC;

} .introContainer .bubbleList > span:hover::before {

 background-color: rgba(0, 0, 0, 0.4);

} .introContainer .bubbleList::-webkit-scrollbar {

 background-color: transparent;
 border-radius: 10px;
 height: 8px;
 width: 8px;

} .introContainer .bubbleList::-webkit-scrollbar-thumb {

 background-color: #444444;
 border-radius: 10px;

} .introContainer .bubbleList::-webkit-scrollbar-corner {

 background: transparent;

} .introContainer .suggestClick {

 position: absolute;
 z-index: 1;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 transition: opacity 0.5s, visibility 0.5s;

} .introContainer .suggestClick.hidden {

 opacity: 0;
 pointer-events: none;

} .introContainer .suggestClick span {

 color: #FAFAFC;
 margin-bottom: unset;
 border-radius: unset;
 font-weight: unset;
 position: static;
 top: unset;
 width: unset;
 height: unset;
 font-family: "montserrat-light";
 font-size: 2.5vh;
 align-self: start;

} .introContainer .suggestClick::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/6/69/T--Vilnius-Lithuania--arrowBlueLeftDown.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: 92%;
 width: 8vh;
 height: 8vh;
 margin-right: 8px;

}

.milkWave {

 z-index: 2;
 width: 100%;
 height: calc(100vh + 8vw);
 top: 0;
 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 {

 padding: 50px 10vw 96px;
 box-sizing: border-box;
 flex-direction: column;
 background-image: url(), url();
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;

} main .heading2 {

 font-family: "montserrat-black";
 font-size: 4vw;
 font-size: max(4vw, 18px);
 line-height: 0.8;
 text-transform: uppercase;
 display: block;
 width: 100%;
 text-align: end;
 color: #222222;

} main .heading2.other {

 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #222222;

} main .instructorList {

 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-between;

} main .instructorList .instructor {

 margin-top: 50px;
 display: grid;
 grid-template-columns: auto;
 grid-template-rows: 16vw 5vw auto;
 column-gap: 28px;
 row-gap: 4px;
 width: 20%;
 justify-items: center;

} @media (max-width: 800px) {

 main .instructorList .instructor {
   grid-template-columns: 32vw auto;
   grid-template-rows: 10vw auto;
   width: 100%;
   column-gap: 4vw;
 }

} main .instructorList .instructor img {

 object-fit: cover;
 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4);
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

} @media (max-width: 800px) {

 main .instructorList .instructor img {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .filter {

 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 background-color: #6281EF;
 mix-blend-mode: hue;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

} @media (max-width: 800px) {

 main .instructorList .instructor .filter {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .instructorName {

 display: flex;
 align-items: flex-end;
 font-size: 1.4vw;
 font-family: "montserrat-bold";
 text-transform: uppercase;
 color: #6281EF;
 text-align: start;
 width: 100%;
 white-space: nowrap;
 /* risky */
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 3;

} @media (max-width: 800px) {

 main .instructorList .instructor .instructorName {
   font-size: 4vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
 }

} main .instructorList .instructor .instructorAbout {

 font-size: 1.6vw;
 font-family: "lato-light";
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 3;
 grid-row-end: 4;
 text-align: justify;

} @media (max-width: 800px) {

 main .instructorList .instructor .instructorAbout {
   font-size: 3.6vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 2;
   grid-row-end: 3;
 }

} main .instructorList .instructor .instructorAbout b {

 font-family: "montserrat-light";
 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;

} main .instructorList .arrowMore {

 margin-top: 3em;
 width: 50%;
 height: 16vw;
 text-decoration: none;
 display: flex;
 align-items: center;

} @media (max-width: 800px) {

 main .instructorList .arrowMore {
   width: 100%;
   height: 32vw;
 }

} main .instructorList .arrowMore::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--arrowMore.svg);
 background-repeat: no-repeat;
 background-position: 5vw center;
 width: 16vw;
 height: 16vw;

} @media (max-width: 800px) {

 main .instructorList .arrowMore::before {
   width: 32vw;
   height: 32vw;
   background-position: 10vw center;
 }

} main .instructorList .arrowMore span {

 color: #222222;
 font-family: "montserrat-bold";
 font-size: 3vw;
 margin-left: 0vw;

} @media (max-width: 800px) {

 main .instructorList .arrowMore span {
   margin-left: 4vw;
   font-size: 5vw;
 }

}

@@ Line 1: / Line 1: @@
-.introContainer .memberDiv .memberName > a, main .instructorList .arrowMore {
+.introContainer .memberDiv .memberName > a, main .instructorList .arrowMore, #bodyContent .instructor .instructorName a {
    cursor: pointer;
    transition: transform 0.3s;
 }
-.introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover {
+.introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover, #bodyContent .instructor .instructorName a:hover {
    transform: translateY(-2px);
 }
-.introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active {
+.introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active, #bodyContent .instructor .instructorName a:active {
    transform: translateY(2px);
 }
@@ Line 21: / Line 21: @@
    justify-content: center;
    align-items: center;
-  position: fixed;
+   height: calc(100vh + 8vw);
-  height: stretch;
-  min-height: -moz-available;
-  max-height: -moz-available;
-   height: -webkit-fill-available;
    background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png);
    background-size: cover;
@@ Line 59: / Line 55: @@
    top: 7vw;
    left: calc(22vw - 5vh);
+  padding-top: unset;
    color: transparent;
    -webkit-text-stroke-width: 1px;
@@ Line 83: / Line 80: @@
      font-size: 8vw;
      left: 18vw;
-     top: 4vh;
+     top: calc(6vh + 20px);
    }
    .introContainer .heading.other {
@@ Line 93: / Line 90: @@
      font-size: 8vw;
      left: 16vw;
-     top: 5vh;
+     top: calc(7vh + 20px);
    }
 }
@@ Line 140: / Line 137: @@
    .introContainer > span.novideo {
      left: calc(35vw - 10vh);
-     top: 8vw;
+     top: calc(10vw + 20px);
      padding-bottom: unset;
      width: calc(20vh + 30vw);
@@ Line 180: / Line 177: @@
    border-radius: 1000px;
    background-color: #6281EF;
-   transition: transform 0.3s, opacity 300ms;
+   transition: 0.3s;
 }
 @media (max-aspect-ratio: 1/1) {
    .introContainer button.introVideoPlay {
-     top: 40vw;
+     top: calc(40vw + 20px);
-     left: calc(33vw - 10vh);
+     left: calc(31.5vw - 10vh);
      width: 5vh;
      height: 5vh;
@@ Line 201: / Line 198: @@
    left: calc(50vw + 10vh);
    width: calc(40vw - 10vh);
-   margin-bottom: 14vh;
+   margin-bottom: 18vh;
    color: #FAFAFC;
    transition: unset;
@@ Line 228: / Line 225: @@
    margin-right: calc((2.2vw + 1vh) * 0.5);
 }
-.introContainer .memberDiv .memberName > a {
+.introContainer .memberDiv .memberName > a, #bodyContent .instructor .instructorName a {
    display: inline-block;
    width: calc((2.2vw + 1vh) * 0.8);
@@ Line 239: / Line 236: @@
    margin-bottom: calc((2.2vw + 1vh) * 0.2);
 }
-.introContainer .memberDiv .memberRole {
+#bodyContent .instructor .instructorName a {
+  background-image: url(https://static.igem.org/mediawiki/2020/d/de/T--Vilnius-Lithuania--iconLinkedInBlue.png) !important;
+  width: 1rem;
+  height: 1rem;
+  margin-left: 8px;
+  margin-bottom: 0;
+}
+.introContainer .memberDiv .memberRole, .introContainer .memberDiv .memberStudy {
    font-size: calc(1.2vw + 1vh);
    text-transform: uppercase;
-   margin: 8px 0 20px;
+   margin: 8px 0 0;
+}
+.introContainer .memberDiv .memberStudy {
+  margin-bottom: 20px;
 }
 .introContainer .memberDiv .memberQuestion {
@@ Line 251: / Line 259: @@
 .introContainer .memberDiv .memberFunFact {
    font-size: calc(0.5vw + 1.5vh);
+}
+.introContainer .memberDiv b {
+  font-family: "montserrat";
+  box-shadow: inset 0 -0.5em 0 -1px #6281EF;
 }
 @media (max-aspect-ratio: 1/1) {
    .introContainer .memberDiv {
-     padding: 0 32px;
+     padding: 0 10vw;
      left: 0;
      top: 50vw;
@@ Line 280: / Line 292: @@
 .introContainer .bubbleList {
    position: absolute;
-   bottom: 0;
+   top: calc(90vh - 66px);
-  margin-bottom: 12px;
    width: 100%;
    display: flex;
@@ Line 300: / Line 311: @@
    .introContainer .bubbleList {
      max-width: calc(69vh + 120px);
+    top: calc(80vh - 96px);
    }
 }
@@ Line 309: / Line 321: @@
      overflow-x: auto;
      justify-content: start;
+    top: calc(90vh - 40px);
+    padding: 0 8vw;
    }
    .introContainer .bubbleList::after {
@@ Line 314: / Line 328: @@
    }
 }
-.introContainer .bubbleList span {
+.introContainer .bubbleList > span {
    cursor: pointer;
    display: inline-flex;
@@ Line 329: / Line 343: @@
    margin: 10px;
    transform: scale(1);
-   transition: transform 0.3s;
+  color: transparent;
+   transition: transform 0.3s, color 0.3s;
+  font-family: "montserrat-bold";
 }
-.introContainer .bubbleList span:hover {
+.introContainer .bubbleList > span > span {
+  font-size: 1rem;
+  z-index: 1;
+  pointer-events: none;
+}
+.introContainer .bubbleList > span::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  pointer-events: none;
+  transition: background-color 0.3s;
+  position: absolute;
+  border-radius: 1000px;
+}
+.introContainer .bubbleList > span:hover {
    transform: scale(1.2);
+  color: #FAFAFC;
+}
+.introContainer .bubbleList > span:hover::before {
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .introContainer .bubbleList::-webkit-scrollbar {
@@ Line 353: / Line 389: @@
    align-items: flex-start;
    justify-content: center;
-  margin-left: 6vw;
-  left: 0;
    transition: opacity 0.5s, visibility 0.5s;
 }
@@ Line 380: / Line 414: @@
    background-repeat: no-repeat;
    background-position: center;
-   background-size: 91%;
+   background-size: 92%;
    width: 8vh;
    height: 8vh;
@@ Line 389: / Line 423: @@
    z-index: 2;
    width: 100%;
-   height: calc(100vh + 4vw);
+   height: calc(100vh + 8vw);
-   position: relative;
+  top: 0;
+   position: absolute;
    content: "";
    pointer-events: none;
@@ Line 412: / Line 447: @@
    font-size: 4vw;
    font-size: max(4vw, 18px);
-   line-height: 1;
+   line-height: 0.8;
    text-transform: uppercase;
    display: block;
@@ Line 427: / Line 462: @@
    display: flex;
    flex-flow: row wrap;
+  align-items: center;
    justify-content: space-between;
 }
@@ Line 444: / Line 480: @@
      grid-template-rows: 10vw auto;
      width: 100%;
+    column-gap: 4vw;
    }
 }
 main .instructorList .instructor img {
+  object-fit: cover;
    width: 16vw;
    height: 16vw;
@@ Line 519: / Line 557: @@
    grid-row-start: 3;
    grid-row-end: 4;
+  text-align: justify;
 }
 @media (max-width: 800px) {
@@ Line 528: / Line 567: @@
      grid-row-end: 3;
    }
+}
+main .instructorList .instructor .instructorAbout b {
+  font-family: "montserrat-light";
+  box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 }
 main .instructorList .arrowMore {