Template:Team:Waterloo/CSS/baseWiki

From 2014.igem.org

(Difference between revisions)
(table styles++)
 
(48 intermediate revisions not shown)
Line 42: Line 42:
a{
a{
   text-decoration: none;
   text-decoration: none;
-
   color: #000;
+
   color: #002bb8;
}
}
li{
li{
   list-style: none;
   list-style: none;
   line-height: 18px;
   line-height: 18px;
 +
}
 +
ol li{
 +
  list-style:decimal;
}
}
table {
table {
Line 55: Line 58:
   font-size: 54px;
   font-size: 54px;
   font-weight: bold;
   font-weight: bold;
-
  font-variant: small-caps;
 
-
  color: #000000;
 
   text-align: center;
   text-align: center;
   margin: 20px 0px 0px 0px !important;
   margin: 20px 0px 0px 0px !important;
Line 78: Line 79:
/*Specific class or id elements*/
/*Specific class or id elements*/
.content {
.content {
-
   width:80%;
+
   width:65%;
   background: #F0F0F0;
   background: #F0F0F0;
   margin: auto;
   margin: auto;
Line 85: Line 86:
   font-size: 16px;
   font-size: 16px;
}
}
-
 
+
.floatRight {
-
div#imgBox{
+
  float: right;
 +
}
 +
.floatLeft {
 +
  float: left;
 +
}
 +
/* Images */
 +
div.imgBox{
   height: 500px;
   height: 500px;
   width: 70%;
   width: 70%;
Line 93: Line 100:
   margin-top: 30px;
   margin-top: 30px;
   background: #FFFFFF;
   background: #FFFFFF;
 +
}
 +
div.figureContainer {
 +
  text-align: center;
 +
  font-style: italic;
 +
  font-size: 0.8em;
 +
}
 +
img {
 +
  max-width: 100%;
 +
}
 +
img.icon {
 +
  width: 200px;
 +
  padding: 0px 8px;
 +
}
 +
img.smallIcon{
 +
  width: 100px;
 +
  padding: 0px 8px;
 +
}
 +
img.image70{
 +
  width: 70%;
 +
}
 +
img.equation {
 +
  width: 70%;
}
}
img#toTop{
img#toTop{
Line 142: Line 171:
/*Tabs*/
/*Tabs*/
-
.anchor{
+
.anchor {
-
   padding-top: 50px;
+
  /* when hyperlinking within page, to account for floating bar */
 +
   padding-top: 80px;
 +
  margin-bottom: -30px;
 +
  /* adjusted net 50px bottom padding? */
 +
  text-align: justify;
 +
}
 +
.anchor:first-child {
 +
    padding-top: 0px;
}
}
ul.tabs
ul.tabs
Line 194: Line 230:
{
{
text-decoration: none;
text-decoration: none;
-
font-weight: bold;
 
background: #9EE0F3;
background: #9EE0F3;
}
}
Line 202: Line 237:
position: relative;
position: relative;
top: 0px;
top: 0px;
-
font-weight:bold;
 
background: #71CCE6;
background: #71CCE6;
color: dimgrey;
color: dimgrey;
Line 258: Line 292:
   position: absolute;
   position: absolute;
   margin-left: 35%;
   margin-left: 35%;
-
   margin-top: -170px;
+
   margin-top: -177px;
}
}
Line 264: Line 298:
   position: absolute;
   position: absolute;
   margin-left: 55%;
   margin-left: 55%;
-
   margin-top: -170px;
+
   margin-top: -177px;
}
}
Line 270: Line 304:
   position: absolute;
   position: absolute;
   margin-left: 75%;
   margin-left: 75%;
-
   margin-top: -170px;
+
   margin-top: -177px;
}
}
Line 298: Line 332:
.icons{
.icons{
   height: 30px;
   height: 30px;
 +
}
 +
.half-column {
 +
  width: 46%;
 +
  padding: 2%;
 +
}
 +
.blueOnGrey {
 +
  background: #333;
 +
  padding: 15px;
 +
  color:#71CCE6;
 +
}
 +
.blueOnGrey h1, .blueOnGrey h2, .blueOnGrey h3, .blueOnGrey h4 {
 +
  color:#71CCE6;
 +
}
 +
.centerUpper {
 +
  text-transform: uppercase;
 +
  text-align: center;
 +
}
 +
/* Lists on mathbook page */
 +
#MathBook ul li, #Acknowledgements ul li {
 +
  list-style-type: circle;
 +
}
 +
#MathBook ol li,  #Acknowledgements ol li {
 +
  list-style-type: upper-roman;
}
}
/* Tables */
/* Tables */
Line 315: Line 372:
}
}
-
/* Special Styles for Tablet Size & Below */
+
/* Special Styles Depending on Screen Size */
-
@media screen and (max-width: 768px) {
+
@media screen and (max-width: 900px) { /* above tablet size */
 +
  .content {
 +
    width: 70%;
 +
  }
 +
.half-column {
 +
    width: 100%;
 +
    padding: 5px;
 +
    float: none;
 +
  }
 +
}
 +
@media screen and (max-width: 768px) { /* tablet size and below */
     .content {
     .content {
       font-size: 14px;
       font-size: 14px;
 +
    }
 +
    h1 {
 +
      font-size: 40px;
     }
     }
}
}
-
/* Special Styles for Tablet Size Only */
+
@media screen and (max-width: 768px) and (min-width: 480px) { /* tablet size only */
-
@media screen and (max-width: 768px) and (min-width: 480px) {
+
  .content {
 +
    width: 80%;
 +
  }
}
}
-
/* Special Styles for Smartphones */
+
@media screen and (max-width : 480px) { */ smartphones */
-
@media screen and (max-width : 480px) {
+
     h1 {
-
     .content h1 {
+
       font-size: 30px;
-
       font-size: 35px;
+
    }
 +
    .content {
 +
      width: 100%;
     }
     }
}
}
</style>
</style>
</html>
</html>

Latest revision as of 03:27, 18 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Waterloo/CSS/baseWiki"