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

m
Line 12: Line 12:
 
.introContainer .heading {
 
.introContainer .heading {
 
   position: absolute;
 
   position: absolute;
−
   text-align: end;
+
   font-size: 6vh;
−
   top: 10vh;
+
   top: 6vh;
 
   pointer-events: none;
 
   pointer-events: none;
−
   font-family: 'ubuntu-bold'
+
   font-family: "ubuntu-bold";
 
}
 
}
 
.introContainer .heading.other {
 
.introContainer .heading.other {
−
   top: 12vh;
+
   top: 8vh;
 +
}
 +
@media (min-aspect-ratio: 1/1) {
 +
  .introContainer .heading {
 +
    font-size: 7vw;
 +
  }
 
}
 
}
 
.introContainer::before {
 
.introContainer::before {
Line 79: Line 84:
 
   position: absolute;
 
   position: absolute;
 
   left: 62vw;
 
   left: 62vw;
−
   top: 38vh;
+
   top: 46vh;
 
   color: #FAFAFC;
 
   color: #FAFAFC;
 
}
 
}
Line 87: Line 92:
 
.introContainer .memberDiv #memberName {
 
.introContainer .memberDiv #memberName {
 
   font-family: "lato-heavy";
 
   font-family: "lato-heavy";
−
   font-size: 4vh;
+
   font-size: 3.25vh;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
}
 
}
 
.introContainer .memberDiv #memberRole {
 
.introContainer .memberDiv #memberRole {
−
   font-size: 3vh;
+
   font-size: 2.75vh;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
}
 
}
Line 98: Line 103:
 
   font-weight: normal;
 
   font-weight: normal;
 
}
 
}
−
@media (max-width: 480px) {
+
@media (max-width: 520px) {
 
   .introContainer .memberDiv {
 
   .introContainer .memberDiv {
 
     left: 5vw;
 
     left: 5vw;
Line 104: Line 109:
 
}
 
}
 
.introContainer .bubbleList {
 
.introContainer .bubbleList {
 +
  margin-bottom: 32px;
 
   width: 100%;
 
   width: 100%;
 
   display: flex;
 
   display: flex;
Line 153: Line 159:
 
.introContainer .bubbleList span:hover {
 
.introContainer .bubbleList span:hover {
 
   transform: scale(1.2);
 
   transform: scale(1.2);
 +
}
 +
.introContainer .bubbleList::-webkit-scrollbar {
 +
  background-color: transparent;
 +
  border-radius: 10px;
 +
  height: 8px;
 +
}
 +
.introContainer .bubbleList::-webkit-scrollbar-thumb {
 +
  background-color: #444444;
 +
  -webkit-box-shadow: 0px 0px 10px 0px #444444;
 +
  -moz-box-shadow: 0px 0px 10px 0px #444444;
 +
  box-shadow: 0px 0px 10px 0px #444444;
 +
  border-radius: 10px;
 
}
 
}
  

Revision as of 11:29, 29 July 2020

body, html { 

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

}

.introContainer { 

 flex-direction: column-reverse;
 justify-content: space-between;

} .introContainer .heading { 

 position: absolute;
 font-size: 6vh;
 top: 6vh;
 pointer-events: none;
 font-family: "ubuntu-bold";

} .introContainer .heading.other { 

 top: 8vh;

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

 .introContainer .heading {
   font-size: 7vw;
 }

} .introContainer::before { 

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

} .introContainer span { 

 position: absolute;
 color: #FAFAFC;
 top: 7vw;
 width: 60vw;
 height: 60vw;
 background-attachment: unset;
 overflow: hidden;
 font-weight: bold;

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

 .introContainer span {
   top: 7vh;
   width: 60vh;
   height: 60vh;
 }

} .introContainer span.novideo video { 

 display: none;

} .introContainer span video { 

 width: 100%;
 height: 100%;
 object-fit: cover;

} .introContainer button.introVideoPlay { 

 position: absolute;
 top: 52vw;
 left: 20vw;
 width: 64px;
 height: 64px;
 border: unset;
 display: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 50% 50%;
 background-repeat: no-repeat;
 background-position: 58% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;

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

 .introContainer button.introVideoPlay {
   top: 52vh;
   left: calc(50vw - 30vh);
 }

} .introContainer button.introVideoPlay.novideo { 

 display: block;

} .introContainer .memberDiv { 

 position: absolute;
 left: 62vw;
 top: 46vh;
 color: #FAFAFC;

} .introContainer .memberDiv div { 

 margin: 8px 0;

} .introContainer .memberDiv #memberName { 

 font-family: "lato-heavy";
 font-size: 3.25vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberRole { 

 font-size: 2.75vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberFunFact { 

 font-size: 2.5vh;
 font-weight: normal;

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

 .introContainer .memberDiv {
   left: 5vw;
 }

} .introContainer .bubbleList { 

 margin-bottom: 32px;
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: start;
 flex-wrap: nowrap;
 box-sizing: border-box;
 overflow-x: auto;
 overflow-y: hidden;

} .introContainer .bubbleList::after { 

 content: ".";
 color: transparent;

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

 .introContainer .bubbleList {
   padding: 16px;
   flex-wrap: wrap;
   overflow-x: hidden;
   justify-content: center;
 }
 .introContainer .bubbleList::after {
   content: unset;
 }

} .introContainer .bubbleList span { 

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-color: #6281EF;
 border-radius: 10vw;
 position: static;
 max-width: 9vh;
 max-height: 9vh;
 min-width: 9vh;
 min-height: 9vh;
 margin: 12px;
 transform: scale(1);
 transition: transform 0.3s;

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

 .introContainer .bubbleList span {
   width: 9vh;
   height: 9vh;
 }

} .introContainer .bubbleList span:hover { 

 transform: scale(1.2);

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

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

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

 background-color: #444444;
 -webkit-box-shadow: 0px 0px 10px 0px #444444;
 -moz-box-shadow: 0px 0px 10px 0px #444444;
 box-shadow: 0px 0px 10px 0px #444444;
 border-radius: 10px;

}

main { 

 margin-top: 0;
 padding-top: 50px;

}