Difference between revisions of "Team:XMU-China/css/interlab"

(Created page with ".header { -moz-box-shadow: 0px 3px 10px #24366D; -webkit-box-shadow: 0px 3px 10px #24366D; box-shadow: 0px 3px 10px #24366D; } .description_banner { margin: 0...")
 
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.header {
 
−
    -moz-box-shadow: 0px 3px 10px #24366D;
 
−
    -webkit-box-shadow: 0px 3px 10px #24366D;
 
−
    box-shadow: 0px 3px 10px #24366D;
 
−
}
 
−
 
−
.description_banner {
 
−
    margin: 0 25vw;
 
−
    position: relative;
 
−
    width: 50vw;
 
−
    margin-top: 6rem;
 
−
    height: 100%;
 
−
    background-size: 100%;
 
−
    background-repeat: no-repeat;
 
−
    text-align: center;
 
−
    background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--XMU-China--description_headline.png);
 
−
 
−
}
 
−
 
−
.description_banner>.word {
 
−
    font-size: 3vw;
 
−
    padding: 4vw 0vw;
 
−
    line-height: 3vw;
 
−
    color: white;
 
−
    font-weight: bolder;
 
−
}
 
−
 
−
@media screen and (max-width: 768px) {
 
−
    .description_banner>.word {
 
−
        font-size: 5vw;
 
−
 
−
    }
 
−
 
−
    .description_banner {
 
−
        width: 90VW;
 
−
        margin: 5rem 5vw 0;
 
−
    }
 
−
 
−
    .description_banner>.word {
 
−
        padding: 8vw 0vw;
 
−
    }
 
−
}
 
−
 
−
@media screen and (min-width: 768px) and (max-width: 89.9375rem) {
 
−
    .description_banner {
 
−
        width: 60vw;
 
−
        margin: 6rem 20vw 0;
 
−
    }
 
−
 
−
    .description_banner>.word {
 
−
        padding: 5vw 0vw;
 
−
    }
 
−
}
 
−
 
−
@media screen and (min-width: 90rem) {}
 
−
 
−
.main {
 
−
    margin: 0 15vw 5rem;
 
−
    width: 70vw;
 
−
    text-align: left;
 
−
}
 
−
 
−
.headline {
 
−
    font-size: 2vw;
 
−
    color: #1d2087;
 
−
    margin-bottom: 1vw;
 
−
    padding-top: 5rem;
 
−
}
 
−
 
−
.main p {
 
−
    color: #000;
 
−
    font-size: 1.2rem;
 
−
    text-indent: 2.4rem;
 
−
    font-weight: normal;
 
−
    font-family: "Times New Roman";
 
−
    line-height: 2rem;
 
−
    margin-bottom: 0.6vw;
 
−
}
 
−
.main h1,
 
−
.main h2,
 
−
.main h3{
 
−
    font-family:"Microsoft YaHei";
 
−
}
 
−
.main h1{
 
−
    margin: 0.8vw 0 1vw;
 
−
}
 
−
.main h2{
 
−
    font-size: 1.2rem;
 
−
    font-weight: bolder;
 
−
}
 
−
.main h3{
 
−
    font-size: 1.1rem;
 
−
   
 
−
}
 
−
.main h4{
 
−
    font-size: 1.05rem;
 
−
   
 
−
}
 
−
.F1>img {
 
−
    width: 60vw;
 
−
    margin: 1vw 5vw;
 
−
}
 
−
 
−
.F2>img {
 
−
    width: 50vw;
 
−
    margin: 1vw 10vw;
 
−
}
 
−
 
−
.F3>img {
 
−
    width: 40vw;
 
−
    margin: 1vw 15vw;
 
−
}
 
−
 
−
.F4>img {
 
−
    width: 30vw;
 
−
    margin: 1vw 20vw;
 
−
}
 
−
 
−
.F1,
 
−
.F2,
 
−
.F3,
 
−
.F4 {
 
−
    text-indent: 0 !important;
 
−
    margin-bottom: 0!important;
 
−
}
 
−
 
−
.Figure_word {
 
−
    font-size: 1rem !important;
 
−
    text-align: center !important;
 
−
    text-indent: 0 !important;
 
−
}
 
−
 
−
.reference+p,
 
−
.headline+p,
 
−
h2+p,
 
−
h3+p {
 
−
    text-indent: 0 !important;
 
−
}
 
−
 
−
@media screen and (max-width: 769px) {
 
−
    .headline {
 
−
        font-size: 1.39rem;
 
−
        padding-top: 1rem;
 
−
    }
 
−
 
−
    .main p {
 
−
        font-size: 0.9rem;
 
−
        text-indent: 1.8rem;
 
−
        line-height: 1.5rem;
 
−
    }
 
−
 
−
    .F1>img {
 
−
        width: 85vw;
 
−
        margin: 1vw 0vw;
 
−
    }
 
−
 
−
    .F2>img {
 
−
        width: 95vw;
 
−
        margin: 1vw -5vw;
 
−
    }
 
−
 
−
    .F3>img {
 
−
        width: 85vw;
 
−
        margin: 1vw 0vw;
 
−
    }
 
−
 
−
    .F4>img {
 
−
        width: 50vw;
 
−
        margin: 1vw 17.5vw;
 
−
    }
 
−
 
−
    .main {
 
−
        width: 85vw;
 
−
        margin: 0 7.5vw 5rem;
 
−
    }
 
−
 
−
    #Cell_Measurement h1,
 
−
    #Colony_Forming_Units h1,
 
−
    #Experience_and_Discussion h1,
 
−
    #Provenance h1,
 
−
    #Reference h1 {
 
−
        font-size: 1rem;
 
−
    }
 
−
 
−
 
−
}
 
−
 
−
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
 
−
    .headline {
 
−
        font-size: 1.6rem;
 
−
        margin-bottom: 1vw;
 
−
    }
 
−
 
−
    .main p {}
 
−
}
 
−
 
−
@media screen and (min-width: 90rem) {}
 
−
 
 
.Quick-navigation {
 
.Quick-navigation {
 
     position: fixed;
 
     position: fixed;
Line 202: Line 4:
 
     margin: 0;
 
     margin: 0;
 
     top: 20%;
 
     top: 20%;
−
     left: 85vw;
+
     left: 85.5vw;
 
     -webkit-transform: translateY(-50%);
 
     -webkit-transform: translateY(-50%);
 
     transform: translateY(-50%);
 
     transform: translateY(-50%);
Line 210: Line 12:
 
     float: left;
 
     float: left;
 
}
 
}
−
 
−
 
  
 
#Quick_A {
 
#Quick_A {
Line 221: Line 21:
 
     top: 12.25vw;
 
     top: 12.25vw;
 
     position: relative;
 
     position: relative;
−
 
 
}
 
}
  
Line 245: Line 44:
 
#Quick_F {
 
#Quick_F {
 
     text-align: left;
 
     text-align: left;
−
     padding-left: 1vw;
+
     padding-left: 0.6vw;
 
     color: #1d2087 !important;
 
     color: #1d2087 !important;
 
     text-decoration: none;
 
     text-decoration: none;
−
     font-size: 1vw;
+
     font-size: 1rem;
 
     line-height: 1vw;
 
     line-height: 1vw;
 
     -webkit-transition: color 0.3s;
 
     -webkit-transition: color 0.3s;
Line 255: Line 54:
 
     position: absolute;
 
     position: absolute;
 
     z-index: 1;
 
     z-index: 1;
−
     white-space:nowrap;
+
     white-space: nowrap;
−
 
+
 
}
 
}
  
Line 303: Line 101:
 
     .Quick-navigation {
 
     .Quick-navigation {
 
         display: none;
 
         display: none;
 +
    }
 +
 +
    .js-scroll-step {
 +
        padding-top: 3.5rem;
 +
        margin-bottom: 0rem;
 
     }
 
     }
 
}
 
}
  
 
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
 
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
−
     .Quick-navigation{
+
     .Quick-navigation {
 
         left: 85vw;
 
         left: 85vw;
 
     }
 
     }
 +
 
     #Quick_A,
 
     #Quick_A,
−
#Quick_B,
+
    #Quick_B,
−
#Quick_C,
+
    #Quick_C,
−
#Quick_D,
+
    #Quick_D,
−
#Quick_F{
+
    #Quick_F {
−
    font-size: 0.8vw;
+
        font-size: 0.8vw;
−
}
+
    }
 
}
 
}
  
 
@media screen and (min-width: 90rem) {}
 
@media screen and (min-width: 90rem) {}
 +
 +
.click_here:after {
 +
    content: "\f0a5";
 +
    font-family: fontawesome;
 +
}
 +
 +
.click_here {
 +
    color: #1d2087;
 +
}
 +
.engagement img{
 +
    margin: 2vw 0;
 +
}
 +
 +
.MathJax {
 +
    outline: 0;
 +
}
 +
 +
.MathJax span {
 +
    font-size: 1rem;
 +
}
 +
 +
.MathJax_Display {
 +
    overflow-x: auto;
 +
    overflow-y: hidden;
 +
    margin: 0 !important;
 +
}

Latest revision as of 07:40, 17 October 2018

.Quick-navigation { 

   position: fixed;
   z-index: 1;
   margin: 0;
   top: 20%;
   left: 85.5vw;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);

}

.Quick-navigation_word { 

   float: left;

}

  1. Quick_A {
   top: 10vw;
   position: relative;

}

  1. Quick_B {
   top: 12.25vw;
   position: relative;

}

  1. Quick_C {
   top: 14.5vw;
   position: relative;

}

  1. Quick_D {
   top: 16.75vw;
   position: relative;

}

  1. Quick_F {
   top: 19vw;
   position: relative;

}

  1. Quick_A,
  2. Quick_B,
  3. Quick_C,
  4. Quick_D,
  5. Quick_F {
   text-align: left;
   padding-left: 0.6vw;
   color: #1d2087 !important;
   text-decoration: none;
   font-size: 1rem;
   line-height: 1vw;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
   display: block;
   position: absolute;
   z-index: 1;
   white-space: nowrap;

}

  1. Quick_A:hover,
  2. Quick_B:hover,
  3. Quick_C:hover,
  4. Quick_D:hover,
  5. Quick_F:hover {
   font-weight: bolder;

}

.current+a { 

   font-weight: bolder;

}

.Quick-navigation-item>img { 

   display: none;

}

.Quick-navigation-item.current>img { 

   display: block;
   position: absolute;

}

.js-scroll-step { 

   margin-bottom: 3.5rem;

}

.Quick-navigation-item img { 

   top: 10vw;
   height: 10vw;
   margin: 0;
   float: left;
   position: relative;

}

.Quick-navigation_word>img { 

   top: 10vw;
   height: 10vw;
   margin: 0;
   float: left;
   position: relative;

}

@media screen and (max-width: 769px) { 

   .Quick-navigation {
       display: none;
   }

   .js-scroll-step {
       padding-top: 3.5rem;
       margin-bottom: 0rem;
   }

}

@media screen and (min-width: 769px) and (max-width: 89.9375rem) { 

   .Quick-navigation {
       left: 85vw;
   }

   #Quick_A,
   #Quick_B,
   #Quick_C,
   #Quick_D,
   #Quick_F {
       font-size: 0.8vw;
   }

}

@media screen and (min-width: 90rem) {}

.click_here:after { 

   content: "\f0a5";
   font-family: fontawesome;

}

.click_here { 

   color: #1d2087;

} .engagement img{ 

   margin: 2vw 0;

}

.MathJax { 

   outline: 0;

}

.MathJax span { 

   font-size: 1rem;

}

.MathJax_Display { 

   overflow-x: auto;
   overflow-y: hidden;
   margin: 0 !important;

}