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

Line 1: Line 1:
−
body{ min-width: 1024px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 489px; position: relative;}
 
 
−
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
+
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/2/2e/SSTi-SZGD_Safety_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}
  
 
/*custom header*/
 
/*custom header*/
Line 7: Line 7:
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; background: cornsilk; padding: 50px 0; padding-bottom: 100px; font-size: 2rem; text-align: justify;}
+
.Content{ background: cornsilk; width: 100%; padding: 80px 0; text-align: justify; font-size: 2rem;}
−
.Safety,.Laboratory,.Environment{ width: 1400px; margin: auto; margin-bottom: 60px; font-size: 2.2rem;}
+
.Content .introduction{ font-size: 4rem; width: 1200px; margin: auto; line-height: 58px;}
−
.Safety p{ margin: 40px 0;}
+
.Content .Title{ font-size: 4rem; color: white; background: #52ef1b; width: 800px; height: 90px; padding: 15px 25px;}
−
.Content .content{ margin: 10px 0; width: 100%;}
+
.Content .title{ font-size: 2.5rem; font-weight: 600;}
−
.Content p{ margin-top: 20px;}
+
.Content .Headline{ font-size: 2.5rem; color: white; background: #a8f37b; width: 975px; padding: 8px 10px;}
−
.Content .img{ width: 1000px; margin: auto;}
+
−
.Content img{ border-radius: 10px; float: left; box-shadow:2px 2px 3px #aaaaaa;}
+
−
.Content .title{ font-size: 6rem; font-weight: 600; color: #394c53; letter-spacing: 2px; text-align: center; margin-bottom: 50px;}
+
−
.Content .Title{ font-size: 2.8rem; font-weight: 600; margin-top: 40px;}
+
−
.Content .Subtitle{ margin-top: 30px; margin-bottom: 20px;}
+
−
.Content .Subtitle span{ border-bottom: 1px solid #666; padding-bottom: 5px;}
+
−
 
+
 
.Content .left{ float: left;}
 
.Content .left{ float: left;}
 
.Content .right{ float: right;}
 
.Content .right{ float: right;}
−
.Laboratory .left{ width: 60%;}
+
.Content .left p,.Content .right p{ line-height: 37.5px;}
−
.Laboratory .right{ width: 35%;}
+
.Content img{ width: inherit;}
−
.Laboratory img{ height: inherit; margin: 0 10px; box-shadow:2px 2px 3px #aaaaaa;}
+
 
−
.Laboratory .top{ height: 480px;}
+
.Laboratory{ width: 1360px; height: 1270px; margin: auto; margin-top: 30px;}
−
.Laboratory .img{ height: 350px;}
+
.Laboratory .left{ width: 680px; height: 1070px;}
−
.Laboratory .bottom{ height: 370px; margin-top: 60px;}
+
.Laboratory .left img{ width: 650px; float: right; margin-top: 10px;}
−
.Laboratory .img:nth-last-of-type(1){ height: 320px !important;}
+
.Laboratory .right{ width: 640px; height: 1070px; padding-top: 35px;}
 +
.Laboratory .right .title{ margin-top: 70px; margin-left: 20px;}
 +
.Laboratory .right p:nth-last-of-type(1){ width: 565px; margin-left: 20px;}
 +
.Laboratory .bottom{ float: left; margin-left: 50px; line-height: 37.5px;}
 +
 
 +
.Overall{ width: 1360px; height: 400px; margin: auto; font-size: 1.6rem;}
 +
.Overall p:nth-last-of-type(1){ width: 1100px; margin-left: 65px; margin-top: 20px; line-height: 37.5px;}
 +
 
 +
.Environment{ width: 1360px; height: 900px; margin: auto;}
 +
.Environment .Title{ width: 450px;}
 +
.Environment .left{ width: 800px; margin-left: 35px; margin-top: 30px;}
 +
.Environment .right{ width: 470px; padding-top: 40px; margin-right: 30px;}
 +
.Environment .img{ float: left; margin-left: 35px; margin-top: 80px; height: 270px;}
 +
.Environment .img img{ height: inherit; float: left;}
 +
.Environment .img img:nth-of-type(2){ margin: 0 25px;}
  
−
.Environment{ height: 450px;}
 
−
.Environment .left{ width: 40%;}
 
−
.Environment .right{ width: 55%;}
 
−
.Environment img{ width: 100%;}
 
  
−
/*--1920--*/
 
−
@media only screen and (max-width: 1920px) {
 
−
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
 
−
.topic p{ font-size: 5.5rem;}
 
−
 
−
}
 
−
/*--1600--*/
 
−
@media only screen and (max-width: 1600px) {
 
−
.Safety,.Laboratory,.Environment{ width: 1200px;}
 
−
.Laboratory .top{ height: 550px;}
 
−
.Environment .right{ margin: 50px 0;}
 
−
 
−
}
 
  
 
/*--1366--*/
 
/*--1366--*/
 
@media only screen and (max-width: 1366px) {
 
@media only screen and (max-width: 1366px) {
−
html{ font-size: 55%;}
+
.Content{ font-size: 1.4rem;}
−
.header .logo span{ margin-top: 16px;}
+
.Content .introduction{ font-size: 2.9rem; width: 835px; line-height: 41.5px;}
−
.header .nav .mainnav span{ margin-bottom: 21.5px;}
+
.Content .Title{ font-size: 2.9rem; width: 570px; height: 65px;}
−
.topic p{ font-size: 5rem;}
+
.Content .title{ font-size: 1.7rem;}
−
.Safety,.Laboratory,.Environment{ width: 1000px;}
+
.Content .Headline{ font-size: 1.7rem; width: 695px;}
−
.Laboratory .top{ height: 500px;}
+
.Content .left p,.Content .right p{ line-height: 26.5px;}
−
.Laboratory .bottom{ height: 330px;}
+
.Laboratory{ width: 1000px; height: 920px;}
 +
.Laboratory .left{ width: 490px; height: 770px;}
 +
.Laboratory .left img{ width: 460px;}
 +
.Laboratory .right{ width: 490px; height: 770px; padding-top: 20px;}
 +
.Laboratory .right .title{ margin-top: 35px;}
 +
.Laboratory .right p:nth-last-of-type(1){ width: 400px;}
 +
.Laboratory .bottom{ float: left; margin-left: 50px; line-height: 37.5px;}
 +
.Overall{ width: 1000px; height: 300px; font-size: 1.1rem;}
 +
.Overall p:nth-last-of-type(1){ width: 785px; line-height: 26.5px;}
 +
.Environment{ width: 1000px; height: 700px;}
 +
.Environment .Title{ width: 325px;}
 +
.Environment .left{ width: 590px;}
 +
.Environment .right{ width: 335px;}
 +
.Environment .img{ height: 190px;}
 +
/*.Environment .img img:nth-of-type(2){ margin: 0 25px;}*/
 
}
 
}
  
 
/*--1190--*/
 
/*--1190--*/
 
@media only screen and (max-width: 1190px) {
 
@media only screen and (max-width: 1190px) {
−
html{ font-size: 52%;}
+
html{ font-size: 50%;}
−
.header .nav .Team{ width: 90px;}
+
.header .logo span{ margin: 15px 0;}
 
.header .nav .Project{ width: 100px;}
 
.header .nav .Project{ width: 100px;}
−
.header .nav .Application{ width: 115px;}
+
.header .nav .Application{ width: 100px;}
−
.header .nav .Human_Practices{ width: 135px;}
+
.header .nav .Human_Practices{ width: 140px;}
 
.header .nav .Achievement{ width: 120px;}
 
.header .nav .Achievement{ width: 120px;}
−
.header .nav .mainnav span{ padding-top: 6.5px; margin-bottom: 22px;}
+
.header .nav .Team{ width: 95px;}
−
.topic p{ font-size: 4.5rem;}
+
.header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;}
 
}
 
}

Revision as of 12:59, 23 October 2017

body{ min-width: 1024px; min-height: 489px; position: relative;}

.SSTi-SZGD{ background: url(SSTi-SZGD_Safety_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px;}

/*custom header*/ .header .nav .Project span,.header .nav .Project li:nth-of-type(6) a{ color: #FAEE0D;}

/*Content*/ .Content{ background: cornsilk; width: 100%; padding: 80px 0; text-align: justify; font-size: 2rem;} .Content .introduction{ font-size: 4rem; width: 1200px; margin: auto; line-height: 58px;} .Content .Title{ font-size: 4rem; color: white; background: #52ef1b; width: 800px; height: 90px; padding: 15px 25px;} .Content .title{ font-size: 2.5rem; font-weight: 600;} .Content .Headline{ font-size: 2.5rem; color: white; background: #a8f37b; width: 975px; padding: 8px 10px;} .Content .left{ float: left;} .Content .right{ float: right;} .Content .left p,.Content .right p{ line-height: 37.5px;} .Content img{ width: inherit;}

.Laboratory{ width: 1360px; height: 1270px; margin: auto; margin-top: 30px;} .Laboratory .left{ width: 680px; height: 1070px;} .Laboratory .left img{ width: 650px; float: right; margin-top: 10px;} .Laboratory .right{ width: 640px; height: 1070px; padding-top: 35px;} .Laboratory .right .title{ margin-top: 70px; margin-left: 20px;} .Laboratory .right p:nth-last-of-type(1){ width: 565px; margin-left: 20px;} .Laboratory .bottom{ float: left; margin-left: 50px; line-height: 37.5px;}

.Overall{ width: 1360px; height: 400px; margin: auto; font-size: 1.6rem;} .Overall p:nth-last-of-type(1){ width: 1100px; margin-left: 65px; margin-top: 20px; line-height: 37.5px;}

.Environment{ width: 1360px; height: 900px; margin: auto;} .Environment .Title{ width: 450px;} .Environment .left{ width: 800px; margin-left: 35px; margin-top: 30px;} .Environment .right{ width: 470px; padding-top: 40px; margin-right: 30px;} .Environment .img{ float: left; margin-left: 35px; margin-top: 80px; height: 270px;} .Environment .img img{ height: inherit; float: left;} .Environment .img img:nth-of-type(2){ margin: 0 25px;}


/*--1366--*/ @media only screen and (max-width: 1366px) { .Content{ font-size: 1.4rem;} .Content .introduction{ font-size: 2.9rem; width: 835px; line-height: 41.5px;} .Content .Title{ font-size: 2.9rem; width: 570px; height: 65px;} .Content .title{ font-size: 1.7rem;} .Content .Headline{ font-size: 1.7rem; width: 695px;} .Content .left p,.Content .right p{ line-height: 26.5px;} .Laboratory{ width: 1000px; height: 920px;} .Laboratory .left{ width: 490px; height: 770px;} .Laboratory .left img{ width: 460px;} .Laboratory .right{ width: 490px; height: 770px; padding-top: 20px;} .Laboratory .right .title{ margin-top: 35px;} .Laboratory .right p:nth-last-of-type(1){ width: 400px;} .Laboratory .bottom{ float: left; margin-left: 50px; line-height: 37.5px;} .Overall{ width: 1000px; height: 300px; font-size: 1.1rem;} .Overall p:nth-last-of-type(1){ width: 785px; line-height: 26.5px;} .Environment{ width: 1000px; height: 700px;} .Environment .Title{ width: 325px;} .Environment .left{ width: 590px;} .Environment .right{ width: 335px;} .Environment .img{ height: 190px;} /*.Environment .img img:nth-of-type(2){ margin: 0 25px;}*/ }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 50%;} .header .logo span{ margin: 15px 0;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 100px;} .header .nav .Human_Practices{ width: 140px;} .header .nav .Achievement{ width: 120px;} .header .nav .Team{ width: 95px;} .header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;} }