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

 
(72 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 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,254: 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,341: Line 1,347:
 
   z-index: 1;
 
   z-index: 1;
 
   margin: 3vw;
 
   margin: 3vw;
−
   width: 25vw;
+
   /* width: 25vw; */
 
}
 
}
 
.card-desc{
 
.card-desc{
Line 1,355: 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,379: 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,503: 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,573: 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,655: Line 1,669:
 
}
 
}
 
.clickmepls{
 
.clickmepls{
 +
  position:relative;
 +
  top:5vh;
 +
  background-color: #404855;
 
   display: flex;
 
   display: flex;
 
   flex-flow: row;
 
   flex-flow: row;
Line 1,665: Line 1,682:
 
   background-color: #404855;
 
   background-color: #404855;
 
   margin: 5vh;
 
   margin: 5vh;
−
  box-shadow: 3px 7px 5px #888888;
 
 
   position:relative;
 
   position:relative;
 
   height: auto;
 
   height: auto;
Line 1,682: Line 1,698:
 
   width: 15vw;
 
   width: 15vw;
 
}
 
}
−
@media (max-width: 975px){
+
@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