Difference between revisions of "Team:SSTi-SZGD/css/Notebook"
YuhangYang (Talk | contribs) |
|||
| Line 3: | Line 3: | ||
.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/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;} | ||
| − | /* | + | /*custom header*/ |
| − | .header .nav .Project span,.header .nav .Project li:nth-of-type( | + | .header .nav .Project span,.header .nav .Project li:nth-of-type(7) a{ color: #FAEE0D;} |
.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;} | .topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;} | ||
| − | .topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;} | + | .topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto; font-size: 6rem} |
| Line 25: | Line 25: | ||
.sth{ cursor: pointer !important;} | .sth{ cursor: pointer !important;} | ||
| − | /* | + | /*switch*/ |
.calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;} | .calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;} | ||
.calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;} | .calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;} | ||
| − | /* | + | /*Default display*/ |
.March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;} | .March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;} | ||
.March .day_x:nth-of-type(2) .sth .focus{ display: none;} | .March .day_x:nth-of-type(2) .sth .focus{ display: none;} | ||
| Line 76: | Line 76: | ||
| − | + | ||
| + | |||
/*--1920--*/ | /*--1920--*/ | ||
@media only screen and (max-width: 1920px) { | @media only screen and (max-width: 1920px) { | ||
| Line 91: | Line 92: | ||
/*--1366--*/ | /*--1366--*/ | ||
@media only screen and (max-width: 1366px) { | @media only screen and (max-width: 1366px) { | ||
| + | html{ font-size: 55%;} | ||
| + | .header .nav .mainnav span{ padding-top: 6px; margin-bottom: 21.5px;} | ||
| + | .topic p{ font-size: 5rem;} | ||
.calendar{ margin-left: 10%;} | .calendar{ margin-left: 10%;} | ||
.Sth{ margin-right: 10%;} | .Sth{ margin-right: 10%;} | ||
| Line 98: | Line 102: | ||
@media only screen and (max-width: 1190px) { | @media only screen and (max-width: 1190px) { | ||
html{ font-size: 52%;} | html{ font-size: 52%;} | ||
| − | .header .nav .Team{ width: | + | .header .nav .Team{ width: 90px;} |
| − | .header .nav .Project{ width: | + | .header .nav .Project{ width: 100px;} |
| − | .header .nav . | + | .header .nav .Application{ width: 115px;} |
.header .nav .Human_Practices{ width: 135px;} | .header .nav .Human_Practices{ width: 135px;} | ||
| − | .header .nav . | + | .header .nav .Achievement{ width: 120px;} |
| − | .header .nav .mainnav span{ | + | .header .nav .mainnav span{ padding-top: 6px;} |
| + | .topic p{ font-size: 4rem;} | ||
.calendar{ margin-left: 8%;} | .calendar{ margin-left: 8%;} | ||
.Sth{ margin-right: 8%;} | .Sth{ margin-right: 8%;} | ||
} | } | ||
Revision as of 10:58, 24 September 2017
body{ min-width: 1024px; min-height: 465px; position: relative;}
.SSTi-SZGD{ background: url(
) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
/*custom header*/ .header .nav .Project span,.header .nav .Project li:nth-of-type(7) a{ color: #FAEE0D;}
.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;} .topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto; font-size: 6rem}
/*Content*/
.Content{ width: 100%; height: 700px; background: cornsilk; padding: 0 5%; padding-bottom: 100px;}
.Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
/*calendar*/ .calendar{ width: 385px; margin-left: 15%; color: #333; position: relative;} .calendar .month{ position: relative; width: 100%; height: 55px; text-align: center; font-size: 3rem; padding: 12px 0; color: white;} .calendar .week{ width: 100%; height: 30px; font-size: 1.5rem; padding: 6px 0; color: white;} .calendar .week ul li{ float: left; width: 55px; text-align: center;} .calendar .day_x{ float: left;} .calendar .day_x li{ width: 40px; text-align: center; height: 40px; padding: 13px 0; margin: 9px 7.5px; border-radius: 100%; cursor: default;} .calendar .sth{ position: relative;} .calendar .focus{ width: 8px; height: 8px; position: absolute; top: 0; right: 0px; background: #009E6D; border-radius: 100%; cursor: pointer;} .sth{ cursor: pointer !important;}
/*switch*/ .calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;} .calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;}
/*Default display*/ .March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;} .March .day_x:nth-of-type(2) .sth .focus{ display: none;}
/*hover*/ .March .sth:hover{ background: #00A070 !important; color: white !important;} .March .sth:hover .focus{ display: none !important;} .April .sth:hover{ background: #87BD4D !important; color: white !important;} .April .sth:hover .focus{ display: none !important;} .May .sth:hover{ background: #C1D133 !important; color: white !important;} .May .sth:hover .focus{ display: none !important;} .June .sth:hover{ background: #FDC435 !important; color: white !important;} .June .sth:hover .focus{ display: none !important;} .July .sth:hover{ background: #EF8434 !important; color: white !important;} .July .sth:hover .focus{ display: none !important;}
/*month+focus*/ .March .month,.March .focus{ background: #00A070;} .April .month,.April .focus{ background: #87BD4D;} .May .month,.May .focus{ background: #C1D133;} .June .month,.June .focus{ background: #FDC435;} .July .month,.July .focus{ background: #EF8434;}
/*Sun*/ .March .day_x:nth-of-type(1) ul li{ color: #06935F;} .April .day_x:nth-of-type(1) ul li{ color: #63B337;} .May .day_x:nth-of-type(1) ul li{ color: #B6C211;} .June .day_x:nth-of-type(1) ul li{ color: #FBBD1C;} .July .day_x:nth-of-type(1) ul li{ color: #EB701D;}
/*week*/ .March .week{ background: #06935F;} .April .week{ background: #63B337;} .May .week{ background: #B6C211;} .June .week{ background: #FBBD1C;} .July .week{ background: #EB701D;}
/*hide*/ .March,.April,.May,.June,.July{ position: absolute; background: #FCFDFE;} .March,.April,.May,.June,.July{ height: 390px; display: none;} .March{ display: block;}
/*Sth*/
.Sth{ width: 40%; height: 390px; border: 3px dashed burlywood; border-radius: 20px; margin-right: 15%; float: right; font-size: 2rem; padding: 20px; color: #333333; line-height: 1.5;}
/*--1920--*/
@media only screen and (max-width: 1920px) {
.header .logo span{ margin-top: 17px;}
.header .nav .mainnav span{ padding-top: 6px; margin-bottom: 18.5px;}
}
/*--1600--*/ @media only screen and (max-width: 1600px) { .calendar{ margin-left: 12%;} .Sth{ margin-right: 12%;} }
/*--1366--*/ @media only screen and (max-width: 1366px) { html{ font-size: 55%;} .header .nav .mainnav span{ padding-top: 6px; margin-bottom: 21.5px;} .topic p{ font-size: 5rem;} .calendar{ margin-left: 10%;} .Sth{ margin-right: 10%;} }
/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 52%;} .header .nav .Team{ width: 90px;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 115px;} .header .nav .Human_Practices{ width: 135px;} .header .nav .Achievement{ width: 120px;} .header .nav .mainnav span{ padding-top: 6px;} .topic p{ font-size: 4rem;} .calendar{ margin-left: 8%;} .Sth{ margin-right: 8%;} }
