Difference between revisions of "Template:Waterloo/style.css"

 
(96 intermediate revisions by 3 users not shown)
Line 26: Line 26:
 
body{
 
body{
 
   background-image: url(https://static.igem.org/mediawiki/2016/5/51/T--Waterloo--Yeast.jpg);
 
   background-image: url(https://static.igem.org/mediawiki/2016/5/51/T--Waterloo--Yeast.jpg);
−
   background-repeat: repeat-y;
+
   /* background-repeat: repeat-y; */
 +
  background-size: cover;
 
}
 
}
 
body::after{
 
body::after{
Line 250: Line 251:
 
footer {
 
footer {
 
   bottom: 0;
 
   bottom: 0;
 +
  clear: both;
 +
  position: relative;
 +
  /*z-index: 10;*/
 
   width: 100%;
 
   width: 100%;
 
   padding: 0;
 
   padding: 0;
Line 676: Line 680:
 
   transition: transform .5s, -webkit-transform .5s;
 
   transition: transform .5s, -webkit-transform .5s;
 
   border-bottom-style: solid;
 
   border-bottom-style: solid;
−
   border-bottom-width: 4px;
+
   border-bottom-width: 6px;
 
   border-bottom-color: #F5636D
 
   border-bottom-color: #F5636D
 
}
 
}
Line 890: Line 894:
 
   clear: both;
 
   clear: both;
 
   width: 100%;
 
   width: 100%;
−
   height: 50px;
+
   height: 1.95vw;
 
   background-color: white;
 
   background-color: white;
 
   /* Force Hardware Acceleration */
 
   /* Force Hardware Acceleration */
Line 909: Line 913:
 
   right: 0;
 
   right: 0;
 
   height: 100%;
 
   height: 100%;
−
   width: 35px;
+
   width: 1.365vw;
 
   background: transparent;
 
   background: transparent;
 
   background: -webkit-linear-gradient(right, #25283D, rgba(37, 40, 61, 0));
 
   background: -webkit-linear-gradient(right, #25283D, rgba(37, 40, 61, 0));
Line 930: Line 934:
 
   display: flex;
 
   display: flex;
 
   padding: 0 5%;
 
   padding: 0 5%;
−
   overflow-x: auto;
+
   /*overflow-x: auto;
−
   overflow-y: hidden;
+
   overflow-y: hidden;*/
 
   -webkit-overflow-scrolling: touch;
 
   -webkit-overflow-scrolling: touch;
 
}
 
}
Line 962: Line 966:
 
@media only screen and (min-width: 1024px) {
 
@media only screen and (min-width: 1024px) {
 
   .cd-secondary-nav {
 
   .cd-secondary-nav {
−
     height: 70px;
+
     height: auto;
 
     overflow: visible;
 
     overflow: visible;
 
   }
 
   }
Line 1,122: Line 1,126:
 
   font-family: 'Ubuntu', sans-serif;
 
   font-family: 'Ubuntu', sans-serif;
 
   background-color: #404855;
 
   background-color: #404855;
−
  height: 82vh;
 
 
   padding: 15vh;
 
   padding: 15vh;
 
   margin-bottom: -2vh;
 
   margin-bottom: -2vh;
Line 1,135: Line 1,138:
 
   position: relative;
 
   position: relative;
 
     right: 3vw;
 
     right: 3vw;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }
 
   }
Line 1,145: Line 1,148:
 
     position: relative;
 
     position: relative;
 
     right: 11vw;
 
     right: 11vw;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }
 
   }
Line 1,155: Line 1,158:
 
   position: relative;
 
   position: relative;
 
   left: 3vw;
 
   left: 3vw;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }   
 
   }   
Line 1,165: Line 1,168:
 
   position: relative;
 
   position: relative;
 
   left: 7vw;
 
   left: 7vw;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }
 
   }
 
   #circle5 {
 
   #circle5 {
 
   position: relative;
 
   position: relative;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }
 
   }
Line 1,184: Line 1,187:
 
   position: relative;
 
   position: relative;
 
     left: 14vw;
 
     left: 14vw;
−
     width: 6vw;
+
     width: 4vw;
−
     height: 6vw;
+
     height: 4vw;
−
     -webkit-border-radius: 6vw;
+
     -webkit-border-radius: 50%;
−
     -moz-border-radius: 6vw;
+
     -moz-border-radius: 50%;
−
     border-radius: 6vw;
+
     border-radius: 50%;
 
     background: #F9EC69;
 
     background: #F9EC69;
 
   }
 
   }
Line 1,198: Line 1,201:
 
   padding-left: 15px;
 
   padding-left: 15px;
 
   color: #F5636D;
 
   color: #F5636D;
−
   font-size: 3.875em;
+
   font-size: 4vw;
 
   font-style: underline;
 
   font-style: underline;
 
}
 
}
 
.landing #title {
 
.landing #title {
−
   font-size: 1.375em;
+
  bottom: 5vw;
 +
   font-size: 2vw;
 
   color: #F5636D;
 
   color: #F5636D;
 
   font-weight: bold;
 
   font-weight: bold;
Line 1,227: Line 1,231:
 
   align-items: center;
 
   align-items: center;
 
   justify-content: center;
 
   justify-content: center;
 +
  font-size: ;
 +
}
 +
.project-logo svg{
 +
  width: 30vw;
 
}
 
}
−
 
 
.wcontent-box{
 
.wcontent-box{
 
   margin: 7.5vh 12.5vw;
 
   margin: 7.5vh 12.5vw;
Line 1,243: Line 1,250:
 
  color: #F5636D;
 
  color: #F5636D;
 
  font-size: 28px;
 
  font-size: 28px;
−
 
 
  padding: 15px;
 
  padding: 15px;
 
}
 
}
Line 1,252: Line 1,258:
 
   padding: 40px;
 
   padding: 40px;
 
}
 
}
 +
 
.wcontent p{
 
.wcontent p{
−
   font-size: 14px !important;
+
  line-height: 2;
 +
   font-size: 1.7rem !important;
 
   font-family: 'Ubuntu', sans-serif !important;
 
   font-family: 'Ubuntu', sans-serif !important;
 
}
 
}
Line 1,339: Line 1,347:
 
   z-index: 1;
 
   z-index: 1;
 
   margin: 3vw;
 
   margin: 3vw;
−
   width: 25vw;
+
   /* width: 25vw; */
 
}
 
}
 
.card-desc{
 
.card-desc{
Line 1,353: Line 1,361:
 
   color:#F5636D;
 
   color:#F5636D;
 
   font-size: 24px;
 
   font-size: 24px;
−
   padding-left: 250px;
+
   padding-left: 75%;
 
   padding-right: 15px;
 
   padding-right: 15px;
 
   padding-bottom: 10px;
 
   padding-bottom: 10px;
 
   background-color: #404855;
 
   background-color: #404855;
 +
}
 +
 +
.monster p {
 +
  font-size: 1.5rem;
 
}
 
}
 
.person-program{
 
.person-program{
Line 1,377: Line 1,389:
 
   margin-left: 15px;
 
   margin-left: 15px;
 
   background-color: #cccccc;
 
   background-color: #cccccc;
−
   height: 200px;
+
   width: 60%;
−
   width: 200px;
+
   max-width: 200px;
 +
  height: 0px;
 +
  max-height: 200px;
 
   border-radius:50%;
 
   border-radius:50%;
 
}
 
}
Line 1,501: Line 1,515:
 
.yeastpan {
 
.yeastpan {
 
   position: relative;
 
   position: relative;
−
   height:90vh;
+
   height:30vh;
 
   width:100%;
 
   width:100%;
 
   opacity:0.7;
 
   opacity:0.7;
 
   background: black url(https://static.igem.org/mediawiki/2016/5/51/T--Waterloo--Yeast.jpg);
 
   background: black url(https://static.igem.org/mediawiki/2016/5/51/T--Waterloo--Yeast.jpg);
 
   background-size: 200%;
 
   background-size: 200%;
 +
  display: flex;
 +
  align-items: center;
 
   animation: panning 50s infinite linear;
 
   animation: panning 50s infinite linear;
 
}
 
}
Line 1,571: Line 1,587:
 
   padding-top: 3vh;
 
   padding-top: 3vh;
 
   padding-bottom: 3vh;
 
   padding-bottom: 3vh;
−
   padding-left: 15vw;
+
   padding-left: 3vw;
 
   display: flex;
 
   display: flex;
 
   flex-flow: column;
 
   flex-flow: column;
Line 1,652: Line 1,668:
 
   font-size: 14px;
 
   font-size: 14px;
 
}
 
}
 +
.clickmepls{
 +
  position:relative;
 +
  top:5vh;
 +
  background-color: #404855;
 +
  display: flex;
 +
  flex-flow: row;
 +
  justify-content: center
 +
}
 +
.medal{
 +
  position: relative;
 +
  align-items: center;
 +
  padding: 10vh 2vw 5vh 2vw;
 +
  background-color: #404855;
 +
  margin: 5vh;
 +
  position:relative;
 +
  height: auto;
 +
  width: 20vw ;
 +
 +
}
 +
.medal .wcontent-title{
 +
  position: absolute;
 +
  width: 100%;
 +
  background-color: white;
 +
  top: 0px;
 +
  left: 0px;
 +
  right: 0px;
 +
}
 +
.medal img{
 +
  width: 15vw;
 +
}
 +
@media (max-width: 976px){
 +
.landing #caption{
 +
    position: absolute;
 +
    top: -10vh;
 +
    right:0px;
 +
    left:0px;
 +
  }
 +
 
 +
}
 +
 +
.sticker {
 +
    position:fixed;
 +
    top:18vh;
 +
    right:2vw;
 +
}
 +
 +
#cd-navigation {
 +
  list-style: none;
 +
  margin: 0px;
 +
}
 +
 +
.secondary-nav {
 +
  list-style: none;
 +
}
 +
 +
@media only screen and (max-width: 1023px){
 +
  .mobile-menu {
 +
      background: #373B40 !important;
 +
  }
 +
 +
  .cd-secondary-nav {
 +
      display: none !important;
 +
  }
 +
 +
  ul.secondary-nav{
 +
      display: none !important;
 +
      visibility: hidden;
 +
  }
 +
 +
    #cd-navigation {
 +
      height: calc(100vh - 80px);
 +
      height: -moz-calc(100vh - 80px);
 +
      height: -o-calc(100vh - 80px);
 +
      height: -webkit-calc(100vh - 80px);
 +
      overflow-y: scroll;
 +
    }
 +
 +
  #cd-navigation li.show-secondary-nav > ul.secondary-nav{
 +
      display: block !important;
 +
      visibility: visible !important;
 +
  }
 +
   
 +
  .cd-primary-nav > ul ul a,
 +
  .cd-primary-nav > ul ul a:hover{
 +
      border-top: none;
 +
  }
 +
   
 +
  .cd-auto-hide-header.nav-open .nav-trigger em::before ,
 +
  .cd-auto-hide-header.nav-open .nav-trigger em::after{
 +
      background-color: #fff
 +
  }
 +
   
 +
  .cd-auto-hide-header .nav-trigger em::before,
 +
  .cd-auto-hide-header .nav-trigger em::after,
 +
  .cd-auto-hide-header .nav-trigger em{
 +
      background-color: #fff;
 +
  }
 +
   
 +
  .cd-auto-hide-header .nav-trigger{
 +
      color: #fff
 +
  }
 +
}
 +
 +
@media only screen and (min-width: 1024px){
 +
ul.secondary-nav{
 +
display: none !important;
 +
visibility: hidden !important;
 +
}
 +
}
 +
 +
.labsticker{
 +
  position: fixed;
 +
  top: 42vw;
 +
  left: 2vw;
 +
  background-color: #2590FF;
 +
  border-radius: 50%;
 +
  color: black;
 +
  height: 5vw;
 +
  width: 5vw;
 +
  font-size: .76vw;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  text-align: center;
 +
  font-weight: bold;
 +
  font-family: "Ubuntu";
 +
}
 +
.mathsticker{
 +
  position: fixed;
 +
  background-color: #FF2590;
 +
border-radius: 50%;
 +
  color: black;
 +
  top: 36vw;
 +
  left: 2vw;
 +
  height: 5vw;
 +
  width: 5vw;
 +
  font-size: .76vw;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  text-align: center;
 +
  font-weight: bold;
 +
  font-family: "Ubuntu";
 +
}
 +
.pnpsticker{
 +
  position: fixed;
 +
  background-color: #90ff25;
 +
border-radius: 50%;
 +
  color: black;
 +
  height: 5vw;
 +
  width: 5vw;
 +
  top: 30vw;
 +
  left: 2vw;
 +
  font-size: .76vw;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  text-align: center;
 +
  font-weight: bold;
 +
  font-family: "Ubuntu";
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 04:59, 6 November 2016