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

 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.Quick-navigation {
+
.header {
−
     position: fixed;
+
     -moz-box-shadow: 0px 3px 10px #24366D;
−
    z-index: 1;
+
     -webkit-box-shadow: 0px 3px 10px #24366D;
−
    margin: 0;
+
     box-shadow: 0px 3px 10px #24366D;
−
    top: 20%;
+
−
    left: 85vw;
+
−
     -webkit-transform: translateY(-50%);
+
−
     transform: translateY(-50%);
+
 
}
 
}
−
.Quick-navigation_word {
+
 
−
    float: left;
+
.description_banner {
−
}
+
     margin: 0 25vw;
−
#Quick_A {
+
−
     top: 10vw;
+
 
     position: relative;
 
     position: relative;
 +
    width: 50vw;
 +
    margin-top: 6rem;
 +
    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);
 
}
 
}
−
#Quick_B {
+
 
−
     top: 12.25vw;
+
.description_banner>.word {
−
     position: relative;
+
     font-size: 3vw;
 +
    padding: 4vw 0vw;
 +
    line-height: 3vw;
 +
    color: white;
 +
    font-weight: bolder;
 +
     font-family: "Arial";
 
}
 
}
−
#Quick_C {
+
 
−
     top: 14.5vw;
+
@media screen and (max-width: 769px) {
−
     position: relative;
+
     .description_banner>.word {
 +
        font-size: 5vw;
 +
    }
 +
 
 +
    .description_banner {
 +
        width: 90VW;
 +
        margin: 5rem 5vw 0;
 +
     }
 +
 
 +
    .description_banner>.word {
 +
        padding: 8vw 0vw;
 +
    }
 
}
 
}
−
#Quick_D {
+
 
−
     top: 16.75vw;
+
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
−
    position: relative;
+
     .description_banner {
−
}
+
        width: 60vw;
−
#Quick_F {
+
        margin: 6rem 20vw 0;
−
     top: 19vw;
+
    }
−
     position: relative;
+
 
 +
     .description_banner>.word {
 +
        padding: 5vw 0vw;
 +
     }
 
}
 
}
−
#Quick_A,
+
 
−
#Quick_B,
+
 
−
#Quick_C,
+
.main {
−
#Quick_D,
+
    margin: 0 15vw 5rem;
−
#Quick_F {
+
    width: 70vw;
 
     text-align: left;
 
     text-align: left;
−
    padding-left: 1vw;
 
−
    color: #1d2087 !important;
 
−
    text-decoration: none;
 
−
    font-size: 1vw;
 
−
    line-height: 1vw;
 
−
    -webkit-transition: color 0.3s;
 
−
    transition: color 0.3s;
 
−
    display: block;
 
−
    position: absolute;
 
−
    z-index: 1;
 
−
    white-space: nowrap;
 
 
}
 
}
−
#Quick_A:hover,
+
 
−
#Quick_B:hover,
+
.headline {
−
#Quick_C:hover,
+
    font-size: 2vw;
−
#Quick_D:hover,
+
    color: #1d2087;
−
#Quick_F:hover {
+
    margin-bottom: 1vw;
−
     font-weight: bolder;
+
     padding-top: 5rem;
 
}
 
}
−
.current+a {
+
 
 +
.main p {
 +
    color: #000;
 +
    font-size: 1.2rem;
 +
    text-indent: 2.4rem;
 +
    font-weight: normal;
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    line-height: 2rem;
 +
    margin-bottom: 0.8vw;
 +
}
 +
 
 +
.main h1,
 +
.main h2,
 +
.main h3 {
 +
    font-family: "Microsoft YaHei";
 +
}
 +
 
 +
.main h1 {
 +
    margin: 0.8vw 0!important;
 +
    font-size: 1.4rem !important;
 +
}
 +
 
 +
.main h2 {
 +
    font-size: 1.2rem !important;
 
     font-weight: bolder;
 
     font-weight: bolder;
 
}
 
}
−
.Quick-navigation-item>img {
+
 
−
     display: none;
+
.main h3 {
 +
     font-size: 1.1rem !important;
 
}
 
}
−
.Quick-navigation-item.current>img {
+
 
−
     display: block;
+
.main h4 {
−
    position: absolute;
+
     font-size: 1.05rem !important;
 
}
 
}
−
.js-scroll-step {
+
.F0>img{
−
     margin-bottom: 3.5rem;
+
     width: 70vw !important;
 
}
 
}
−
.Quick-navigation-item img {
+
.F1>img {
−
     top: 10vw;
+
     width: 60vw !important;
−
    height: 10vw;
+
−
    margin: 0;
+
−
    float: left;
+
−
    position: relative;
+
 
}
 
}
−
.Quick-navigation_word>img {
+
 
−
     top: 10vw;
+
.F2>img {
−
     height: 10vw;
+
     width: 50vw !important;
−
     margin: 0;
+
}
−
     float: left;
+
 
−
     position: relative;
+
.F3>img {
 +
     width: 40vw !important;
 +
}
 +
 
 +
.F4>img {
 +
    width: 30vw !important;
 +
}
 +
 
 +
.F25>img {
 +
    width: 25vw !important;
 +
}
 +
 
 +
.F6>img {
 +
    width: 40vw !important;
 +
}
 +
 
 +
.F7>img {
 +
    width: 15vw !important;
 +
}
 +
 
 +
.F8>img {
 +
    width: 10vw !important;
 +
}
 +
.F0,
 +
.F1,
 +
.F2,
 +
.F25,
 +
.F3,
 +
.F4,
 +
.F5,
 +
.F6,
 +
.F7,
 +
.F8 {
 +
    text-indent: 0 !important;
 +
     margin-bottom: 0 !important;
 +
     text-align:  center!important;
 +
   
 +
}
 +
 
 +
.Figure_word {
 +
    font-size: 0.9rem !important;
 +
    text-align: center !important;
 +
    text-indent: 0 !important;
 +
}
 +
 
 +
.reference {
 +
    text-indent: 0 !important;
 +
}
 +
 
 +
.main .indent {
 +
    text-indent: 2.4rem !important;
 +
}
 +
 
 +
tbody {
 +
    width: auto;
 +
    overflow: auto;
 +
}
 +
 
 +
.table {
 +
    margin: 0 auto !important;
 +
}
 +
 
 +
.table th,
 +
.table td,
 +
.table {
 +
    padding: 0.5vw 1vw !important;
 +
    border-collapse: collapse !important;
 +
    border: 2px solid #1d2087 !important;
 +
    color: #1d2087 !important;
 +
    background-color: white !important;
 +
    text-align: center !important;
 +
    vertical-align: middle !important;
 +
}
 +
 
 +
.table td:nth-child(6),
 +
.table td:nth-child(7),
 +
.table th {
 +
    white-space: nowrap;
 +
}
 +
 
 +
.table td:nth-child(4) {
 +
    padding: 0.5vw 0.3vw !important;
 +
}
 +
 
 +
.space {
 +
    white-space: normal;
 +
}
 +
 
 +
.slideBox p {
 +
    text-indent: 0 !important;
 +
    text-align: left !important;
 +
}
 +
.video{
 +
    text-align: center!important;
 +
}
 +
video{
 +
     width: 50vw;
 
}
 
}
 +
 
@media screen and (max-width: 769px) {
 
@media screen and (max-width: 769px) {
−
     .Quick-navigation {
+
     .headline {
−
         display: none;
+
         font-size: 1.4rem;
 +
        margin: 1rem 0 2vw;
 +
        padding: 0;
 
     }
 
     }
−
     .main p{
+
 
−
         word-wrap:break-word;;
+
     .main p {
 +
        font-size: 0.9rem;
 +
        text-indent: 1.8rem;
 +
        line-height: 1.5rem;
 +
         word-wrap: break-word;
 +
        ;
 
     }
 
     }
 +
    .F0>img {
 +
        width: 85vw !important;
 +
    }
 +
 +
    .F1>img {
 +
        width: 85vw !important;
 +
    }
 +
 +
    .F2>img {
 +
        width: 85vw !important;
 +
    }
 +
 +
    .F3>img {
 +
        width: 60vw !important;
 +
    }
 +
 +
    .F4>img {
 +
        width: 50vw !important;
 +
        /*SPE*/
 +
    }
 +
 +
    .F6>img {
 +
        width: 85vw !important;
 +
    }
 +
 +
    .F7>img {
 +
        width: 40vw !important;
 +
        margin-left: 15vw;
 +
    }
 +
 +
    .F8>img {
 +
        width: 20vw !important;
 +
    }
 +
 +
    .F25>img {
 +
        width: 40vw !important;
 +
    }
 +
 +
    .main {
 +
        width: 85vw !important;
 +
        margin: 0 7.5vw 5rem;
 +
    }
 +
 +
    .main h1 {
 +
        font-size: 1.15rem!important;
 +
        margin: 0.8vw 0 0;
 +
        font-weight: bold;
 +
        white-space: nowrap;
 +
    }
 +
 +
    .main h2 {
 +
        margin: 0;
 +
        padding: 0;
 +
        font-size: 1.1rem;
 +
        font-weight: normal;
 +
    }
 +
 +
    .table {
 +
        zoom: 0.7;
 +
        -webkit-transform-origin: top left;
 +
        -webkit-transform: scale(1);
 +
    }
 +
    video{
 +
    width: 70vw;
 
}
 
}
 +
}
 +
 
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
 
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
−
     .Quick-navigation {
+
     .headline {
−
     left: 85vw;
+
        font-size: 1.6rem;
 +
        margin-bottom: 1vw;
 +
    }
 +
 
 +
    .main p {}
 +
 
 +
     .table_container {
 +
        overflow-x: scroll !important;
 +
    }
 +
 
 +
    .table th,
 +
    .table td,
 +
    .table {
 +
        padding: 2px 2px !important;
 +
    }
 +
 
 +
    .table td:nth-child(4) {
 +
        width: 20vw;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 769px) {
 +
    .table_container {
 +
        overflow-x: scroll !important;
 +
        width: 85vw;
 +
    }
 +
 
 +
    .table th,
 +
    .table td,
 +
    .table {
 +
        padding: 5px 5px !important;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 45rem) {
 +
 
 +
    .table th,
 +
    .table td,
 +
    .table {
 +
        padding: 9px 8px !important;
 +
        white-space: nowrap;
 +
    }
 +
}
 +
 
 +
.click_here:after,
 +
td a:after,
 +
#Attributions a:after,
 +
.judging p>a:after,
 +
.notebook .slideBox p>a:after {
 +
    content: "\f0a5";
 +
    font-family: fontawesome;
 +
    color: #1d2087 !important;
 +
}
 +
 
 +
.click_here span,
 +
.click_here,
 +
#Attributions a,
 +
.judging p>a,
 +
.downloadpdf,
 +
.notebook .slideBox p>a{
 +
    color: #1d2087!important;
 +
}
 +
#Attributions .headline{
 +
    padding-top: 1rem;
 +
}
 +
#Attributions p:nth-child(1){
 +
    padding-top: 1rem;
 
}
 
}
−
#Quick_A,
+
.downloadpdf:after {
−
#Quick_B,
+
    content: "\f1c1";
−
#Quick_C,
+
     font-family: fontawesome;
−
#Quick_D,
+
    color: #1d2087!important;
−
#Quick_F {
+
−
     font-size: 0.8vw;
+
 
}
 
}
 +
.center{
 +
    text-align: center!important;
 
}
 
}
−
@media screen and (min-width: 90rem) {}
 

Latest revision as of 23:53, 17 October 2018

.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;
   background-size: 100%;
   background-repeat: no-repeat;
   text-align: center;
   background-image: url(T--XMU-China--description_headline.png);

}

.description_banner>.word { 

   font-size: 3vw;
   padding: 4vw 0vw;
   line-height: 3vw;
   color: white;
   font-weight: bolder;
   font-family: "Arial";

}

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

   .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: 769px) and (max-width: 89.9375rem) { 

   .description_banner {
       width: 60vw;
       margin: 6rem 20vw 0;
   }

   .description_banner>.word {
       padding: 5vw 0vw;
   }

}


.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: Arial, Helvetica, sans-serif;
   line-height: 2rem;
   margin-bottom: 0.8vw;

}

.main h1, .main h2, .main h3 { 

   font-family: "Microsoft YaHei";

}

.main h1 { 

   margin: 0.8vw 0!important;
   font-size: 1.4rem !important;

}

.main h2 { 

   font-size: 1.2rem !important;
   font-weight: bolder;

}

.main h3 { 

   font-size: 1.1rem !important;

}

.main h4 { 

   font-size: 1.05rem !important;

} .F0>img{ 

   width: 70vw !important;

} .F1>img { 

   width: 60vw !important;

}

.F2>img { 

   width: 50vw !important;

}

.F3>img { 

   width: 40vw !important;

}

.F4>img { 

   width: 30vw !important;

}

.F25>img { 

   width: 25vw !important;

}

.F6>img { 

   width: 40vw !important;

}

.F7>img { 

   width: 15vw !important;

}

.F8>img { 

   width: 10vw !important;

} .F0, .F1, .F2, .F25, .F3, .F4, .F5, .F6, .F7, .F8 { 

   text-indent: 0 !important;
   margin-bottom: 0 !important;
   text-align:  center!important;

}

.Figure_word { 

   font-size: 0.9rem !important;
   text-align: center !important;
   text-indent: 0 !important;

}

.reference { 

   text-indent: 0 !important;

}

.main .indent { 

   text-indent: 2.4rem !important;

}

tbody { 

   width: auto;
   overflow: auto;

}

.table { 

   margin: 0 auto !important;

}

.table th, .table td, .table { 

   padding: 0.5vw 1vw !important;
   border-collapse: collapse !important;
   border: 2px solid #1d2087 !important;
   color: #1d2087 !important;
   background-color: white !important;
   text-align: center !important;
   vertical-align: middle !important;

}

.table td:nth-child(6), .table td:nth-child(7), .table th { 

   white-space: nowrap;

}

.table td:nth-child(4) { 

   padding: 0.5vw 0.3vw !important;

}

.space { 

   white-space: normal;

}

.slideBox p { 

   text-indent: 0 !important;
   text-align: left !important;

} .video{ 

   text-align: center!important;

} video{ 

   width: 50vw;

}

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

   .headline {
       font-size: 1.4rem;
       margin: 1rem 0 2vw;
       padding: 0;
   }

   .main p {
       font-size: 0.9rem;
       text-indent: 1.8rem;
       line-height: 1.5rem;
       word-wrap: break-word;
       ;
   }
   .F0>img {
       width: 85vw !important;
   }

   .F1>img {
       width: 85vw !important;
   }

   .F2>img {
       width: 85vw !important;
   }

   .F3>img {
       width: 60vw !important;
   }

   .F4>img {
       width: 50vw !important;
       /*SPE*/
   }

   .F6>img {
       width: 85vw !important;
   }

   .F7>img {
       width: 40vw !important;
       margin-left: 15vw;
   }

   .F8>img {
       width: 20vw !important;
   }

   .F25>img {
       width: 40vw !important;
   }

   .main {
       width: 85vw !important;
       margin: 0 7.5vw 5rem;
   }

   .main h1 {
       font-size: 1.15rem!important;
       margin: 0.8vw 0 0;
       font-weight: bold;
       white-space: nowrap;
   }

   .main h2 {
       margin: 0;
       padding: 0;
       font-size: 1.1rem;
       font-weight: normal;
   }

   .table {
       zoom: 0.7;
       -webkit-transform-origin: top left;
       -webkit-transform: scale(1);
   }
   video{
   width: 70vw;

} }

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

   .headline {
       font-size: 1.6rem;
       margin-bottom: 1vw;
   }

   .main p {}

   .table_container {
       overflow-x: scroll !important;
   }

   .table th,
   .table td,
   .table {
       padding: 2px 2px !important;
   }

   .table td:nth-child(4) {
       width: 20vw;
   }

}

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

   .table_container {
       overflow-x: scroll !important;
       width: 85vw;
   }

   .table th,
   .table td,
   .table {
       padding: 5px 5px !important;
   }

}

@media screen and (max-width: 45rem) { 

   .table th,
   .table td,
   .table {
       padding: 9px 8px !important;
       white-space: nowrap;
   }

}

.click_here:after, td a:after,

  1. Attributions a:after,

.judging p>a:after, .notebook .slideBox p>a:after { 

   content: "\f0a5";
   font-family: fontawesome;
   color: #1d2087 !important;

}

.click_here span, .click_here,

  1. Attributions a,

.judging p>a, .downloadpdf, .notebook .slideBox p>a{ 

   color: #1d2087!important;

}

  1. Attributions .headline{
   padding-top: 1rem;

}

  1. Attributions p:nth-child(1){
   padding-top: 1rem;

} .downloadpdf:after { 

   content: "\f1c1";
   font-family: fontawesome;
   color: #1d2087!important;

} .center{ 

   text-align: center!important;

}