Difference between revisions of "Template:Cologne-Duesseldorf/css"

 
(26 intermediate revisions by the same user not shown)
Line 137: Line 137:
 
     margin: auto;
 
     margin: auto;
 
     padding: 8% 0;
 
     padding: 8% 0;
 +
}
 +
 +
#bodyContent .frontpage{
 +
    width: 100%;
 +
    margin: 0% 0;
 +
    padding: 5%;
 +
    padding-top: 0%;
 +
    background: white;
 +
    box-shadow: 0 -20px 20px 20px white;
 
}
 
}
  
Line 150: Line 159:
 
   display:none;
 
   display:none;
 
   position:fixed;
 
   position:fixed;
−
   top: 125px;
+
   top: 100px;
 
   left: 85%;
 
   left: 85%;
 
   right: 0;
 
   right: 0;
Line 159: Line 168:
 
       -ms-flex-direction:column;
 
       -ms-flex-direction:column;
 
           flex-direction:column;
 
           flex-direction:column;
−
   //-ms-flex-pack:distribute;
+
   -webkit-box-pack: start;
−
      //justify-content:space-around;
+
      -ms-flex-pack: start;
−
      -webkit-box-pack: start;
+
          justify-content: flex-start;
−
          -ms-flex-pack: start;
+
  -webkit-box-align: start;
−
              justify-content: flex-start;
+
      -ms-flex-align: start;
 +
          align-items: flex-start;
 
}
 
}
  
Line 178: Line 188:
 
   position:relative;
 
   position:relative;
 
   text-align: left;}
 
   text-align: left;}
−
#bodyContent #ToC a[title=H1] { font-size:1.125rem;}
+
#bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;}
 
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
 
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
 
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
 
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
Line 536: Line 546:
 
   display: block;
 
   display: block;
 
   max-width: 100%;
 
   max-width: 100%;
 +
  padding: 20px;
 
   margin: 20px auto;
 
   margin: 20px auto;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent .floatleft{
 +
    float:left;
 +
    margin:0;
 +
  }
 +
 +
  #bodyContent .floatright{
 +
      float:right;
 +
      margin:0;
 +
  }
 +
  #bodyContent img.nomargin{
 +
    margin:0;
 +
  }
 +
 
}
 
}
  
Line 551: Line 578:
 
   max-width:100%;
 
   max-width:100%;
 
   margin: 5% auto;
 
   margin: 5% auto;
 +
}
 +
 +
#bodyContent .max-width {
 +
  width: 100%;
 +
}
 +
 +
#bodyContent .limited-height{
 +
    max-height: 500px;
 +
    width: auto;
 
}
 
}
  
 
#bodyContent .half-width{
 
#bodyContent .half-width{
 
   width:100%;
 
   width:100%;
−
  padding:10%;
 
 
   margin:5% auto;
 
   margin:5% auto;
 
}
 
}
 +
 +
#bodyContent .quarter-width{
 +
  width:100%;
 +
  margin:5% auto;
 +
}
 +
 +
 
@media (min-width: 1024px){
 
@media (min-width: 1024px){
 
   #bodyContent .half-width{
 
   #bodyContent .half-width{
 
     width:50%;
 
     width:50%;
−
    padding: 0;
 
 
   }
 
   }
 +
  #bodyContent .quarter-width{
 +
    width:25%;
 
}
 
}
−
 
−
#bodyContent .max-width {
 
−
  width: 100%;
 
−
  padding: 10%;
 
 
}
 
}
 +
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
   color: #149375;
 
   color: #149375;
Line 832: Line 872:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent .tab {
 
   #bodyContent .tab {
 +
    width: 100%;
 
     display:-webkit-box;
 
     display:-webkit-box;
 
     display:-ms-flexbox;
 
     display:-ms-flexbox;
Line 903: Line 944:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent button.accordion {
 
   #bodyContent button.accordion {
 +
      display:-webkit-box;
 +
      display:-ms-flexbox;
 
       display:flex;
 
       display:flex;
−
       flex-direction:column;
+
       -webkit-box-orient:vertical;
−
       align-items:center;
+
      -webkit-box-direction:normal;
 +
          -ms-flex-direction:column;
 +
              flex-direction:column;
 +
       -webkit-box-align:center;
 +
          -ms-flex-align:center;
 +
              align-items:center;
 
       font-family: 'Quicksand', sans-serif;
 
       font-family: 'Quicksand', sans-serif;
−
       margin: 3px;
+
       margin: 10px;
 
       border-radius: 10px;
 
       border-radius: 10px;
 
       background-color: rgba(20, 147, 117, 0.125);
 
       background-color: rgba(20, 147, 117, 0.125);
Line 919: Line 967:
 
       transition: all 0.5s ease;
 
       transition: all 0.5s ease;
 
     }
 
     }
 +
  #bodyContent button.accordion h2{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 +
  }
 +
  #bodyContent button.accordion h3{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 +
  }
 
   #bodyContent button.accordion h4{
 
   #bodyContent button.accordion h4{
 
       font-size: 1.250rem;
 
       font-size: 1.250rem;
Line 926: Line 984:
  
 
   #bodyContent button.accordion:after{
 
   #bodyContent button.accordion:after{
−
     content:"\25BE";
+
     //content:"\25BE";
−
     font-size:2rem;
+
    content:"v";
 +
     font-size:1.25rem;
 
     font-weight:bold;
 
     font-weight:bold;
−
     margin-top:10px;
+
     margin: 18px 0;
 
     width:100%;
 
     width:100%;
 
     text-align:center;
 
     text-align:center;
Line 1,097: Line 1,156:
 
   padding-right: 7px;
 
   padding-right: 7px;
 
}
 
}
 +
 +
#bodyContent ul.eric{
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
 +
#bodyContent ul.eric li{
 +
    text-indent: 0;
 +
}
 +
 +
 +
#bodyContent ul.eric li::before {
 +
    content: "";
 +
    color: #149375;
 +
    float: left;
 +
    padding-right: 10px;
 +
    display: block;
 +
    height: 32px;
 +
    width: 32px;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Cologne-Duesseldorf--check.jpeg);
 +
    background-repeat: no-repeat;
 +
    background-position: left center;
 +
    background-size: 26px;
 +
}
 +
 
#bodyContent ol li::before {
 
#bodyContent ol li::before {
 
   content: none;
 
   content: none;
Line 1,290: Line 1,374:
 
     -o-transition: opacity 2s linear;
 
     -o-transition: opacity 2s linear;
 
     transition: opacity 2s linear;
 
     transition: opacity 2s linear;
 +
    padding:0;
 
}
 
}
 +
  
 
#bodyContent .slider button {
 
#bodyContent .slider button {
Line 1,356: Line 1,442:
 
     border-radius: 50%;
 
     border-radius: 50%;
 
     border: 3px solid transparent;
 
     border: 3px solid transparent;
−
     border-top-color: #3498db;
+
     border-top-color: #0e6752;
  
 
     -webkit-animation: spin 2s linear infinite;
 
     -webkit-animation: spin 2s linear infinite;
Line 1,373: Line 1,459:
 
         border-radius: 50%;
 
         border-radius: 50%;
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
−
         border-top-color: #e74c3c;
+
         border-top-color: #149375;
  
 
         -webkit-animation: spin 3s linear infinite;
 
         -webkit-animation: spin 3s linear infinite;
Line 1,388: Line 1,474:
 
         border-radius: 50%;
 
         border-radius: 50%;
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
−
         border-top-color: #f9c922;
+
         border-top-color: #1ac19a;
  
 
         -webkit-animation: spin 1.5s linear infinite;
 
         -webkit-animation: spin 1.5s linear infinite;
Line 1,480: Line 1,566:
 
     }
 
     }
  
−
     #myowncanvas{
+
     #myCanvas{
 
       position:fixed;
 
       position:fixed;
 
       top: 0;
 
       top: 0;

Latest revision as of 20:31, 1 November 2017