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

m
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.Banner{ text-align: center; padding: 10% 0;}
+
.Banner{ width: 100%; height: 400px; background: url(https://static.igem.org/mediawiki/2018/thumb/9/9a/T--SSTi-SZGD--banner_Design.png/800px-T--SSTi-SZGD--banner_Design.png) no-repeat center center; background-size: 40%; margin: 100px 0 0 0;}
−
.Banner img{ margin: auto; float: none;}
+
 
.Content{ font-size: 1.6rem; margin-bottom: 100px; margin: auto; float: none;}
 
.Content{ font-size: 1.6rem; margin-bottom: 100px; margin: auto; float: none;}
 
.Content .Ccontent{ padding: 0 15px;}
 
.Content .Ccontent{ padding: 0 15px;}
−
.Content .content{ background: #c4ecff; padding: 15px; border-radius: 10px;}
+
.Content .content{ background: #c4ecff; padding: 15px; border-radius: 10px; display: none;}
−
.Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0; background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; text-align: center;}
+
.Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0; background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; text-align: center; cursor: pointer;}
 
.Content .Ctitle{ font-size: 3rem; font-weight: 600; margin: 10px 0;}
 
.Content .Ctitle{ font-size: 3rem; font-weight: 600; margin: 10px 0;}
 
.Content .Ctitle span{ background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center;}
 
.Content .Ctitle span{ background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center;}
Line 22: Line 21:
 
.Content .Cimg p,.Content .img p{ margin: 5px auto;}
 
.Content .Cimg p,.Content .img p{ margin: 5px auto;}
 
.Content sup{ font-weight: 600;}
 
.Content sup{ font-weight: 600;}
 +
.Content em{ font-style: normal; color: #2ca6e0;}
 
.Content p span{ font-weight: 600;}
 
.Content p span{ font-weight: 600;}
−
.Reference .Rtitle span{ text-align: center; font-size: 2.6rem;}
 
−
.Reference .Rtitle span:nth-of-type(2n-1){ border-top: 1px solid #2ca6e0; margin: 18px 0;}
 
−
.Content .Rtitle{ margin: 50px 0 15px 0;}
 
 
.Content .info>div{ display: none;}
 
.Content .info>div{ display: none;}
 
.Content .info>div:nth-of-type(1){ display: block;}
 
.Content .info>div:nth-of-type(1){ display: block;}
−
 
+
.Reference P:nth-of-type(1) span{ text-align: center; font-size: 2.6rem;}
 +
.Reference P:nth-of-type(1) span:nth-of-type(2n-1){ border-top: 1px solid #ff3a3a; margin: 19px 0;}
  
 
@media only screen and (max-width: 767px) {
 
@media only screen and (max-width: 767px) {
−
.Reference span{ font-size: 1.6rem; padding: 0 5px;}
+
.Banner{ background-size: 60%;}
−
.Reference span:nth-of-type(2n-1){ margin: 10px 0;}
+
.Reference P:nth-of-type(1) span{ font-size: 2rem; margin: 4px 0;}
 +
.Reference P:nth-of-type(1) span:nth-of-type(2n-1){ margin: 18px 0;}
 +
}
 +
 
 +
@media only screen and (max-width: 992px) {
 +
.Banner{ margin: 100px 0 0 0;}
 
}
 
}

Latest revision as of 02:43, 6 November 2018

.Banner{ width: 100%; height: 400px; background: url(800px-T--SSTi-SZGD--banner_Design.png) no-repeat center center; background-size: 40%; margin: 100px 0 0 0;} .Content{ font-size: 1.6rem; margin-bottom: 100px; margin: auto; float: none;} .Content .Ccontent{ padding: 0 15px;} .Content .content{ background: #c4ecff; padding: 15px; border-radius: 10px; display: none;} .Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0; background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; text-align: center; cursor: pointer;} .Content .Ctitle{ font-size: 3rem; font-weight: 600; margin: 10px 0;} .Content .Ctitle span{ background: #2ca6e0; color: #fff; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center;} .Content .subtitle{ font-size: 2rem; color: #2ca6e0; margin-top: 15px;} .Content .Csubtitle{ margin: 5px 0;} .Content .Csubtitle span{ background: #e7f7ff; color: #2ca6e0; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center; width: 100%; cursor: pointer;} .Content .Csubtitle span.active{ background: #6dc3ec; color: #fff;} .Content .Csubtitle span:hover{ background: #2ca6e0; color: #fff;} .Content .info{ background: #e7f7ff; border-radius: 10px; margin: 10px 0; padding: 15px;} .Content section{ margin: 20px auto; float: none;} .Content li{ float: none; display: list-item;} .Content ol li{ list-style: decimal; margin-left: 25px;} .Content ul li{ list-style: disc; margin-left: 25px;} .Content .Cimg,.Content .img{ margin: 15px auto; font-weight: 600; text-align: center;} .Content .Cimg{ float: none;} .Content .img img,.Content .Cimg img{ width: 100%; border-radius: 10px; box-shadow: rgba(0,0,0,0.38) 0px 0px 10px 0; margin: 5px 0;} .Content .Cimg p,.Content .img p{ margin: 5px auto;} .Content sup{ font-weight: 600;} .Content em{ font-style: normal; color: #2ca6e0;} .Content p span{ font-weight: 600;} .Content .info>div{ display: none;} .Content .info>div:nth-of-type(1){ display: block;} .Reference P:nth-of-type(1) span{ text-align: center; font-size: 2.6rem;} .Reference P:nth-of-type(1) span:nth-of-type(2n-1){ border-top: 1px solid #ff3a3a; margin: 19px 0;}

@media only screen and (max-width: 767px) { .Banner{ background-size: 60%;} .Reference P:nth-of-type(1) span{ font-size: 2rem; margin: 4px 0;} .Reference P:nth-of-type(1) span:nth-of-type(2n-1){ margin: 18px 0;} }

@media only screen and (max-width: 992px) { .Banner{ margin: 100px 0 0 0;} }