Difference between revisions of "Team:XMU-China/css/font"

Revision as of 08:59, 14 October 2018 (view source) Cyclohexane (Talk | contribs) ← Older edit		Latest revision as of 23:53, 17 October 2018 (view source) Cyclohexane (Talk | contribs)
(14 intermediate revisions by the same user not shown)
Line 4:		Line 4:
	box-shadow: 0px 3px 10px #24366D;		box-shadow: 0px 3px 10px #24366D;
	}		}
		+
	.description_banner {		.description_banner {
	margin: 0 25vw;		margin: 0 25vw;
Line 14:		Line 15:
	background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--XMU-China--description_headline.png);		background-image: url(https://static.igem.org/mediawiki/2018/c/c0/T--XMU-China--description_headline.png);
	}		}
		+
	.description_banner>.word {		.description_banner>.word {
	font-size: 3vw;		font-size: 3vw;
Line 22:		Line 24:
	font-family: "Arial";		font-family: "Arial";
	}		}
−	@media screen and (max-width: 768px) {	+
		+	@media screen and (max-width: 769px) {
	.description_banner>.word {		.description_banner>.word {
	font-size: 5vw;		font-size: 5vw;
	}		}
		+
	.description_banner {		.description_banner {
	width: 90VW;		width: 90VW;
	margin: 5rem 5vw 0;		margin: 5rem 5vw 0;
	}		}
		+
	.description_banner>.word {		.description_banner>.word {
	padding: 8vw 0vw;		padding: 8vw 0vw;
	}		}
	}		}
−	@media screen and (min-width: 768px) and (max-width: 89.9375rem) {	+
		+	@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
	.description_banner {		.description_banner {
	width: 60vw;		width: 60vw;
	margin: 6rem 20vw 0;		margin: 6rem 20vw 0;
	}		}
		+
	.description_banner>.word {		.description_banner>.word {
	padding: 5vw 0vw;		padding: 5vw 0vw;
	}		}
	}		}
−	@media screen and (min-width: 90rem) {}	+
		+
	.main {		.main {
	margin: 0 15vw 5rem;		margin: 0 15vw 5rem;
Line 49:		Line 57:
	text-align: left;		text-align: left;
	}		}
		+
	.headline {		.headline {
	font-size: 2vw;		font-size: 2vw;
Line 55:		Line 64:
	padding-top: 5rem;		padding-top: 5rem;
	}		}
		+
	.main p {		.main p {
	color: #000;		color: #000;
Line 64:		Line 74:
	margin-bottom: 0.8vw;		margin-bottom: 0.8vw;
	}		}
		+
	.main h1,		.main h1,
	.main h2,		.main h2,
Line 69:		Line 80:
	font-family: "Microsoft YaHei";		font-family: "Microsoft YaHei";
	}		}
		+
	.main h1 {		.main h1 {
−	margin: 0.8vw 0 0.3vw!important;	+	margin: 0.8vw 0!important;
−	font-size: 1.4rem!important;	+	font-size: 1.4rem !important;
	}		}
		+
	.main h2 {		.main h2 {
−	font-size: 1.2rem!important;	+	font-size: 1.2rem !important;
	font-weight: bolder;		font-weight: bolder;
	}		}
		+
	.main h3 {		.main h3 {
−	font-size: 1.1rem!important;	+	font-size: 1.1rem !important;
	}		}
		+
	.main h4 {		.main h4 {
−	font-size: 1.05rem!important;	+	font-size: 1.05rem !important;
		+	}
		+	.F0>img{
		+	width: 70vw !important;
	}		}
	.F1>img {		.F1>img {
−	width: 60vw;	+	width: 60vw !important;
	}		}
		+
	.F2>img {		.F2>img {
−	width: 50vw;	+	width: 50vw !important;
	}		}
		+
	.F3>img {		.F3>img {
−	width: 40vw;	+	width: 40vw !important;
	}		}
		+
	.F4>img {		.F4>img {
−	width: 30vw;	+	width: 30vw !important;
	}		}
		+
	.F25>img {		.F25>img {
−	width: 25vw;	+	width: 25vw !important;
	}		}
		+
	.F6>img {		.F6>img {
−	width: 40vw;	+	width: 40vw !important;
	}		}
		+
	.F7>img {		.F7>img {
−	width: 15vw;	+	width: 15vw !important;
	}		}
		+
	.F8>img {		.F8>img {
−	width: 10vw;	+	width: 10vw !important;
	}		}
		+	.F0,
	.F1,		.F1,
	.F2,		.F2,
Line 118:		Line 144:
	text-indent: 0 !important;		text-indent: 0 !important;
	margin-bottom: 0 !important;		margin-bottom: 0 !important;
		+	text-align:  center!important;
		+
	}		}
		+
	.Figure_word {		.Figure_word {
	font-size: 0.9rem !important;		font-size: 0.9rem !important;
Line 124:		Line 153:
	text-indent: 0 !important;		text-indent: 0 !important;
	}		}
		+
	.reference {		.reference {
	text-indent: 0 !important;		text-indent: 0 !important;
	}		}
		+
	.main .indent {		.main .indent {
	text-indent: 2.4rem !important;		text-indent: 2.4rem !important;
	}		}
		+
	tbody {		tbody {
	width: auto;		width: auto;
	overflow: auto;		overflow: auto;
	}		}
−	.table{	+
−	margin: 0 auto!important;	+	.table {
		+	margin: 0 auto !important;
	}		}
		+
	.table th,		.table th,
	.table td,		.table td,
Line 148:		Line 182:
	vertical-align: middle !important;		vertical-align: middle !important;
	}		}
		+
	.table td:nth-child(6),		.table td:nth-child(6),
	.table td:nth-child(7),		.table td:nth-child(7),
−	.table th{	+	.table th {
	white-space: nowrap;		white-space: nowrap;
	}		}
−	.table td:nth-child(4){	+
−	padding: 0.5vw 0.3vw!important;	+	.table td:nth-child(4) {
		+	padding: 0.5vw 0.3vw !important;
	}		}
		+
	.space {		.space {
	white-space: normal;		white-space: normal;
	}		}
		+
	.slideBox p {		.slideBox p {
	text-indent: 0 !important;		text-indent: 0 !important;
	text-align: left !important;		text-align: left !important;
	}		}
		+	.video{
		+	text-align: center!important;
		+	}
		+	video{
		+	width: 50vw;
		+	}
		+
	@media screen and (max-width: 769px) {		@media screen and (max-width: 769px) {
	.headline {		.headline {
Line 169:		Line 214:
	padding: 0;		padding: 0;
	}		}
		+
	.main p {		.main p {
	font-size: 0.9rem;		font-size: 0.9rem;
Line 176:		Line 222:
	;		;
	}		}
		+	.F0>img {
		+	width: 85vw !important;
		+	}
		+
	.F1>img {		.F1>img {
−	width: 85vw;	+	width: 85vw !important;
	}		}
		+
	.F2>img {		.F2>img {
−	width: 95vw;	+	width: 85vw !important;
	}		}
		+
	.F3>img {		.F3>img {
−	width: 85vw;	+	width: 60vw !important;
	}		}
		+
	.F4>img {		.F4>img {
−	width: 50vw;	+	width: 50vw !important;
	/*SPE*/		/*SPE*/
	}		}
		+
	.F6>img {		.F6>img {
−	width: 85vw;	+	width: 85vw !important;
	}		}
		+
	.F7>img {		.F7>img {
−	width: 40vw;	+	width: 40vw !important;
	margin-left: 15vw;		margin-left: 15vw;
	}		}
		+
	.F8>img {		.F8>img {
−	width: 20vw;	+	width: 20vw !important;
	}		}
		+
	.F25>img {		.F25>img {
−	width: 40vw;	+	width: 40vw !important;
	}		}
		+
	.main {		.main {
−	width: 85vw;	+	width: 85vw !important;
	margin: 0 7.5vw 5rem;		margin: 0 7.5vw 5rem;
	}		}
		+
	.main h1 {		.main h1 {
−	font-size: 1.15rem;	+	font-size: 1.15rem!important;
	margin: 0.8vw 0 0;		margin: 0.8vw 0 0;
	font-weight: bold;		font-weight: bold;
	white-space: nowrap;		white-space: nowrap;
	}		}
		+
	.main h2 {		.main h2 {
	margin: 0;		margin: 0;
Line 218:		Line 278:
	font-weight: normal;		font-weight: normal;
	}		}
		+
	.table {		.table {
	zoom: 0.7;		zoom: 0.7;
Line 223:		Line 284:
	-webkit-transform: scale(1);		-webkit-transform: scale(1);
	}		}
		+	video{
		+	width: 70vw;
		+	}
	}		}
		+
	@media screen and (min-width: 769px) and (max-width: 89.9375rem) {		@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
	.headline {		.headline {
Line 229:		Line 294:
	margin-bottom: 1vw;		margin-bottom: 1vw;
	}		}
		+
	.main p {}		.main p {}
		+
	.table_container {		.table_container {
	overflow-x: scroll !important;		overflow-x: scroll !important;
−	width: 75vw;
	}		}
		+
	.table th,		.table th,
	.table td,		.table td,
	.table {		.table {
	padding: 2px 2px !important;		padding: 2px 2px !important;
		+	}
		+
		+	.table td:nth-child(4) {
		+	width: 20vw;
	}		}
	}		}
		+
	@media screen and (max-width: 769px) {		@media screen and (max-width: 769px) {
	.table_container {		.table_container {
Line 245:		Line 317:
	width: 85vw;		width: 85vw;
	}		}
		+
	.table th,		.table th,
	.table td,		.table td,
Line 251:		Line 324:
	}		}
	}		}
		+
	@media screen and (max-width: 45rem) {		@media screen and (max-width: 45rem) {
		+
	.table th,		.table th,
	.table td,		.table td,
Line 259:		Line 334:
	}		}
	}		}
		+
	.click_here:after,		.click_here:after,
	td a:after,		td a:after,
		+	#Attributions a:after,
		+	.judging p>a:after,
	.notebook .slideBox p>a:after {		.notebook .slideBox p>a:after {
	content: "\f0a5";		content: "\f0a5";
Line 266:		Line 344:
	color: #1d2087 !important;		color: #1d2087 !important;
	}		}
		+
	.click_here span,		.click_here span,
	.click_here,		.click_here,
−	.notebook .slideBox p>a {	+	#Attributions a,
−	color: #1d2087 !important;	+	.judging p>a,
		+	.downloadpdf,
		+	.notebook .slideBox p>a{
		+	color: #1d2087!important;
		+	}
		+	#Attributions .headline{
		+	padding-top: 1rem;
		+	}
		+	#Attributions p:nth-child(1){
		+	padding-top: 1rem;
		+	}
		+	.downloadpdf:after {
		+	content: "\f1c1";
		+	font-family: fontawesome;
		+	color: #1d2087!important;
		+	}
		+	.center{
		+	text-align: center!important;
	}		}

---

Latest revision as of 23:53, 17 October 2018

.header {

   -moz-box-shadow: 0px 3px 10px #24366D;
   -webkit-box-shadow: 0px 3px 10px #24366D;
   box-shadow: 0px 3px 10px #24366D;

}

.description_banner {

   margin: 0 25vw;
   position: relative;
   width: 50vw;
   margin-top: 6rem;
   background-size: 100%;
   background-repeat: no-repeat;
   text-align: center;
   background-image: url();

}

.description_banner>.word {

   font-size: 3vw;
   padding: 4vw 0vw;
   line-height: 3vw;
   color: white;
   font-weight: bolder;
   font-family: "Arial";

}

@media screen and (max-width: 769px) {

   .description_banner>.word {
       font-size: 5vw;
   }

   .description_banner {
       width: 90VW;
       margin: 5rem 5vw 0;
   }

   .description_banner>.word {
       padding: 8vw 0vw;
   }

}

@media screen and (min-width: 769px) and (max-width: 89.9375rem) {

   .description_banner {
       width: 60vw;
       margin: 6rem 20vw 0;
   }

   .description_banner>.word {
       padding: 5vw 0vw;
   }

}

.main {

   margin: 0 15vw 5rem;
   width: 70vw;
   text-align: left;

}

.headline {

   font-size: 2vw;
   color: #1d2087;
   margin-bottom: 1vw;
   padding-top: 5rem;

}

.main p {

   color: #000;
   font-size: 1.2rem;
   text-indent: 2.4rem;
   font-weight: normal;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 2rem;
   margin-bottom: 0.8vw;

}

.main h1, .main h2, .main h3 {

   font-family: "Microsoft YaHei";

}

.main h1 {

   margin: 0.8vw 0!important;
   font-size: 1.4rem !important;

}

.main h2 {

   font-size: 1.2rem !important;
   font-weight: bolder;

}

.main h3 {

   font-size: 1.1rem !important;

}

.main h4 {

   font-size: 1.05rem !important;

} .F0>img{

   width: 70vw !important;

} .F1>img {

   width: 60vw !important;

}

.F2>img {

   width: 50vw !important;

}

.F3>img {

   width: 40vw !important;

}

.F4>img {

   width: 30vw !important;

}

.F25>img {

   width: 25vw !important;

}

.F6>img {

   width: 40vw !important;

}

.F7>img {

   width: 15vw !important;

}

.F8>img {

   width: 10vw !important;

} .F0, .F1, .F2, .F25, .F3, .F4, .F5, .F6, .F7, .F8 {

   text-indent: 0 !important;
   margin-bottom: 0 !important;
   text-align:  center!important;
   

}

.Figure_word {

   font-size: 0.9rem !important;
   text-align: center !important;
   text-indent: 0 !important;

}

.reference {

   text-indent: 0 !important;

}

.main .indent {

   text-indent: 2.4rem !important;

}

tbody {

   width: auto;
   overflow: auto;

}

.table {

   margin: 0 auto !important;

}

.table th, .table td, .table {

   padding: 0.5vw 1vw !important;
   border-collapse: collapse !important;
   border: 2px solid #1d2087 !important;
   color: #1d2087 !important;
   background-color: white !important;
   text-align: center !important;
   vertical-align: middle !important;

}

.table td:nth-child(6), .table td:nth-child(7), .table th {

   white-space: nowrap;

}

.table td:nth-child(4) {

   padding: 0.5vw 0.3vw !important;

}

.space {

   white-space: normal;

}

.slideBox p {

   text-indent: 0 !important;
   text-align: left !important;

} .video{

   text-align: center!important;

} video{

   width: 50vw;

}

@media screen and (max-width: 769px) {

   .headline {
       font-size: 1.4rem;
       margin: 1rem 0 2vw;
       padding: 0;
   }

   .main p {
       font-size: 0.9rem;
       text-indent: 1.8rem;
       line-height: 1.5rem;
       word-wrap: break-word;
       ;
   }
   .F0>img {
       width: 85vw !important;
   }

   .F1>img {
       width: 85vw !important;
   }

   .F2>img {
       width: 85vw !important;
   }

   .F3>img {
       width: 60vw !important;
   }

   .F4>img {
       width: 50vw !important;
       /*SPE*/
   }

   .F6>img {
       width: 85vw !important;
   }

   .F7>img {
       width: 40vw !important;
       margin-left: 15vw;
   }

   .F8>img {
       width: 20vw !important;
   }

   .F25>img {
       width: 40vw !important;
   }

   .main {
       width: 85vw !important;
       margin: 0 7.5vw 5rem;
   }

   .main h1 {
       font-size: 1.15rem!important;
       margin: 0.8vw 0 0;
       font-weight: bold;
       white-space: nowrap;
   }

   .main h2 {
       margin: 0;
       padding: 0;
       font-size: 1.1rem;
       font-weight: normal;
   }

   .table {
       zoom: 0.7;
       -webkit-transform-origin: top left;
       -webkit-transform: scale(1);
   }
   video{
   width: 70vw;

} }

@media screen and (min-width: 769px) and (max-width: 89.9375rem) {

   .headline {
       font-size: 1.6rem;
       margin-bottom: 1vw;
   }

   .main p {}

   .table_container {
       overflow-x: scroll !important;
   }

   .table th,
   .table td,
   .table {
       padding: 2px 2px !important;
   }

   .table td:nth-child(4) {
       width: 20vw;
   }

}

@media screen and (max-width: 769px) {

   .table_container {
       overflow-x: scroll !important;
       width: 85vw;
   }

   .table th,
   .table td,
   .table {
       padding: 5px 5px !important;
   }

}

@media screen and (max-width: 45rem) {

   .table th,
   .table td,
   .table {
       padding: 9px 8px !important;
       white-space: nowrap;
   }

}

.click_here:after, td a:after,

1. Attributions a:after,

.judging p>a:after, .notebook .slideBox p>a:after {

   content: "\f0a5";
   font-family: fontawesome;
   color: #1d2087 !important;

}

.click_here span, .click_here,

1. Attributions a,

.judging p>a, .downloadpdf, .notebook .slideBox p>a{

   color: #1d2087!important;

}

1. Attributions .headline{

   padding-top: 1rem;

}

1. Attributions p:nth-child(1){

   padding-top: 1rem;

} .downloadpdf:after {

   content: "\f1c1";
   font-family: fontawesome;
   color: #1d2087!important;

} .center{

   text-align: center!important;

}