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

Line 647: Line 647:
 
         -o-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
 
         -o-box-shadow: 0 0 20px 0 rgba(66,66,66,1);
 
             box-shadow: 0 0 20px 0 rgba(66,66,66,1);
 
             box-shadow: 0 0 20px 0 rgba(66,66,66,1);
−
}
 
−
 
−
 
−
/*---Example page----------------------------------------------------------------------------------*/
 
−
table.split-col {
 
−
    margin: auto;
 
−
    width: 95%;
 
−
}
 
−
table.split-col td {
 
−
    width: 50%;
 
−
}
 
−
pre code {
 
−
    color: #c7254e;
 
−
}
 
−
.landing{
 
−
  font-family: 'Baloo Bhaina', cursive;
 
−
  background-color: #404855;
 
−
  height: 80vh;
 
−
  padding-top: 5vh;
 
−
}
 
−
#circle1 {
 
−
  position: relative;
 
−
  right: 400px;
 
−
    width: 50px;
 
−
    height: 50px;
 
−
    -webkit-border-radius: 23px;
 
−
    -moz-border-radius: 23px;
 
−
    border-radius: 23px;
 
−
    background: #F9EC69;
 
−
  }
 
−
  #circle2 {
 
−
    position: relative;
 
−
    right: 450px;
 
−
    width: 50px;
 
−
    height: 49px;
 
−
    -webkit-border-radius: 30px;
 
−
    -moz-border-radius: 30px;
 
−
    border-radius: 30px;
 
−
    background: #F9EC69;
 
−
  }
 
−
  #circle3 {
 
−
  position: relative;
 
−
  right: 290px;
 
−
    width: 51px;
 
−
    height: 50px;
 
−
    -webkit-border-radius: 26px;
 
−
    -moz-border-radius: 26px;
 
−
    border-radius: 26px;
 
−
    background: #F9EC69;
 
−
  } 
 
−
  #circle4 {
 
−
  position: relative;
 
−
  left: 519px;
 
−
    width: 51px;
 
−
    height: 50px;
 
−
    -webkit-border-radius: 26px;
 
−
    -moz-border-radius: 26px;
 
−
    border-radius: 26px;
 
−
    background: #F9EC69;
 
−
  }
 
−
  #circle5 {
 
−
  position: relative;
 
−
  left: 300px;
 
−
    width: 51px;
 
−
    height: 50px;
 
−
    -webkit-border-radius: 26px;
 
−
    -moz-border-radius: 26px;
 
−
    border-radius: 26px;
 
−
    background: #F9EC69;
 
−
  }
 
−
  #circle6 {
 
−
  position: relative;
 
−
  left: 400px;
 
−
    width: 51px;
 
−
    height: 50px;
 
−
    -webkit-border-radius: 26px;
 
−
    -moz-border-radius: 26px;
 
−
    border-radius: 26px;
 
−
    background: #F9EC69;
 
−
  }
 
−
 
−
.landing #caption{
 
−
  position: relative;
 
−
  top: 35px;
 
−
  padding-left: 15px;
 
−
  color: #F5636D;
 
−
  font-size: 64px;
 
−
  font-style: underline;
 
−
}
 
−
.landing .btn-danger{
 
−
  margin-top: 3vh;
 
−
  transition: ease;
 
−
  transition-duration: 0.4s;
 
−
  border-color: #F5636D;
 
−
  color: white;
 
−
  background-color: #F5636D;
 
−
}
 
−
.landing .btn-danger:hover{
 
−
  transition: ease;
 
−
  transition-duration: 0.4s;
 
−
  border-color: #F5636D;
 
−
  color: #F5636D;
 
−
  background-color: rgba(0,0,0,0.2);
 
−
}
 
−
.project-logo{
 
−
  display: flex;
 
−
  flex: column;
 
−
}
 
−
 
−
.jumbotron .project-logo svg{
 
−
height: ;
 
−
}
 
−
 
−
.wcontent-box{
 
−
  margin: 7.5vh 12.5vw;
 
−
  box-shadow: 3px 7px 5px #888888;
 
−
  position:relative;
 
−
  height: auto;
 
−
  width: 75vw;
 
−
 
 
−
}
 
−
.wcontent-title{
 
−
background-color: #404855;
 
−
color: #F5636D;
 
−
font-size: 22px;
 
−
/*  color: white; */
 
−
padding: 15px;
 
−
/*  border-top-style: solid;
 
−
border-top-width: 3px;
 
−
border-top-color: dodgerblue; */
 
−
}
 
−
.wcontent{
 
−
  background-color: white;
 
−
  color: #141823;
 
−
  padding: 20px;
 
−
}
 
−
 
−
.wcontent-protocol{
 
−
  margin: 7.5vh 5vw;
 
−
  box-shadow: 3px 7px 5px #888888;
 
−
  position:relative;
 
−
  height: auto;
 
−
  width: 30vw;
 
−
 
 
−
}
 
−
.initial-bar{
 
−
  background-color:rgb(39, 40, 34);
 
−
  box-shadow: 0px 2px 3px #2a2e2f;
 
−
  height: 8vh; 
 
−
}
 
−
nav .button-toggle{
 
−
  background-color: white;
 
−
}
 
−
.navbar{
 
−
  display: inline-block;
 
−
}
 
−
.navbar-nav > li > a{
 
−
  padding-top: 18px;
 
−
  transition-duration: 0.1s;
 
−
  transition-timing-function: linear;
 
−
 
−
}
 
−
 
−
.navbar-toggle .icon-bar{
 
−
  background-color: white;
 
−
}
 
−
 
−
.initial-bar .navbar-nav > li > a:hover{
 
−
    background-color: rgba(0,0,0,0);
 
−
    border-top-style: solid;
 
−
    border-top-color: white;
 
−
    padding-top: 15px;
 
−
}
 
−
.initial-bar .navbar-nav > li > a:focus {
 
−
    background-color: rgba(0,0,0,0);
 
−
    border-top-style: solid;
 
−
    border-top-color: indianred;
 
−
    padding-top: 15px;
 
−
    color:indianred;
 
−
}
 
−
.protocol-page .wcontent-box{
 
−
  width: 50vw;
 
−
}
 
−
.wcontent-img33{
 
−
  width: 33%;
 
−
  display: inline-block;
 
−
  margin: auto;
 
−
}
 
−
.wcontent-img50{
 
−
  width: 49%;
 
−
  display: inline-block;
 
−
  margin: auto;
 
−
}
 
−
.wcontent-img-solo25{
 
−
  width: 25vw;
 
−
  display:block;
 
−
  margin: auto;
 
−
}
 
−
.wcontent-img-solo50{
 
−
  width: 50vw;
 
−
  display:block;
 
−
  margin: auto;
 
−
}
 
−
 
−
.precard{
 
−
  display:flex;
 
−
  flex-flow: row wrap;
 
−
  padding: 55px;
 
−
}
 
−
.team-card{
 
−
  position: relative;
 
−
  z-index: 1;
 
−
  margin: 3vw;
 
−
  width: 25vw;
 
−
}
 
−
.card-desc{
 
−
  transition-timing-function: linear;
 
−
  transition-duration: 1s;
 
−
  padding: 110px 50px 50px 50px;
 
−
  width: 100%;
 
−
  height: 450px;
 
−
  background-color: white;
 
−
}
 
−
.monster{
 
−
  padding-top: 20px;
 
−
  color:#F5636D;
 
−
  font-size: 24px;
 
−
  padding-left: 250px;
 
−
  padding-right: 15px;
 
−
  padding-bottom: 10px;
 
−
  background-color: #404855;
 
−
}
 
−
.person-program{
 
−
  color: #F5636D;
 
−
  font-size: 16px;
 
−
}
 
−
.person-labteam{
 
−
  color: #3f7f7f;
 
−
  font-size: 19px;
 
−
}
 
−
 
−
.person-desc{
 
−
  color: #777777;
 
−
  font-size: 14px;
 
−
}
 
−
.urinacircle{
 
−
  z-index: 2;
 
−
  position: absolute;
 
−
  top: -35px;
 
−
  margin-left: 15px;
 
−
  background-color: #cccccc;
 
−
  height: 200px;
 
−
  width: 200px;
 
−
  border-radius:50%;
 
−
}
 
−
.bigyou{
 
−
  transition-timing-function: linear;
 
−
  transition-duration: 1s;
 
−
  padding: 110px 50px 50px 50px;
 
−
  width: 100%;
 
−
  height: 450px;
 
−
  background-color: white;
 
−
}
 
−
 
−
.wcontent-box .wcontent-caption{
 
−
  margin-top: 2vh;
 
−
  margin-bottom: 2vh;
 
−
  display: block;
 
−
  text-align: center !important;
 
−
  color: #777777;
 
−
}
 
−
.wcontent-img-solo37{
 
−
  width: 37vw;
 
−
  display:block;
 
−
  margin: auto;
 
−
}
 
−
.img-train-5{
 
−
  width: 19%;
 
−
  display: inline-block;
 
−
  margin:auto;
 
−
}
 
−
 
−
.img-train-4{
 
−
  margin:2.5%;
 
−
  width: 19%;
 
−
  display: inline-block;
 
−
}
 
−
 
−
.paragraph-medium {
 
−
  font-size: 15px !important;
 
−
}
 
−
 
−
/* header-image and header-text are classes for making a somewhat opaque header with
 
−
text in its center and an image in the background. it adjusts size with the size of the window. */
 
−
 
−
.header-image {
 
−
  width: 100%;
 
−
  height:20vw;
 
−
  opacity:0.7;
 
−
  background-position: center center;
 
−
  background-size: cover;
 
−
}
 
−
 
−
.header-text {
 
−
  padding:5.5vw 5.5vw 5.5vw 5.5vw;
 
−
  font-size: 8vw;
 
−
  text-align:center;
 
−
  font-family:sans-serif;
 
−
}
 
−
 
−
.idkmakeityellow {
 
−
  background-color: #ffe86a;
 
−
}
 
−
 
−
.noalightyellow {
 
−
  background-color: #fff9d4;
 
−
}
 
−
 
−
.justmakeitlightorange {
 
−
  background-color: #ffaa30;
 
−
}
 
−
 
−
.bloodorangeisacolour {
 
−
  background-color: #f24a2c;
 
−
}
 
−
 
−
.nonpretentiousorange {
 
−
  background-color: #f15a24;
 
−
}
 
−
 
−
.itsnotpinkitssalmon {
 
−
  background-color: #F5C2C7;
 
−
}
 
−
 
−
.evenlighteryellow {
 
−
  background-color: #fdf9d2;
 
−
}
 
−
 
−
.pinkredorsomething {
 
−
  background-color: #F5636D;
 
−
}
 
−
 
−
#wrapper {
 
−
    height:100%;
 
−
    width: 100%;
 
−
    margin: 0 auto;
 
−
}
 
−
 
−
#footer {
 
−
  position:fixed;
 
−
  bottom:0;
 
−
  width:100%;
 
−
  height:60px;  /* Height of the footer */
 
−
  background:#6cf;
 
 
}
 
}
 
/*New Navbar settings*/
 
/*New Navbar settings*/
Line 1,153: Line 799:
 
   line-height: 50px;
 
   line-height: 50px;
 
   padding-left: 5%;
 
   padding-left: 5%;
−
   color: white;
+
   color: #23b593;
 
   font-size: 1.8rem;
 
   font-size: 1.8rem;
 
   border-top: 1px solid #f2f2f2;
 
   border-top: 1px solid #f2f2f2;
Line 1,442: Line 1,088:
  
  
 +
/*---Example page----------------------------------------------------------------------------------*/
 +
table.split-col {
 +
    margin: auto;
 +
    width: 95%;
 +
}
 +
table.split-col td {
 +
    width: 50%;
 +
}
 +
pre code {
 +
    color: #c7254e;
 +
}
 +
.landing{
 +
  font-family: 'Baloo Bhaina', cursive;
 +
  background-color: #404855;
 +
  height: 80vh;
 +
  padding-top: 5vh;
 +
}
 +
#circle1 {
 +
  position: relative;
 +
  right: 400px;
 +
    width: 50px;
 +
    height: 50px;
 +
    -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
    border-radius: 23px;
 +
    background: #F9EC69;
 +
  }
 +
  #circle2 {
 +
    position: relative;
 +
    right: 450px;
 +
    width: 50px;
 +
    height: 49px;
 +
    -webkit-border-radius: 30px;
 +
    -moz-border-radius: 30px;
 +
    border-radius: 30px;
 +
    background: #F9EC69;
 +
  }
 +
  #circle3 {
 +
  position: relative;
 +
  right: 290px;
 +
    width: 51px;
 +
    height: 50px;
 +
    -webkit-border-radius: 26px;
 +
    -moz-border-radius: 26px;
 +
    border-radius: 26px;
 +
    background: #F9EC69;
 +
  } 
 +
  #circle4 {
 +
  position: relative;
 +
  left: 519px;
 +
    width: 51px;
 +
    height: 50px;
 +
    -webkit-border-radius: 26px;
 +
    -moz-border-radius: 26px;
 +
    border-radius: 26px;
 +
    background: #F9EC69;
 +
  }
 +
  #circle5 {
 +
  position: relative;
 +
  left: 300px;
 +
    width: 51px;
 +
    height: 50px;
 +
    -webkit-border-radius: 26px;
 +
    -moz-border-radius: 26px;
 +
    border-radius: 26px;
 +
    background: #F9EC69;
 +
  }
 +
  #circle6 {
 +
  position: relative;
 +
  left: 400px;
 +
    width: 51px;
 +
    height: 50px;
 +
    -webkit-border-radius: 26px;
 +
    -moz-border-radius: 26px;
 +
    border-radius: 26px;
 +
    background: #F9EC69;
 +
  }
 +
 +
.landing #caption{
 +
  position: relative;
 +
  top: 35px;
 +
  padding-left: 15px;
 +
  color: #F5636D;
 +
  font-size: 64px;
 +
  font-style: underline;
 +
}
 +
.landing .btn-danger{
 +
  margin-top: 3vh;
 +
  transition: ease;
 +
  transition-duration: 0.4s;
 +
  border-color: #F5636D;
 +
  color: white;
 +
  background-color: #F5636D;
 +
}
 +
.landing .btn-danger:hover{
 +
  transition: ease;
 +
  transition-duration: 0.4s;
 +
  border-color: #F5636D;
 +
  color: #F5636D;
 +
  background-color: rgba(0,0,0,0.2);
 +
}
 +
.project-logo{
 +
  display: flex;
 +
  flex: column;
 +
}
 +
 +
.jumbotron .project-logo svg{
 +
height: ;
 +
}
 +
 +
.wcontent-box{
 +
  margin: 7.5vh 12.5vw;
 +
  box-shadow: 3px 7px 5px #888888;
 +
  position:relative;
 +
  height: auto;
 +
  width: 75vw;
 +
 
 +
}
 +
.wcontent-title{
 +
background-color: #404855;
 +
color: #F5636D;
 +
font-size: 22px;
 +
/*  color: white; */
 +
padding: 15px;
 +
/*  border-top-style: solid;
 +
border-top-width: 3px;
 +
border-top-color: dodgerblue; */
 +
}
 +
.wcontent{
 +
  background-color: white;
 +
  color: #141823;
 +
  padding: 20px;
 +
}
 +
 +
.wcontent-protocol{
 +
  margin: 7.5vh 5vw;
 +
  box-shadow: 3px 7px 5px #888888;
 +
  position:relative;
 +
  height: auto;
 +
  width: 30vw;
 +
 
 +
}
 +
.initial-bar{
 +
  background-color:rgb(39, 40, 34);
 +
  box-shadow: 0px 2px 3px #2a2e2f;
 +
  height: 8vh; 
 +
}
 +
nav .button-toggle{
 +
  background-color: white;
 +
}
 +
.navbar{
 +
  display: inline-block;
 +
}
 +
.navbar-nav > li > a{
 +
  padding-top: 18px;
 +
  transition-duration: 0.1s;
 +
  transition-timing-function: linear;
 +
 +
}
 +
 +
.navbar-toggle .icon-bar{
 +
  background-color: white;
 +
}
 +
 +
.initial-bar .navbar-nav > li > a:hover{
 +
    background-color: rgba(0,0,0,0);
 +
    border-top-style: solid;
 +
    border-top-color: white;
 +
    padding-top: 15px;
 +
}
 +
.initial-bar .navbar-nav > li > a:focus {
 +
    background-color: rgba(0,0,0,0);
 +
    border-top-style: solid;
 +
    border-top-color: indianred;
 +
    padding-top: 15px;
 +
    color:indianred;
 +
}
 +
.protocol-page .wcontent-box{
 +
  width: 50vw;
 +
}
 +
.wcontent-img33{
 +
  width: 33%;
 +
  display: inline-block;
 +
  margin: auto;
 +
}
 +
.wcontent-img50{
 +
  width: 49%;
 +
  display: inline-block;
 +
  margin: auto;
 +
}
 +
.wcontent-img-solo25{
 +
  width: 25vw;
 +
  display:block;
 +
  margin: auto;
 +
}
 +
.wcontent-img-solo50{
 +
  width: 50vw;
 +
  display:block;
 +
  margin: auto;
 +
}
 +
 +
.precard{
 +
  display:flex;
 +
  flex-flow: row wrap;
 +
  padding: 55px;
 +
}
 +
.team-card{
 +
  position: relative;
 +
  z-index: 1;
 +
  margin: 3vw;
 +
  width: 25vw;
 +
}
 +
.card-desc{
 +
  transition-timing-function: linear;
 +
  transition-duration: 1s;
 +
  padding: 110px 50px 50px 50px;
 +
  width: 100%;
 +
  height: 450px;
 +
  background-color: white;
 +
}
 +
.monster{
 +
  padding-top: 20px;
 +
  color:#F5636D;
 +
  font-size: 24px;
 +
  padding-left: 250px;
 +
  padding-right: 15px;
 +
  padding-bottom: 10px;
 +
  background-color: #404855;
 +
}
 +
.person-program{
 +
  color: #F5636D;
 +
  font-size: 16px;
 +
}
 +
.person-labteam{
 +
  color: #3f7f7f;
 +
  font-size: 19px;
 +
}
 +
 +
.person-desc{
 +
  color: #777777;
 +
  font-size: 14px;
 +
}
 +
.urinacircle{
 +
  z-index: 2;
 +
  position: absolute;
 +
  top: -35px;
 +
  margin-left: 15px;
 +
  background-color: #cccccc;
 +
  height: 200px;
 +
  width: 200px;
 +
  border-radius:50%;
 +
}
 +
.bigyou{
 +
  transition-timing-function: linear;
 +
  transition-duration: 1s;
 +
  padding: 110px 50px 50px 50px;
 +
  width: 100%;
 +
  height: 450px;
 +
  background-color: white;
 +
}
 +
 +
.wcontent-box .wcontent-caption{
 +
  margin-top: 2vh;
 +
  margin-bottom: 2vh;
 +
  display: block;
 +
  text-align: center !important;
 +
  color: #777777;
 +
}
 +
.wcontent-img-solo37{
 +
  width: 37vw;
 +
  display:block;
 +
  margin: auto;
 +
}
 +
.img-train-5{
 +
  width: 19%;
 +
  display: inline-block;
 +
  margin:auto;
 +
}
 +
 +
.img-train-4{
 +
  margin:2.5%;
 +
  width: 19%;
 +
  display: inline-block;
 +
}
 +
 +
.paragraph-medium {
 +
  font-size: 15px !important;
 +
}
 +
 +
/* header-image and header-text are classes for making a somewhat opaque header with
 +
text in its center and an image in the background. it adjusts size with the size of the window. */
 +
 +
.header-image {
 +
  width: 100%;
 +
  height:20vw;
 +
  opacity:0.7;
 +
  background-position: center center;
 +
  background-size: cover;
 +
}
 +
 +
.header-text {
 +
  padding:5.5vw 5.5vw 5.5vw 5.5vw;
 +
  font-size: 8vw;
 +
  text-align:center;
 +
  font-family:sans-serif;
 +
}
 +
 +
.idkmakeityellow {
 +
  background-color: #ffe86a;
 +
}
 +
 +
.noalightyellow {
 +
  background-color: #fff9d4;
 +
}
 +
 +
.justmakeitlightorange {
 +
  background-color: #ffaa30;
 +
}
 +
 +
.bloodorangeisacolour {
 +
  background-color: #f24a2c;
 +
}
 +
 +
.nonpretentiousorange {
 +
  background-color: #f15a24;
 +
}
 +
 +
.itsnotpinkitssalmon {
 +
  background-color: #F5C2C7;
 +
}
 +
 +
.evenlighteryellow {
 +
  background-color: #fdf9d2;
 +
}
 +
 +
.pinkredorsomething {
 +
  background-color: #F5636D;
 +
}
 +
 +
#wrapper {
 +
    height:100%;
 +
    width: 100%;
 +
    margin: 0 auto;
 +
}
 +
 +
#footer {
 +
  position:fixed;
 +
  bottom:0;
 +
  width:100%;
 +
  height:60px;  /* Height of the footer */
 +
  background:#6cf;
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 09:58, 15 October 2016