Difference between revisions of "Template:Virginia/styles/indexCSS"

 
(9 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
   background-size: 30%;
 
   background-size: 30%;
 
   background-color: white;
 
   background-color: white;
−
}
+
   font-family: "THICCCBOI", THICCCBOI, sans-serif;
−
 
+
−
.mainContainer2{
+
−
   background-image: url("https://static.igem.org/mediawiki/2020/6/62/T--Virginia--images--tilelight.png");
+
−
  background-repeat: repeat round;
+
−
  background-size: 30%;
+
−
  background-color: #F2F2F2;
+
−
  color: white;
+
 
}
 
}
  
Line 23: Line 16:
 
   -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -webkit-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -webkit-transform: translateY(calc(0px - 1.3vw - 4vh));
−
  -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 
 
   border-width: 2vh;
 
   border-width: 2vh;
 
}
 
}
Line 98: Line 90:
 
#scrollCheckpoint{
 
#scrollCheckpoint{
 
   position: absolute;
 
   position: absolute;
−
   top: calc(min(96vh - 1.3vw,57vw));
+
   top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 
   transform: translateY(100%)
 
   transform: translateY(100%)
 +
}
 +
 +
#abstract{
 +
  position: absolute;
 +
  top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 +
  transform: translateY(calc(100% + 96vh - 1.3vw - 16px))
 +
}
 +
#video{
 +
  position: absolute;
 +
  top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 +
  transform: translateY(calc(200% + 146vh - 1.3vw - 16px))
 +
}
 +
.containerBlock{
 +
  height: calc(96vh - 1.3vw - 16px);
 +
  max-height: 57vw;
 +
  position: relative;
 +
  transform: translateY(calc(0px - 1.3vw - 4vh));
 +
  -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 +
  -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.leftBlock{
 +
  width: 50%;
 +
  max-width: 50%;
 +
  position: absolute;
 +
  height: 100%;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.rightBlock{
 +
  width: 50%;
 +
  position: absolute;
 +
  height: 100%;
 +
  right: 0px;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.block1{
 +
  background-image: url("https://static.igem.org/mediawiki/2020/9/9f/T--Virginia--images--tilewhite.png");
 +
  background-repeat: repeat round;
 +
  background-size: 30%;
 +
  background-color: white;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
.block2{
 +
  background-image: url("https://static.igem.org/mediawiki/2020/4/41/T--Virginia--images--tiledark.png");
 +
  background-repeat: repeat round;
 +
  background-size: 30%;
 +
  background-color: #3B3838;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.right1{
 +
  overflow: hidden;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.pathBG{
 +
  width:100%;
 +
  position: absolute;
 +
  bottom: 0px;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
@-webkit-keyframes bob2 {
 +
  0% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
  50% {
 +
    -webkit-transform: translateY(-1vh);
 +
    transform: translateY(-1vh);
 +
  }
 +
  100% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
}
 +
@keyframes bob2 {
 +
  0% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
  50% {
 +
    -webkit-transform: translateY(-1vh);
 +
    transform: translateY(-1vh);
 +
  }
 +
  100% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
}
 +
@-webkit-keyframes bob2-float {
 +
  100% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
}
 +
@keyframes bob2-float {
 +
  100% {
 +
    -webkit-transform: translateY(-2vh);
 +
    transform: translateY(-2vh);
 +
  }
 +
}
 +
 +
.hoverHolder{
 +
  display: grid;
 +
  width: 100%;
 +
  height: 100%;
 +
  justify-content: center;
 +
}
 +
 +
.indexBMC{
 +
  margin: auto;
 +
  display: block;
 +
  max-width: 70vh; 
 +
  max-width: min(100%, 70vh);
 +
  width: min(100%, 70vh);
 +
  z-index: 2;
 +
  -webkit-transform: perspective(1px) translateZ(0);
 +
  transform: perspective(1px) translateZ(0);
 +
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 +
  -webkit-animation-name: bob2-float, bob2;
 +
  animation-name: bob2-float, bob2;
 +
  -webkit-animation-duration: .3s, 1.5s;
 +
  animation-duration: .2s, 1.5s;
 +
  -webkit-animation-delay: 0s, .3s;
 +
  animation-delay: 0s, .3s;
 +
  -webkit-animation-timing-function: ease-out, ease-in-out;
 +
  animation-timing-function: ease-out, ease-in-out;
 +
  -webkit-animation-iteration-count: 1, infinite;
 +
  animation-iteration-count: 1, infinite;
 +
  -webkit-animation-fill-mode: forwards;
 +
  animation-fill-mode: forwards;
 +
  -webkit-animation-direction: normal, alternate;
 +
  animation-direction: normal, alternate;
 +
}
 +
 +
.left1 > div{
 +
  position: relative;
 +
  top: 50%;
 +
  transform: translateY(-50%);
 +
  -ms-transform: translateY(-50%);
 +
  -moz-transform: translateY(-50%);
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.left11{
 +
  width: 60%;
 +
  padding: 0px 0px 0px 20%;
 +
  vertical-align: center;
 +
  font-size: 2vw;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.left12{
 +
  width: 60%;
 +
  padding: 0px 0px 0px 20%;
 +
  vertical-align: center;
 +
  font-size: 3vw;
 +
  font-weight: bold;
 +
  margin-top: 0.5em;
 +
  margin-bottom: 0.5em;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.left13{
 +
  color: black;
 +
  width: 60%;
 +
  padding: 0px 0px 0px 20%;
 +
  font-size: 1.2vw;
 +
  vertical-align: center;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.left13:visited{
 +
  color: black
 +
}
 +
 +
.left2{
 +
  overflow: hidden;
 +
}
 +
 +
.labImg{
 +
  position: absolute;
 +
  bottom: 0px;
 +
  transform: translateY(20%);
 +
  width: 100%;
 +
}
 +
 +
.abstractSvgHolder{
 +
  position: relative;
 +
  width: 100%;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%,-50%);
 +
  -ms-transform: translate(-50%,-50%);
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
.abstractSvgHolder > svg{
 +
  width: 100%;
 +
}
 +
 +
.abstractHolder{
 +
  text-indent: 5ch;
 +
  position: relative;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%,-50%);
 +
  -ms-transform: translate(-50%,-50%);
 +
  max-height: 80%;
 +
  width: 80%;
 +
  color: white;
 +
  text-align: justify;
 +
  text-justify: inter-word;
 +
  font-size: 1.7vw;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
}
 +
 +
.abstractHolder > div{
 +
  text-indent: 0px;
 +
  line-height: normal;
 +
}
 +
 +
.block3{
 +
  position: relative;
 +
  background-repeat: repeat round;
 +
  background-size: 30%;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;;
 +
}
 +
 +
.promVid{
 +
  position: absolute;
 +
  left: 50%;
 +
  transform: translateX(-50%);
 +
  -ms-transform: translateX(-50%);
 +
  -moz-transform: translateX(-50%);
 +
  max-height: 100%;
 +
  border: none;
 +
}
 +
 +
.miniBlock{
 +
  border-top: solid #3B3838 4px;
 +
  height: calc(46vh - 1.3vw - 16px);
 +
  max-height: 28.5vw;
 +
  position: relative;
 +
  transform: translateY(calc(0px - 1.3vw - 4vh));
 +
  -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 +
  display: flex;
 +
  justify-content: space-between;
 +
}
 +
 +
.miniBlock > div{
 +
  height: 100%;
 +
  display: grid;
 +
  overflow: hidden;
 +
}
 +
 +
.miniBlock > div > img{
 +
  max-width: 20vw;
 +
  cursor: pointer;
 +
  margin: auto;
 
}
 
}

Latest revision as of 02:17, 28 October 2020

.mainContainer{ 

 background-image: url("T--Virginia--images--tilewhite.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: white;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.videoholder{ 

 height: 100vh;
 max-height: 57vw;
 overflow: hidden;
 margin: auto;
 background-color: white;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 -webkit-transform: translateY(calc(0px - 1.3vw - 4vh));
 border-width: 2vh;

}

.mainvideo{ 

 position: relative;
 top: 0;
 left: 50%;
 height: 100vh;
 max-height: 57vw;
 transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);

}

.downScrollHolder{ 

 position: relative;
 bottom: 0px;
 transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 display: flex;
 justify-content: center;
 width: 100%;
 padding-bottom: 3%;

}

.scrollDown{ 

 cursor: pointer;
 opacity: 0.58;
 transition: 0.3s;

}

.scrollDown:hover{ 

 opacity: 1

}

.downText{ 

 width: 100%;
 font-family: THICCCBOI;
 font-size: 2vw;
 font-weight: lighter;
 text-align: center;
 color: transparent;
 visibility: hidden;

}

@keyframes show { 

 from {visibility: transparent;}
 to {visibility: white;}

}

.textAppear{ 

 visibility: visible;
 color: white;
 animation-name: show;
 animation-duration: 1s;

}

.downArrow { 

 height: 5vh;
 max-height: 2.85vw;
 width: 5vh;
 max-width: 2.85vw; 
 border: solid white;
 border-width: 0 0.4vw 0.4vw 0;
 display: inline-block;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);

}

  1. scrollCheckpoint{
 position: absolute;
 top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 transform: translateY(100%)

}

  1. abstract{
 position: absolute;
 top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 transform: translateY(calc(100% + 96vh - 1.3vw - 16px))

}

  1. video{
 position: absolute;
 top: calc(min(96vh - 1.3vw - 16px,57vw - 16px));
 transform: translateY(calc(200% + 146vh - 1.3vw - 16px))

} .containerBlock{ 

 height: calc(96vh - 1.3vw - 16px);
 max-height: 57vw;
 position: relative;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.leftBlock{ 

 width: 50%;
 max-width: 50%;
 position: absolute;
 height: 100%;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.rightBlock{ 

 width: 50%;
 position: absolute;
 height: 100%;
 right: 0px;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.block1{ 

 background-image: url("T--Virginia--images--tilewhite.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: white;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

} .block2{ 

 background-image: url("T--Virginia--images--tiledark.png"); 
 background-repeat: repeat round;
 background-size: 30%;
 background-color: #3B3838;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.right1{ 

 overflow: hidden;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.pathBG{ 

 width:100%;
 position: absolute;
 bottom: 0px;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

@-webkit-keyframes bob2 { 

 0% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }
 50% {
   -webkit-transform: translateY(-1vh);
   transform: translateY(-1vh);
 }
 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @keyframes bob2 { 

 0% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }
 50% {
   -webkit-transform: translateY(-1vh);
   transform: translateY(-1vh);
 }
 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @-webkit-keyframes bob2-float { 

 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

} @keyframes bob2-float { 

 100% {
   -webkit-transform: translateY(-2vh);
   transform: translateY(-2vh);
 }

}

.hoverHolder{ 

 display: grid;
 width: 100%;
 height: 100%;
 justify-content: center;

}

.indexBMC{ 

 margin: auto;
 display: block;
 max-width: 70vh;  
 max-width: min(100%, 70vh);
 width: min(100%, 70vh);
 z-index: 2;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-animation-name: bob2-float, bob2;
 animation-name: bob2-float, bob2;
 -webkit-animation-duration: .3s, 1.5s;
 animation-duration: .2s, 1.5s;
 -webkit-animation-delay: 0s, .3s;
 animation-delay: 0s, .3s;
 -webkit-animation-timing-function: ease-out, ease-in-out;
 animation-timing-function: ease-out, ease-in-out;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-direction: normal, alternate;
 animation-direction: normal, alternate;

}

.left1 > div{ 

 position: relative;
 top: 50%;
 transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left11{ 

 width: 60%;
 padding: 0px 0px 0px 20%;
 vertical-align: center;
 font-size: 2vw;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left12{ 

 width: 60%;
 padding: 0px 0px 0px 20%;
 vertical-align: center;
 font-size: 3vw;
 font-weight: bold;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left13{ 

 color: black;
 width: 60%;
 padding: 0px 0px 0px 20%;
 font-size: 1.2vw;
 vertical-align: center;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.left13:visited{ 

 color: black

}

.left2{ 

 overflow: hidden;

}

.labImg{ 

 position: absolute;
 bottom: 0px;
 transform: translateY(20%);
 width: 100%;

}

.abstractSvgHolder{ 

 position: relative;
 width: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

} .abstractSvgHolder > svg{ 

 width: 100%;

}

.abstractHolder{ 

 text-indent: 5ch;
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 max-height: 80%;
 width: 80%;
 color: white;
 text-align: justify;
 text-justify: inter-word;
 font-size: 1.7vw;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;

}

.abstractHolder > div{ 

 text-indent: 0px;
 line-height: normal;

}

.block3{ 

 position: relative;
 background-repeat: repeat round;
 background-size: 30%;
 font-family: "THICCCBOI", THICCCBOI, sans-serif;;

}

.promVid{ 

 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 max-height: 100%;
 border: none;

}

.miniBlock{ 

 border-top: solid #3B3838 4px;
 height: calc(46vh - 1.3vw - 16px);
 max-height: 28.5vw;
 position: relative;
 transform: translateY(calc(0px - 1.3vw - 4vh));
 -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 font-family: "THICCCBOI", THICCCBOI, sans-serif;
 display: flex;
 justify-content: space-between;

}

.miniBlock > div{ 

 height: 100%;
 display: grid;
 overflow: hidden;

}

.miniBlock > div > img{ 

 max-width: 20vw;
 cursor: pointer;
 margin: auto;

}