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

(final)
 
Line 1: Line 1:
−
.Banner{ text-align: center; padding: 10% 0;}
+
.Banner{ width: 100%; height: 400px; background: url(https://static.igem.org/mediawiki/2018/1/1b/T--SSTi-SZGD--banner_Applied_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 .content{ padding: 0 15px;}
 
.Content .content{ padding: 0 15px;}
Line 19: Line 18:
 
.Content .card_title div:nth-of-type(3){ float: right;}
 
.Content .card_title div:nth-of-type(3){ float: right;}
 
.Content .card_title span{ display: inline-block; width: 100%; text-align: center; background: #ffb81a; padding: 5px 10px; border-radius: 10px; color: #fff; font-size: 2rem; cursor: pointer;}
 
.Content .card_title span{ display: inline-block; width: 100%; text-align: center; background: #ffb81a; padding: 5px 10px; border-radius: 10px; color: #fff; font-size: 2rem; cursor: pointer;}
−
.Content .card_title div.active span{ border-radius: 10px 10px 0 0; padding-bottom: 5px; font-size: 2.4rem;}
+
.Content .card_title div.active span{ border-radius: 10px 10px 0 0; padding: 10px; font-size: 2.2rem;}
 
.Content .card_content{ background: #ffb81a; padding: 10px 15px; border-radius: 0 10px 10px 10px;}
 
.Content .card_content{ background: #ffb81a; padding: 10px 15px; border-radius: 0 10px 10px 10px;}
 
.Content .card_content p{ display: none;}
 
.Content .card_content p{ display: none;}
Line 25: Line 24:
  
 
.Reference P:nth-of-type(1) span{ text-align: center; font-size: 2.6rem;}
 
.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 #ffb81a; margin: 18px 0;}
+
.Reference P:nth-of-type(1) span:nth-of-type(2n-1){ border-top: 1px solid #ff3a3a; margin: 19px 0;}
  
 +
@media only screen and (min-width: 768px){
 +
.Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;}
 +
.Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;}
 +
.Content .card_title div:nth-of-type(3) span{ padding: 18.5px 0;}
 +
.Content .card_title div:nth-of-type(3).active span{ padding: 25.5px 0;}
 +
}
  
−
@media only screen and (max-width: 467px) {
+
@media only screen and (min-width: 992px) {
−
.Content .card_title div:nth-of-type(2){ padding: 0;}
+
.Content .card_title span{ font-size: 2rem; padding: 5px 10px;}
−
.Content .card_title span{ font-size: 1.4rem;}
+
.Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;}
−
.Content .card_title div.active span{ font-size: 1.5rem;}
+
.Content .card_title div:nth-of-type(3) span{ padding: 5px 10px;}
−
.Reference span{ font-size: 1.6rem; padding: 0 5px;}
+
.Content .card_title div:nth-of-type(3).active span{ padding: 10px;}
−
.Reference span:nth-of-type(2n-1){ margin: 10px 0;}
+
 
}
 
}
  
−
@media only screen and (min-width: 467px) and (max-width: 767px) {
+
@media only screen and (max-width: 992px) {
 +
.Banner{ margin: 100px 0 0 0;}
 +
}
 +
 
 +
@media only screen and (max-width: 767px) {
 
.Banner{ background-size: 60%;}
 
.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;}
 +
.Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;}
 +
.Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;}
 +
.Content .card_title div:nth-of-type(3) span{ padding: 18.5px 0;}
 +
.Content .card_title div:nth-of-type(3).active span{ padding: 25.5px 0;}
 +
}
 +
 +
@media only screen and (min-width: 735px) and (max-width: 767px) {
 +
.Content .card_title div:nth-of-type(1) span{ padding: 18.5px 0;}
 +
.Content .card_title div:nth-of-type(1).active span{ padding: 25.5px 0;}
 +
}
 +
 +
@media only screen and (max-width: 567px) {
 
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
 
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
−
.Content .card_title span{ font-size: 1.4rem;}
+
.Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;}
−
.Content .card_title div.active span{ font-size: 1.6rem;}
+
.Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;}
−
.Reference span{ font-size: 1.6rem; padding: 0 5px;}
+
.Content .card_title div:nth-of-type(3) span{ padding: 5px 10px;}
−
.Reference span:nth-of-type(2n-1){ margin: 10px 0;}
+
.Content .card_title div:nth-of-type(3).active span{ padding: 10px;}
 
}
 
}
  
−
@media only screen and (max-width: 992px) {
+
@media only screen and (max-width: 527px) {
−
.Banner{ margin: 100px 0 0 0;}
+
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
 +
.Content .card_title span{ font-size: 1.9rem; padding: 5px;}
 +
.Content .card_title div.active span{ font-size: 1.9rem; padding: 10px 5px;}
 
}
 
}
  
−
@media only screen and (min-width: 768px) and (max-width: 992px) {
+
@media only screen and (min-width: 482px) and (max-width: 527px) {
−
.Content .card_title span{ font-size: 1.5rem;}
+
.Content .card_title div:nth-of-type(3) span{ padding: 18px 0;}
−
.Content .card_title div.active span{ font-size: 1.8rem;}
+
.Content .card_title div:nth-of-type(3).active span{ padding: 23.5px 0;}
 +
}
 +
 
 +
@media only screen and (max-width: 467px) {
 +
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
 +
.Content .card_title span{ font-size: 1.7rem; padding: 5px;}
 +
.Content .card_title div.active span{ font-size: 1.7rem; padding: 10px 5px;}
 +
}
 +
 
 +
@media only screen and (min-width: 441px) and (max-width: 467px) {
 +
.Content .card_title div:nth-of-type(3) span{ padding: 17px 0;}
 +
.Content .card_title div:nth-of-type(3).active span{ padding: 22px 0;}
 +
}
 +
 
 +
@media only screen and (max-width: 427px) {
 +
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
 +
.Content .card_title span{ font-size: 1.4rem;}
 +
.Content .card_title div.active span{ font-size: 1.4rem;}
 +
.Content .card_title div:nth-of-type(3) span{ padding: 14px 0;}
 +
.Content .card_title div:nth-of-type(3).active span{ padding: 18px 0;}
 +
}
 +
 
 +
@media only screen and (max-width: 367px) {
 +
.Content .card_title div:nth-of-type(2){ padding: 0 5px;}
 +
.Content .card_title span{ font-size: 1.2rem; padding: 5px 0;}
 +
.Content .card_title div.active span{ font-size: 1.2rem;}
 +
.Content .card_title div:nth-of-type(3) span{ padding: 13px 0;}
 +
.Content .card_title div:nth-of-type(3).active span{ padding: 17px 0;}
 
}
 
}

Latest revision as of 02:10, 7 November 2018

.Banner{ width: 100%; height: 400px; background: url(T--SSTi-SZGD--banner_Applied_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 .content{ padding: 0 15px;} .Content .title{ font-size: 3rem; font-weight: 600; margin: 10px 0;} .Content .title span{ background: #ffb81a; color: #fff; border-radius: 30px; padding: 5px 40px; display: inline-block; text-align: center;} .Content .subtitle{ font-size: 2rem; color: #ffb81a; margin-top: 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 .img{ float: none; margin: 15px auto; color: #ffb81a; font-weight: 600; text-align: center;} .Content .img img{ width: 100%;} .Content sup{ font-weight: 600;} .Content p span{ font-weight: 600;} .Content table{ text-align: center;} .Content table th{ text-align: center; color: #fff; background: #ffc000;} .Content .card_title div{ padding: 0; background: #fff;} .Content .card_title div:nth-of-type(2){ padding: 0 15px;} .Content .card_title div:nth-of-type(3){ float: right;} .Content .card_title span{ display: inline-block; width: 100%; text-align: center; background: #ffb81a; padding: 5px 10px; border-radius: 10px; color: #fff; font-size: 2rem; cursor: pointer;} .Content .card_title div.active span{ border-radius: 10px 10px 0 0; padding: 10px; font-size: 2.2rem;} .Content .card_content{ background: #ffb81a; padding: 10px 15px; border-radius: 0 10px 10px 10px;} .Content .card_content p{ display: none;} .Content .card_content p: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 (min-width: 768px){ .Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;} .Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;} .Content .card_title div:nth-of-type(3) span{ padding: 18.5px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 25.5px 0;} }

@media only screen and (min-width: 992px) { .Content .card_title span{ font-size: 2rem; padding: 5px 10px;} .Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;} .Content .card_title div:nth-of-type(3) span{ padding: 5px 10px;} .Content .card_title div:nth-of-type(3).active span{ padding: 10px;} }

@media only screen and (max-width: 992px) { .Banner{ margin: 100px 0 0 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;} .Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;} .Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;} .Content .card_title div:nth-of-type(3) span{ padding: 18.5px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 25.5px 0;} }

@media only screen and (min-width: 735px) and (max-width: 767px) { .Content .card_title div:nth-of-type(1) span{ padding: 18.5px 0;} .Content .card_title div:nth-of-type(1).active span{ padding: 25.5px 0;} }

@media only screen and (max-width: 567px) { .Content .card_title div:nth-of-type(2){ padding: 0 5px;} .Content .card_title span{ font-size: 2.2rem; padding: 5px 10px;} .Content .card_title div.active span{ font-size: 2.2rem; padding: 10px;} .Content .card_title div:nth-of-type(3) span{ padding: 5px 10px;} .Content .card_title div:nth-of-type(3).active span{ padding: 10px;} }

@media only screen and (max-width: 527px) { .Content .card_title div:nth-of-type(2){ padding: 0 5px;} .Content .card_title span{ font-size: 1.9rem; padding: 5px;} .Content .card_title div.active span{ font-size: 1.9rem; padding: 10px 5px;} }

@media only screen and (min-width: 482px) and (max-width: 527px) { .Content .card_title div:nth-of-type(3) span{ padding: 18px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 23.5px 0;} }

@media only screen and (max-width: 467px) { .Content .card_title div:nth-of-type(2){ padding: 0 5px;} .Content .card_title span{ font-size: 1.7rem; padding: 5px;} .Content .card_title div.active span{ font-size: 1.7rem; padding: 10px 5px;} }

@media only screen and (min-width: 441px) and (max-width: 467px) { .Content .card_title div:nth-of-type(3) span{ padding: 17px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 22px 0;} }

@media only screen and (max-width: 427px) { .Content .card_title div:nth-of-type(2){ padding: 0 5px;} .Content .card_title span{ font-size: 1.4rem;} .Content .card_title div.active span{ font-size: 1.4rem;} .Content .card_title div:nth-of-type(3) span{ padding: 14px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 18px 0;} }

@media only screen and (max-width: 367px) { .Content .card_title div:nth-of-type(2){ padding: 0 5px;} .Content .card_title span{ font-size: 1.2rem; padding: 5px 0;} .Content .card_title div.active span{ font-size: 1.2rem;} .Content .card_title div:nth-of-type(3) span{ padding: 13px 0;} .Content .card_title div:nth-of-type(3).active span{ padding: 17px 0;} }