Difference between revisions of "Template:ETH Zurich/index css"

Revision as of 19:03, 29 October 2017

main h1 {

   color: black;
   font-weight: bold;
   font-size: 24px;

}

main a {

   color: #181818;

}

main button {

   background-color: #d8d8d8;
   padding: 13px;
   font-size: 16px;
   border: none;
   letter-spacing: 2px;
   transition: all 0.3s ease 0s;
   text-align: center;
   color: #181818;
   text-transform: uppercase;

}

main button:hover {

   background: #ff7e5f;
   background-image: -webkit-linear-gradient(top, #ff7e5f, #fab682);
   background-image: -moz-linear-gradient(top, #ff7e5f, #fab682);
   background-image: -ms-linear-gradient(top, #ff7e5f, #fab682);
   background-image: -o-linear-gradient(top, #ff7e5f, #fab682);
   background-image: linear-gradient(to bottom, #ff7e5f, #fab682);
   text-decoration: none;
   padding: 10px;
   border: none;
   letter-spacing: 2px;
   text-transform: uppercase;

}

button a:link {

   color: #181818;
   font-size: 16px;
   text-decoration: none;
   text-transform: uppercase;

}

button a:visited{

   color: #181818;
   font-size: 16px;
   text-decoration: none;
   text-transform: uppercase;

}

button a:hover {

   text-decoration: none;
   color: #181818;

}

main p {

   font-size: 24px;
   line-height: 130%;

}

figure.banner {

   margin: auto;
   width: 90%;

}

div.banner {

   height:100vh;

}

main section {

   padding-bottom: 50px;

}

div.space {

   padding: 40px;

}

.vision > figure.EcN {

   float:left;
   width: 250px;
   padding-right: 80px;

}

.circuit > figure.andgate {

   float: right;
   width: 250px;
   padding-left: 80px;

}

.step > figure {

   float: right;
   width: 450px;

}

.step.invert > figure {

   float: left;
   width: 250px;

}

div.why {

   width: 100%

}

.step > a {

   display: block;
   margin: 0px;

}

.break > figure {

   margin-right: auto;
   margin-left: auto;
   width: 650px;

}

figure.process {

   width: 1200px;
   margin: auto;
   padding-top: 45px;

}

.drylab > figure.drylab {

   width: 220px;
   float: left;
   padding-right: 80px;
   padding-top: 20px;
   padding-bottom: 20px;

}

.wetlab > figure.wetlab {

   width: 150px;
   float: right;
   padding-left: 80px;

}

.goals > figure.goals {

   float:left;
   width: 320px;
   padding-right: 80px;
   padding-bottom: 100px;
   margin-top: 20px;

}

.HP > figure.HP {

   float: right;
   width: 300px;
   padding-left: 80px;

}

.team > figure.team {

   float:left;
   width: 450px;
   padding-right: 80px;
   margin-top: 20px;
   padding-bottom: 20px;

}

figure.scroll {

   -webkit-transition:all .3s ease-out;
   -moz-transition:all .3s ease-out;
   -ms-transition:all .3s ease-out;
   -o-transition:all .3s ease-out;
   transition:all .3s ease-out;

}

figure.scroll:hover {

   -webkit-transform:translate(0px,10px);
   -moz-transform:translate(0px,10px);
   -ms-transform:translate(0px,10px);
   -o-transform:translate(0px,10px);
   transform:translate(0px,10px);

}

.scroll-down-button {

   background-image: url('https://static.igem.org/mediawiki/2017/1/14/T--ETH_Zurich--Scroll.png') no-repeat center;
   margin: auto;
   display: block;
   width: 50px;
   padding-top: 80px;

}

@media screen and (min-width: 620px) {

   .step {/*
       align-items: center;
       flex-flow: row nowrap;
   */}
   .step.invert {/*
       flex-flow: row-reverse nowrap;
   */}

}

@@ Line 3: / Line 3: @@
      font-weight: bold;
      font-size: 24px;
-}
-#wrap {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-#wrap p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  color: rgba(255,255,255,.5);
-  font-size: 30px;
-  text-transform: uppercase;
-  letter-spacing: 5px;
-  text-align: center;
-}
-.ball {
-  pointer-events: none;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: gray;
-  animation: implode 1s ease-in-out;
-  animation-fill-mode: both;
-  opacity: .5;
-}
-@keyframes implode {
-% {transform: scale(0)}
 }
@@ Line 49: / Line 13: @@
      background-color: #d8d8d8;
      padding: 13px;
+    font-size: 16px;
      border: none;
      letter-spacing: 2px;
@@ Line 54: / Line 19: @@
      text-align: center;
      color: #181818;
+    text-transform: uppercase;
 }
 main button:hover {
-      background: #ff7e5f;
+    background: #ff7e5f;
-     background-image: -webkit-linear-gradient(top, #ff7e5f, #fab682);
+    background-image: -webkit-linear-gradient(top, #ff7e5f, #fab682);
-  background-image: -moz-linear-gradient(top, #ff7e5f, #fab682);
+    background-image: -moz-linear-gradient(top, #ff7e5f, #fab682);
-  background-image: -ms-linear-gradient(top, #ff7e5f, #fab682);
+    background-image: -ms-linear-gradient(top, #ff7e5f, #fab682);
-  background-image: -o-linear-gradient(top, #ff7e5f, #fab682);
+    background-image: -o-linear-gradient(top, #ff7e5f, #fab682);
-  background-image: linear-gradient(to bottom, #ff7e5f, #fab682);
+    background-image: linear-gradient(to bottom, #ff7e5f, #fab682);
-  text-decoration: none;
+    text-decoration: none;
      padding: 10px;
      border: none;
      letter-spacing: 2px;
+    text-transform: uppercase;
 }