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

 
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/1/16/SSTi-SZGD_Notebook_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%; height: 700px; background: cornsilk; padding: 0 5%; padding-bottom: 100px;}
+
.Content{ width: 100%; height: 600px; background: white; padding: 100px 0; 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;}
 
.Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
  
 
/*calendar*/
 
/*calendar*/
 
.calendar{ width: 385px; margin-left: 15%; color: #333; position: relative;}
 
.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 .month{ position: relative; width: 100%; height: 55px; text-align: center; font-size: 3rem; padding: 8px 0; color: white;}
 
.calendar .week{ width: 100%; height: 30px; font-size: 1.5rem; padding: 6px 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 .week ul li{ float: left; width: 55px; text-align: center;}
Line 26: Line 26:
  
 
/*Default display*/
 
/*Default display*/
−
.March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;}
+
.March .day_x:nth-of-type(2) .sth{ background: #537BB6; color: white;}
 
.March .day_x:nth-of-type(2) .sth .focus{ display: none;}
 
.March .day_x:nth-of-type(2) .sth .focus{ display: none;}
  
 
/*hover*/
 
/*hover*/
−
.March .sth:hover{ background: #00A070 !important; color: white !important;}
+
.March .sth:hover{ background: #537BB6 !important; color: white !important;}
 
.March .sth:hover .focus{ display: none !important;}
 
.March .sth:hover .focus{ display: none !important;}
−
.April .sth:hover{ background: #87BD4D !important; color: white !important;}
+
.April .sth:hover{ background: #7F4599 !important; color: white !important;}
 
.April .sth:hover .focus{ display: none !important;}
 
.April .sth:hover .focus{ display: none !important;}
−
.May .sth:hover{ background: #C1D133 !important; color: white !important;}
+
.May .sth:hover{ background: #3C4352 !important; color: white !important;}
 
.May .sth:hover .focus{ display: none !important;}
 
.May .sth:hover .focus{ display: none !important;}
−
.June .sth:hover{ background: #FDC435 !important; color: white !important;}
+
.June .sth:hover{ background: #DB9A37 !important; color: white !important;}
 
.June .sth:hover .focus{ display: none !important;}
 
.June .sth:hover .focus{ display: none !important;}
−
.July .sth:hover{ background: #EF8434 !important; color: white !important;}
+
.July .sth:hover{ background: #B9592E !important; color: white !important;}
 
.July .sth:hover .focus{ display: none !important;}
 
.July .sth:hover .focus{ display: none !important;}
 +
.August .sth:hover{ background: #A34233 !important; color: white !important;}
 +
.August .sth:hover .focus{ display: none !important;}
 +
.September .sth:hover{ background: #764595 !important; color: white !important;}
 +
.September .sth:hover .focus{ display: none !important;}
 +
.October .sth:hover{ background: #5FA768 !important; color: white !important;}
 +
.October .sth:hover .focus{ display: none !important;}
  
 
/*month+focus*/
 
/*month+focus*/
−
.March .month,.March .focus{ background: #00A070;}
+
.March .month,.March .focus{ background: #5DA0CA;}
−
.April .month,.April .focus{ background: #87BD4D;}
+
.April .month,.April .focus{ background: #87589E;}
−
.May .month,.May .focus{ background: #C1D133;}
+
.May .month,.May .focus{ background: #424D5F;}
−
.June .month,.June .focus{ background: #FDC435;}
+
.June .month,.June .focus{ background: #E2C337;}
−
.July .month,.July .focus{ background: #EF8434;}
+
.July .month,.July .focus{ background: #CD7F34;}
 +
.August .month,.August .focus{ background: #C65340;}
 +
.September .month,.September .focus{ background: #87589E;}
 +
.October .month,.October .focus{ background: #75B574;}
  
 
/*Sun*/
 
/*Sun*/
−
.March .day_x:nth-of-type(1) ul li{ color: #06935F;}
+
.March .day_x:nth-of-type(1) ul li{ color: #5DA0CA;}
−
.April .day_x:nth-of-type(1) ul li{ color: #63B337;}
+
.April .day_x:nth-of-type(1) ul li{ color: #87589E;}
−
.May .day_x:nth-of-type(1) ul li{ color: #B6C211;}
+
.May .day_x:nth-of-type(1) ul li{ color: #424D5F;}
−
.June .day_x:nth-of-type(1) ul li{ color: #FBBD1C;}
+
.June .day_x:nth-of-type(1) ul li{ color: #E2C337;}
−
.July .day_x:nth-of-type(1) ul li{ color: #EB701D;}
+
.July .day_x:nth-of-type(1) ul li{ color: #CD7F34;}
 +
.August .day_x:nth-of-type(1) ul li{ color: #C65340;}
 +
.September .day_x:nth-of-type(1) ul li{ color: #87589E;}
 +
.October .day_x:nth-of-type(1) ul li{ color: #75B574;}
  
 
/*week*/
 
/*week*/
−
.March .week{ background: #06935F;}
+
.March .week{ background: #537BB6;}
−
.April .week{ background: #63B337;}
+
.April .week{ background: #7F4599;}
−
.May .week{ background: #B6C211;}
+
.May .week{ background: #3C4352;}
 
.June .week{ background: #FBBD1C;}
 
.June .week{ background: #FBBD1C;}
−
.July .week{ background: #EB701D;}
+
.July .week{ background: #B9592E;}
 +
.August .week{ background: #A34233;}
 +
.September .week{ background: #764595;}
 +
.October .week{ background: #5FA768;}
  
 
/*hide*/
 
/*hide*/
−
.March,.April,.May,.June,.July{ position: absolute; background: #FCFDFE;}
+
.March,.April,.May,.June,.July,.August,.September,.October{ box-shadow: 10px 10px 5px #888888; position: absolute; background: #FCFDFE; height: 390px; display: none;}
−
.March,.April,.May,.June,.July{ height: 390px; display: none;}
+
 
.March{ display: block;}
 
.March{ display: block;}
  
  
 
/*Sth*/
 
/*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;}
+
.Sth{ box-shadow: 10px 10px 5px #888888; width: 40%; height: 390px; background: #5DA0CA; margin-right: 15%; float: right; font-size: 2rem; padding: 15px; color: #FFFFFF; line-height: 1.5;}
  
  
  
−
 
−
/*--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--*/
 
/*--1600--*/
Line 88: Line 96:
 
/*--1366--*/
 
/*--1366--*/
 
@media only screen and (max-width: 1366px) {
 
@media only screen and (max-width: 1366px) {
−
html{ font-size: 55%;}
 
−
.header .nav .mainnav span{ 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 97: Line 102:
 
/*--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;}
−
.calendar{ margin-left: 8%;}
+
−
.Sth{ margin-right: 8%;}
+
 
}
 
}

Latest revision as of 00:57, 30 October 2017

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

.SSTi-SZGD{ background: url(SSTi-SZGD_Notebook_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(7) a{ color: #FAEE0D;}

/*Content*/ .Content{ width: 100%; height: 600px; background: white; padding: 100px 0; 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: 8px 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: #537BB6; color: white;} .March .day_x:nth-of-type(2) .sth .focus{ display: none;}

/*hover*/ .March .sth:hover{ background: #537BB6 !important; color: white !important;} .March .sth:hover .focus{ display: none !important;} .April .sth:hover{ background: #7F4599 !important; color: white !important;} .April .sth:hover .focus{ display: none !important;} .May .sth:hover{ background: #3C4352 !important; color: white !important;} .May .sth:hover .focus{ display: none !important;} .June .sth:hover{ background: #DB9A37 !important; color: white !important;} .June .sth:hover .focus{ display: none !important;} .July .sth:hover{ background: #B9592E !important; color: white !important;} .July .sth:hover .focus{ display: none !important;} .August .sth:hover{ background: #A34233 !important; color: white !important;} .August .sth:hover .focus{ display: none !important;} .September .sth:hover{ background: #764595 !important; color: white !important;} .September .sth:hover .focus{ display: none !important;} .October .sth:hover{ background: #5FA768 !important; color: white !important;} .October .sth:hover .focus{ display: none !important;}

/*month+focus*/ .March .month,.March .focus{ background: #5DA0CA;} .April .month,.April .focus{ background: #87589E;} .May .month,.May .focus{ background: #424D5F;} .June .month,.June .focus{ background: #E2C337;} .July .month,.July .focus{ background: #CD7F34;} .August .month,.August .focus{ background: #C65340;} .September .month,.September .focus{ background: #87589E;} .October .month,.October .focus{ background: #75B574;}

/*Sun*/ .March .day_x:nth-of-type(1) ul li{ color: #5DA0CA;} .April .day_x:nth-of-type(1) ul li{ color: #87589E;} .May .day_x:nth-of-type(1) ul li{ color: #424D5F;} .June .day_x:nth-of-type(1) ul li{ color: #E2C337;} .July .day_x:nth-of-type(1) ul li{ color: #CD7F34;} .August .day_x:nth-of-type(1) ul li{ color: #C65340;} .September .day_x:nth-of-type(1) ul li{ color: #87589E;} .October .day_x:nth-of-type(1) ul li{ color: #75B574;}

/*week*/ .March .week{ background: #537BB6;} .April .week{ background: #7F4599;} .May .week{ background: #3C4352;} .June .week{ background: #FBBD1C;} .July .week{ background: #B9592E;} .August .week{ background: #A34233;} .September .week{ background: #764595;} .October .week{ background: #5FA768;}

/*hide*/ .March,.April,.May,.June,.July,.August,.September,.October{ box-shadow: 10px 10px 5px #888888; position: absolute; background: #FCFDFE; height: 390px; display: none;} .March{ display: block;}


/*Sth*/ .Sth{ box-shadow: 10px 10px 5px #888888; width: 40%; height: 390px; background: #5DA0CA; margin-right: 15%; float: right; font-size: 2rem; padding: 15px; color: #FFFFFF; line-height: 1.5;}



/*--1600--*/ @media only screen and (max-width: 1600px) { .calendar{ margin-left: 12%;} .Sth{ margin-right: 12%;} }

/*--1366--*/ @media only screen and (max-width: 1366px) { .calendar{ margin-left: 10%;} .Sth{ margin-right: 10%;} }

/*--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;} }