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

 
(37 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
Line 136: 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 149: Line 159:
 
   display:none;
 
   display:none;
 
   position:fixed;
 
   position:fixed;
−
   top: 125px;
+
   top: 100px;
 
   left: 85%;
 
   left: 85%;
 
   right: 0;
 
   right: 0;
Line 158: 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;
−
       justify-content: flex-start;
+
          justify-content: flex-start;
 +
  -webkit-box-align: start;
 +
       -ms-flex-align: start;
 +
          align-items: flex-start;
 
}
 
}
  
Line 175: 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 533: 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 548: 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 746: Line 789:
 
     width: 100%;
 
     width: 100%;
 
   }
 
   }
 +
#bodyContent .flex-row-3{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    display:flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
          }
 +
  #bodyContent .flex-row-3 div{
 +
      display:-webkit-box;
 +
      display:-ms-flexbox;
 +
      display:flex;
 +
      -webkit-box-orient: vertical;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: column;
 +
              flex-direction: column;
 +
      -webkit-box-pack: center;
 +
          -ms-flex-pack: center;
 +
              justify-content: center;
 +
      -webkit-box-align: center;
 +
          -ms-flex-align: center;
 +
              align-items: center;
 +
      width: 100%;
 +
    }
 +
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent .flex-row-2{
 
   #bodyContent .flex-row-2{
Line 759: Line 828:
 
   }
 
   }
 
   #bodyContent .flex-row-2 div{
 
   #bodyContent .flex-row-2 div{
−
     width:100%;
+
     width:50%;
 +
  }
 +
  #bodyContent .flex-row-2 img{
 +
    padding: 20px;
 +
  }
 +
  #bodyContent .flex-row-3{
 +
      -webkit-box-orient: horizontal;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: row;
 +
              flex-direction: row;
 +
    }
 +
  #bodyContent .flex-row-3 *{
 +
    -webkit-box-flex:1;
 +
        -ms-flex:1;
 +
            flex:1;
 +
  }
 +
  #bodyContent .flex-row-3 div{
 +
    width:33%;
 +
  }
 +
  #bodyContent .flex-row-3 img{
 +
    padding: 20px;
 
   }
 
   }
 
}
 
}
Line 783: Line 872:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent .tab {
 
   #bodyContent .tab {
 +
    width: 100%;
 
     display:-webkit-box;
 
     display:-webkit-box;
 
     display:-ms-flexbox;
 
     display:-ms-flexbox;
Line 854: Line 944:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent button.accordion {
 
   #bodyContent button.accordion {
−
    font-family: 'Quicksand', sans-serif;
+
      display:-webkit-box;
−
    font-size: 1.250rem;
+
      display:-ms-flexbox;
−
    text-transform:uppercase;
+
      display:flex;
−
    letter-spacing: 7px;
+
      -webkit-box-orient:vertical;
−
    margin: 3px;
+
      -webkit-box-direction:normal;
−
    border-radius: 10px;
+
          -ms-flex-direction:column;
−
    background-color: rgba(20, 147, 117, 0.125);
+
              flex-direction:column;
−
    cursor: pointer;
+
      -webkit-box-align:center;
−
    padding: 18px;
+
          -ms-flex-align:center;
−
    width: 100%;
+
              align-items:center;
−
    border: none;
+
      font-family: 'Quicksand', sans-serif;
−
    text-align: center;
+
      margin: 10px;
−
    outline: none;
+
      border-radius: 10px;
−
    -webkit-transition: all 0.5s ease;
+
      background-color: rgba(20, 147, 117, 0.125);
−
    -o-transition: all 0.5s ease;
+
      cursor: pointer;
−
    transition: all 0.5s ease;
+
      padding: 18px;
 +
      width: 100%;
 +
      border: none;
 +
      outline: none;
 +
      -webkit-transition: all 0.5s ease;
 +
      -o-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.active,
+
   #bodyContent button.accordion h3{
−
  #bodyContent button.accordion:hover {
+
      font-size: 1.250rem;
−
    background-color: rgba(20, 147, 117, 0.7);
+
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 
   }
 
   }
−
   #bodyContent button.accordion:after {
+
   #bodyContent button.accordion h4{
−
    content: '\002B';
+
      font-size: 1.250rem;
−
    color: #149375;
+
      text-transform:uppercase;
−
    float: right;
+
      letter-spacing: 7px;
−
    margin-left: 5px;
+
−
  }
+
−
  #bodyContent button.accordion.active:after {
+
−
    content: "\2212";
+
−
  }
+
−
  #bodyContent .panel {
+
−
    display: none;
+
−
    padding: 0 18px;
+
−
    background-color: white;
+
−
    max-height: 0;
+
−
    overflow: hidden;
+
−
    -webkit-transition: max-height 0.5s ease-out;
+
−
    -o-transition: max-height 0.5s ease-out;
+
−
    transition: max-height 0.5s ease-out;
+
 
   }
 
   }
  
−
   .panel.show {
+
   #bodyContent button.accordion:after{
−
     display: block;
+
     //content:"\25BE";
 +
    content:"v";
 +
    font-size:1.25rem;
 +
    font-weight:bold;
 +
    margin: 18px 0;
 +
    width:100%;
 +
    text-align:center;
 +
    background-color:white;
 +
    border-radius: 10px;
 
   }
 
   }
 +
 +
    #bodyContent button.accordion.active,
 +
    #bodyContent button.accordion:hover {
 +
      background-color: rgba(20, 147, 117, 0.7);
 +
    }
 +
 +
 +
  .panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    display:none;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
 +
  .panel.show {
 +
    display: block;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
  @-webkit-keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  @keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  #bodyContent .panel p {
 +
    font-size: 1.125rem;
 +
  }
 
   #bodyContent .panel p {
 
   #bodyContent .panel p {
 
     font-size: 1.125rem;
 
     font-size: 1.125rem;
 
   }
 
   }
 +
 
/************************************************************************
 
/************************************************************************
 
Tables
 
Tables
Line 1,016: 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,209: 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,275: 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,292: 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,307: 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,399: Line 1,566:
 
     }
 
     }
  
−
     #myowncanvas{
+
     #myCanvas{
 
       position:fixed;
 
       position:fixed;
 
       top: 0;
 
       top: 0;
Line 1,407: Line 1,574:
 
       z-index: -1;
 
       z-index: -1;
 
     }
 
     }
 +
  
 
</style>
 
</style>
 
</head>
 
</head>
 
</html>
 
</html>

Latest revision as of 20:31, 1 November 2017