Difference between revisions of "Team:SSTi-SZGD/css/Safety"

Line 1: Line 1:
−
.Banner{ width: 100%; height: 500px; background: url(https://static.igem.org/mediawiki/2018/3/3c/T--SSTi-SZGD--banner_Safety.png) no-repeat center center; background-size: 50%; margin: 100px 0 30px 0;}
+
.Banner{ text-align: center; padding: 10% 0;}
 +
.Banner img{ margin: auto; float: none;}
 
.Content{ font-size: 1.8rem;}
 
.Content{ font-size: 1.8rem;}
 
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;}
 
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;}
Line 18: Line 19:
  
 
@media only screen and (max-width: 767px) {
 
@media only screen and (max-width: 767px) {
−
.Banner{ height: 300px; background-size: 70%; margin: 100px 0 0 0;}
 
 
.Content{ width: 100%; padding: 5%; font-size: 1.8rem;}
 
.Content{ width: 100%; padding: 5%; font-size: 1.8rem;}
 
.Content .title{ font-size: 2.4rem;}
 
.Content .title{ font-size: 2.4rem;}
Line 46: Line 46:
 
.Content section.Safety_Training .img img{ width: 50%;}
 
.Content section.Safety_Training .img img{ width: 50%;}
 
.Content section.GLS .show{ height: 400px;}
 
.Content section.GLS .show{ height: 400px;}
−
.Banner{ height: 400px;}
 
 
}
 
}

Revision as of 00:42, 18 October 2018

.Banner{ text-align: center; padding: 10% 0;} .Banner img{ margin: auto; float: none;} .Content{ font-size: 1.8rem;} .Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} .Content .subtitle{ text-align: center; font-size: 2.5rem;} .Content section{ margin: 0 auto 100px auto; float: none;} .Content section .img{ text-align: center;} .Content section.Safety_Training .img img{ width: 100%; margin: 5px 0;} .Content section.GLS{ transition: none;} .Content section.GLS .content{ margin-top: 20px; padding: 0 100px;} .Content section.GLS .show{ width: 100%; overflow: hidden; height: 605px; position: relative; cursor: pointer;} .Content section.GLS ul{ padding: 0 15px; position: absolute;} .Content section.GLS ul li{ float: left;} .Content section.GLS ul li .img{ margin-bottom: 10px;} .Content section.GLS ul li .img img{ width: 60%; margin: 0;} .Content section.GLS .show span{ display: none; width: 60px; height: 60px; position: absolute; top: 0; bottom: 0; margin: auto;background-repeat: no-repeat; background-size: cover; background-position: center;} .Content section.GLS .show .prev{ left: 0; background-image: url(https://static.igem.org/mediawiki/2018/a/af/T--SSTi-SZGD--safety_btnLeft.png);} .Content section.GLS .show .next{ right: 0; background-image: url(https://static.igem.org/mediawiki/2018/1/15/T--SSTi-SZGD--safety_btnRight.png);}

@media only screen and (max-width: 767px) { .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} .Content .title{ font-size: 2.4rem;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 100%;} .Content section.GLS .show span{ width: 40px; height: 40px;} }

@media (min-width: 467px) and (max-width: 567px) { .Content section.Safety_Training .img img{ width: 80%;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 75%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 45px; height: 45px;} }

@media (min-width: 567px) and (max-width: 767px) { .Content section.Safety_Training .img img{ width: 60%;} .Content section.GLS .content{ padding: 0 60px;} .Content section.GLS ul li .img img{ width: 60%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 50px; height: 50px;}

}

@media only screen and (min-width: 768px) { .Content section.Safety_Training .img img{ width: 50%;} .Content section.GLS .show{ height: 400px;} }