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

m
m
Line 15: Line 15:
 
   justify-content: center;
 
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
 +
  overflow: hidden;
 
}
 
}
 
.introContainer .heading {
 
.introContainer .heading {
 
   font-family: "montserrat-black";
 
   font-family: "montserrat-black";
−
   font-size: calc(4.5vw + 10px);
+
   font-size: calc(4.7vw + 11px);
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   padding-left: 10vw;
 
   padding-left: 10vw;
Line 26: Line 27:
 
   padding-left: 0;
 
   padding-left: 0;
 
   padding-right: 10vw;
 
   padding-right: 10vw;
 +
  margin-bottom: 20px;
 
   color: transparent;
 
   color: transparent;
 
   -webkit-text-stroke-width: 1px;
 
   -webkit-text-stroke-width: 1px;
Line 52: Line 54:
 
   background-color: #FAFAFC;
 
   background-color: #FAFAFC;
 
   color: #121212;
 
   color: #121212;
−
   padding: 32px 6vw 72px 12vw;
+
   padding: 7vw 20vw 72px;
 
   display: flex;
 
   display: flex;
 +
  flex-direction: column;
 
   justify-content: space-evenly;
 
   justify-content: space-evenly;
 
   align-items: stretch;
 
   align-items: stretch;
 
}
 
}
−
main .collabAll {
+
@media (max-aspect-ratio: 14/11) {
−
  display: flex;
+
   main {
−
  justify-content: space-evenly;
+
     padding: 7vw 7vw 72px;
−
  align-items: stretch;
+
−
}
+
−
@media (max-aspect-ratio: 3/2) {
+
−
   main .collabAll {
+
−
     display: none;
+
 
   }
 
   }
 
}
 
}
 
main .collabSingle {
 
main .collabSingle {
−
   display: none;
+
   display: flex;
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: center;
 
   align-items: center;
−
}
 
−
@media (max-aspect-ratio: 3/2) {
 
−
  main .collabSingle {
 
−
    display: flex;
 
−
  }
 
−
}
 
−
main .collabSingle, main .collabAll {
 
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
}
 
}
−
main .collabSingle .collabInfo, main .collabAll .collabInfo {
+
main .collabSingle + .collabSingle {
−
   padding-right: 64px;
+
   margin-top: 64px;
 
}
 
}
−
main .collabSingle .name, main .collabAll .name {
+
main .collabSingle .name {
 
   font-family: "montserrat-black";
 
   font-family: "montserrat-black";
−
   font-size: 1.4rem;
+
   font-size: calc(2.5vw + 12px);
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 +
  text-align: center;
 
   margin-bottom: 12px;
 
   margin-bottom: 12px;
 
}
 
}
−
main .collabSingle .text, main .collabAll .text {
+
main .collabSingle .text {
 
   font-size: 1.2rem;
 
   font-size: 1.2rem;
 
}
 
}
−
main .collabSingle .controls, main .collabAll .controls {
+
main .collabSingle .controls {
 
   flex-grow: 1;
 
   flex-grow: 1;
 
   margin-top: 32px;
 
   margin-top: 32px;
Line 98: Line 90:
 
   justify-content: center;
 
   justify-content: center;
 
}
 
}
−
main .collabSingle .controls > div, main .collabAll .controls > div {
+
main .collabSingle .controls > div {
 
   flex-grow: 1;
 
   flex-grow: 1;
 
   display: flex;
 
   display: flex;
Line 106: Line 98:
 
   max-width: 400px;
 
   max-width: 400px;
 
}
 
}
−
main .collabSingle .controls .previous, main .collabSingle .controls .next, main .collabAll .controls .previous, main .collabAll .controls .next {
+
main .collabSingle .controls .previous, main .collabSingle .controls .next {
 
   border-radius: 1000px;
 
   border-radius: 1000px;
 
   width: 64px;
 
   width: 64px;
Line 116: Line 108:
 
   transition: transform 0.2s ease-out;
 
   transition: transform 0.2s ease-out;
 
}
 
}
−
main .collabSingle .controls .previous:hover, main .collabSingle .controls .next:hover, main .collabAll .controls .previous:hover, main .collabAll .controls .next:hover {
+
main .collabSingle .controls .previous:hover, main .collabSingle .controls .next:hover {
 
   transform: scale(1.1);
 
   transform: scale(1.1);
 
}
 
}
−
main .collabSingle .controls .previous, main .collabAll .controls .previous {
+
main .collabSingle .controls .previous {
 
   transform: scaleX(-1);
 
   transform: scaleX(-1);
 
}
 
}
−
main .collabSingle .controls .previous:hover, main .collabAll .controls .previous:hover {
+
main .collabSingle .controls .previous:hover {
 
   transform: scaleX(-1) scale(1.1);
 
   transform: scaleX(-1) scale(1.1);
 
}
 
}
−
main .collabSingle .controls .select, main .collabAll .controls .select {
+
main .collabSingle .controls .select {
 
   flex-grow: 1;
 
   flex-grow: 1;
 
   height: 64px;
 
   height: 64px;
Line 133: Line 125:
 
   align-items: center;
 
   align-items: center;
 
}
 
}
−
main .collabSingle .controls .select span, main .collabAll .controls .select span {
+
main .collabSingle .controls .select span {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   width: 16px;
 
   width: 16px;
Line 144: Line 136:
 
   cursor: pointer;
 
   cursor: pointer;
 
}
 
}
−
main .collabSingle .controls .select span.active, main .collabAll .controls .select span.active {
+
main .collabSingle .controls .select span.active {
 
   background-color: #121212;
 
   background-color: #121212;
 
}
 
}
−
main .collabSingle .controls .select span:hover, main .collabAll .controls .select span:hover {
+
main .collabSingle .controls .select span:hover {
 
   transform: scale(1.2);
 
   transform: scale(1.2);
 
}
 
}
−
main .collabSingle .photos, main .collabAll .photos {
+
main .collabSingle .photos {
 
   display: flex;
 
   display: flex;
 
   flex-direction: row;
 
   flex-direction: row;
 
   align-items: center;
 
   align-items: center;
 +
  align-self: center;
 +
  margin: 5vw 0;
 
}
 
}
−
main .collabSingle .photos span, main .collabAll .photos span {
+
main .collabSingle .photos span {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   display: inline-block;
 
   display: inline-block;
 
   border-radius: 1000px;
 
   border-radius: 1000px;
−
   width: 25vw;
+
   width: 42vw;
−
   height: 25vw;
+
   height: 42vw;
 
   background-position: center;
 
   background-position: center;
 
   background-size: cover;
 
   background-size: cover;
 
   position: relative;
 
   position: relative;
 
}
 
}
−
main .collabSingle .photos span:first-child, main .collabAll .photos span:first-child {
+
main .collabSingle .photos span:first-child {
 
   margin-right: -3vw;
 
   margin-right: -3vw;
 
   z-index: 2;
 
   z-index: 2;
 
   overflow: hidden;
 
   overflow: hidden;
 
}
 
}
−
main .collabSingle .photos span:first-child::before, main .collabAll .photos span:first-child::before {
+
main .collabSingle .photos span:first-child::before {
 
   content: "";
 
   content: "";
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
 
   display: inline-block;
 
   display: inline-block;
−
   margin-left: 19vw;
+
   margin-left: 36vw;
 
   border-radius: 1000px 0 0 1000px;
 
   border-radius: 1000px 0 0 1000px;
 
   box-sizing: border-box;
 
   box-sizing: border-box;
Line 181: Line 175:
 
   opacity: 0.7;
 
   opacity: 0.7;
 
}
 
}
−
main .collabSingle .photos span:last-child, main .collabAll .photos span:last-child {
+
main .collabSingle .photos span:last-child {
 
   margin-left: -3vw;
 
   margin-left: -3vw;
−
}
 
−
@media (max-aspect-ratio: 3/2) {
 
−
  main {
 
−
    padding: 7vw 7vw 72px;
 
−
    flex-direction: column;
 
−
  }
 
−
  main .collabInfo {
 
−
    padding-right: 0;
 
−
  }
 
−
  main .collabSingle + .collabSingle {
 
−
    margin-top: 64px;
 
−
  }
 
−
  main .collabSingle .name {
 
−
    font-size: calc(2.5vw + 12px);
 
−
  }
 
−
  main .collabSingle .photos {
 
−
    margin: 32px 0;
 
−
    align-self: center;
 
−
  }
 
−
  main .collabSingle .photos span {
 
−
    width: 42vw;
 
−
    height: 42vw;
 
−
  }
 
−
  main .collabSingle .photos span:first-child::before {
 
−
    margin-left: 36vw;
 
−
  }
 
 
}
 
}

Revision as of 10:42, 26 September 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;
 overflow: hidden;

} .introContainer .heading { 

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

} .introContainer .heading.other { 

 padding-left: 0;
 padding-right: 10vw;
 margin-bottom: 20px;
 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 { 

 margin-top: -5px;
 box-sizing: border-box;
 min-height: calc(55vh - 18px);
 background-color: #FAFAFC;
 color: #121212;
 padding: 7vw 20vw 72px;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: stretch;

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

 main {
   padding: 7vw 7vw 72px;
 }

} main .collabSingle { 

 display: flex;
 flex-direction: column;
 align-items: center;
 box-sizing: border-box;

} main .collabSingle + .collabSingle { 

 margin-top: 64px;

} main .collabSingle .name { 

 font-family: "montserrat-black";
 font-size: calc(2.5vw + 12px);
 text-transform: uppercase;
 text-align: center;
 margin-bottom: 12px;

} main .collabSingle .text { 

 font-size: 1.2rem;

} main .collabSingle .controls { 

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

} main .collabSingle .controls > div { 

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

} main .collabSingle .controls .previous, main .collabSingle .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 .collabSingle .controls .previous:hover, main .collabSingle .controls .next:hover { 

 transform: scale(1.1);

} main .collabSingle .controls .previous { 

 transform: scaleX(-1);

} main .collabSingle .controls .previous:hover { 

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

} main .collabSingle .controls .select { 

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

} main .collabSingle .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 .collabSingle .controls .select span.active { 

 background-color: #121212;

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

 transform: scale(1.2);

} main .collabSingle .photos { 

 display: flex;
 flex-direction: row;
 align-items: center;
 align-self: center;
 margin: 5vw 0;

} main .collabSingle .photos span { 

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

} main .collabSingle .photos span:first-child { 

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

} main .collabSingle .photos span:first-child::before { 

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

} main .collabSingle .photos span:last-child { 

 margin-left: -3vw;

}