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

Line 100: Line 100:
 
   -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -ms-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
 
   -moz-transform: translateY(calc(0px - 1.3vw - 4vh));
   font-family: "THICCCBOI", THICCCBOI;
+
   font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 108: Line 108:
 
   position: absolute;
 
   position: absolute;
 
   height: 100%;
 
   height: 100%;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
.containerBlock > div.rightBlock{
+
.rightBlock{
 
   width: 50%;
 
   width: 50%;
 
   position: absolute;
 
   position: absolute;
 
   height: 100%;
 
   height: 100%;
 
   right: 0px;
 
   right: 0px;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 122: Line 124:
 
   background-size: 30%;
 
   background-size: 30%;
 
   background-color: white;
 
   background-color: white;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
 
.block2{
 
.block2{
Line 128: Line 131:
 
   background-size: 30%;
 
   background-size: 30%;
 
   background-color: white;
 
   background-color: white;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
 
.right1{
 
.right1{
 
   overflow: hidden;
 
   overflow: hidden;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 138: Line 143:
 
   position: absolute;
 
   position: absolute;
 
   bottom: 0px;
 
   bottom: 0px;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 220: Line 226:
 
   -ms-transform: translateY(-50%);
 
   -ms-transform: translateY(-50%);
 
   -moz-transform: translateY(-50%);
 
   -moz-transform: translateY(-50%);
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 227: Line 234:
 
   vertical-align: center;
 
   vertical-align: center;
 
   font-size: 2vw;
 
   font-size: 2vw;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 237: Line 245:
 
   margin-top: 0.5em;
 
   margin-top: 0.5em;
 
   margin-bottom: 0.5em;
 
   margin-bottom: 0.5em;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 245: Line 254:
 
   font-size: 1.2vw;
 
   font-size: 1.2vw;
 
   vertical-align: center;
 
   vertical-align: center;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
  
Line 269: Line 279:
 
   transform: translate(-50%,-50%);
 
   transform: translate(-50%,-50%);
 
   -ms-transform: translate(-50%,-50%);
 
   -ms-transform: translate(-50%,-50%);
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}
 
.abstractSvgHolder > svg{
 
.abstractSvgHolder > svg{
Line 287: Line 298:
 
   text-justify: inter-word;
 
   text-justify: inter-word;
 
   font-size: 1.7vw;
 
   font-size: 1.7vw;
 +
  font-family: "THICCCBOI", THICCCBOI, sans-serif;
 
}
 
}

Revision as of 20:11, 27 October 2020

.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));
 -moz-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))

}

.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: white;
 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;

}