Difference between revisions of "Template:TecCEM/Style"

Revision as of 22:01, 11 October 2018 (view source) Joellara (Talk | contribs) ← Older edit		Latest revision as of 20:10, 17 October 2018 (view source) Joellara (Talk | contribs)
(10 intermediate revisions by the same user not shown)
Line 163:		Line 163:
	@media (min-width: 43.75em) {		@media (min-width: 43.75em) {
	h4 {		h4 {
		+	font-size: 1.25rem;
	line-height: 1.22222222;		line-height: 1.22222222;
		+	}
		+	}
		+	@media (min-width: 56.25em) {
		+	h4 {
		+	font-size: 1.375rem;
		+	line-height: 1.25;
		+	}
		+	}
		+
		+	h5 {
		+	font-size: 1rem;
		+	line-height: 1.11111111;
		+	}
		+
		+	@media (min-width: 43.75em) {
		+	h5 {
		+	font-size: 1.125rem;
		+	line-height: 1.22222222;
		+	}
		+	}
		+	@media (min-width: 56.25em) {
		+	h5 {
		+	font-size: 1.25rem;
		+	line-height: 1.25;
	}		}
	}		}
Line 281:		Line 306:
	top: 50%;		top: 50%;
	left: 50%;		left: 50%;
		+	-webkit-transform: translate(-50%, -50%);
		+	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);		transform: translate(-50%, -50%);
	}		}
Line 368:		Line 395:
	div#top_menu_14 {		div#top_menu_14 {
		+	-webkit-box-sizing: content-box;
	box-sizing: content-box;		box-sizing: content-box;
	}		}
Line 379:		Line 407:
	font-family: "TodaySHOP", serif;		font-family: "TodaySHOP", serif;
	}		}
−	#navbarContainer a:hover,#navbarContainer ul .dropdown-menu a:visited {	+	#navbarContainer a:hover,
		+	#navbarContainer ul .dropdown-menu a:visited {
	color: #333333 !important;		color: #333333 !important;
	}		}
−	.navbar {	+	.navbar#navbarContainer {
	top: 18px;		top: 18px;
	}		}
Line 431:		Line 460:
	}		}
	.wrapper {		.wrapper {
		+	display: -webkit-box;
		+	display: -ms-flexbox;
	display: flex;		display: flex;
		+	-webkit-box-align: stretch;
		+	-ms-flex-align: stretch;
	align-items: stretch;		align-items: stretch;
	width: 100%;		width: 100%;
Line 438:		Line 471:
	.sidebar-index {		.sidebar-index {
	width: 20%;		width: 20%;
−	height: calc(100vh - 70px);	+	height: calc(100vh - 100px);
		+	position: -webkit-sticky;
	position: sticky;		position: sticky;
		+	-ms-flex-item-align: start;
	align-self: flex-start;		align-self: flex-start;
−	top: 70px;	+	top: 100px;
	z-index: 900;		z-index: 900;
	margin: 0;		margin: 0;
Line 454:		Line 489:
	background-color: #333;		background-color: #333;
	-webkit-transition: width 0.3s ease-in-out 0s;		-webkit-transition: width 0.3s ease-in-out 0s;
		+	-o-transition: width 0.3s ease-in-out 0s;
	transition: width 0.3s ease-in-out 0s;		transition: width 0.3s ease-in-out 0s;
	padding: 0;		padding: 0;
Line 471:		Line 507:
	.wrapper .content {		.wrapper .content {
	width: 100%;		width: 100%;
		+	}
		+	.wrapper .sidebar-index {
		+	display: none;
	}		}
	}		}

---

Latest revision as of 20:10, 17 October 2018

@font-face {

   font-family: "TodaySHOP";
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot");
   src: url("https://static.igem.org/mediawiki/2018/b/bc/T--TecCEM--TodaySHOP-Regular.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/a/aa/T--TecCEM--TodaySHOP-Regular.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot");
   src: url("https://static.igem.org/mediawiki/2018/8/88/T--TecCEM--CaeciliaLTStd-Roman.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/2/23/T--TecCEM--CaeciliaLTStd-Roman.woff")
           format("woff");
   font-weight: normal;
   font-style: normal;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot");
   src: url("https://static.igem.org/mediawiki/2018/e/e4/T--TecCEM--CaeciliaLTStd-Italic.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/0/0f/T--TecCEM--CaeciliaLTStd-Italic.woff")
           format("woff");
   font-weight: normal;
   font-style: italic;

}

@font-face {

   font-family: "Caecilia LT Std";
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot");
   src: url("https://static.igem.org/mediawiki/2018/3/3b/T--TecCEM--CaeciliaLTStd-Bold.eot?#iefix")
           format("embedded-opentype"),
       url("https://static.igem.org/mediawiki/2018/6/6f/T--TecCEM--CaeciliaLTStd-Bold.woff")
           format("woff");
   font-weight: bold;
   font-style: normal;

}

1. HQ_page {

   position: absolute;
   top: 4px;
   width: 100%;

}

1. HQ_page,
2. HQ_page p,
3. HQ_page strong,
4. HQ_page a,
5. HQ_page li {

   font-family: "Caecilia LT Std", sans-serif;

} body {

   font-size: 100%;

}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {

   font-size-adjust: 0.5;

}

1. HQ_page {

   height: 100%;

}

1. HQ_page p {

   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 1px;
   color: #333333 !important;

}

1. HQ_page .lead {

   font-size: 1.25rem;
   font-weight: 300;
   color: #555555;

} @media (min-width: 43.75em) {

   #HQ_page {
       font-size: 1rem;
       line-height: 1.375;
   }

}

h1 {

   font-size: 2rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) {

   h1 {
       font-size: 2.5rem;
       line-height: 1.125;
   }

}

@media (min-width: 56.25em) {

   h1 {
       font-size: 3rem;
       line-height: 1.05;
   }

}

h2 {

   font-size: 1.625rem;
   line-height: 1.15384615;

}

@media (min-width: 43.75em) {

   h2 {
       font-size: 2rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) {

   h2 {
       font-size: 2.25rem;
       line-height: 1.25;
   }

}

h3 {

   font-size: 1.375rem;
   line-height: 1.13636364;

}

@media (min-width: 43.75em) {

   h3 {
       font-size: 1.5rem;
       line-height: 1.25;
   }

}

@media (min-width: 56.25em) {

   h3 {
       font-size: 1.75rem;
       line-height: 1.25;
   }

}

h4 {

   font-size: 1.125rem;
   line-height: 1.11111111;

}

@media (min-width: 43.75em) {

   h4 {
       font-size: 1.25rem;
       line-height: 1.22222222;
   }

} @media (min-width: 56.25em) {

   h4 {
       font-size: 1.375rem;
       line-height: 1.25;
   }

}

h5 {

   font-size: 1rem;
   line-height: 1.11111111;

}

@media (min-width: 43.75em) {

   h5 {
       font-size: 1.125rem;
       line-height: 1.22222222;
   }

} @media (min-width: 56.25em) {

   h5 {
       font-size: 1.25rem;
       line-height: 1.25;
   }

}

blockquote {

   font-size: 1.25rem;
   line-height: 1.25;

}

@media (min-width: 43.75em) {

   blockquote {
       font-size: 1.5rem;
       line-height: 1.45833333;
   }

}

1. HQ_page h1,
2. HQ_page h2,
3. HQ_page h3,
4. HQ_page h4,
5. HQ_page h5 {

   font-family: "TodaySHOP", sans-serif;
   letter-spacing: 3px;
   font-weight: normal;
   padding: 1px;

}

1. mw-content-text {

   min-height: 100vh;

}

1. content {

   width: 100% !important;
   height: 100% !important;
   margin-left: 0 !important;
   padding-left: 0 !important;

} .text-project > *, .text-project {

   color: #ff1558 !important;

} .text-team > *, .text-team {

   color: #17cc46 !important;

}

.text-safety > *, .text-safety {

   color: #ef6fca !important;

}

.text-notebook > *, .text-notebook {

   color: #0000ff !important;

}

.text-awards > *, .text-awards {

   color: #ffdb27 !important;

}

.text-parts > *, .text-parts {

   color: #ff9d33 !important;

}

.text-human-practices > *, .text-human-practices {

   color: #0aa38c !important;

} div#gif-title h1 {

   -webkit-text-stroke-width: 0;
   font-size: 3em;
   mix-blend-mode: multiply;

}

1. parallax {

   position: fixed;
   top: 0;
   width: 100vw !important;
   height: 100vh !important;
   background: url("")
       no-repeat center center;
   opacity: 0.08;
   background-size: cover;
   z-index: -1;

}

1. main-container {

   min-height: 100vh !important;
   position: relative;

}

1. main-container p,
2. main-container strong {

   color: white !important;

}

1. main-container #abstract {

   position: absolute;
   left: 0;
   width: 100%;
   right: 0;
   margin: 0 auto;
   bottom: 15%;

} .first-container {

   margin-top: 1rem;

} div#gif-title {

   position: relative;
   height: 210px;
   max-width: 100% !important;
   overflow: hidden;

}

div#gif-title * {

   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);

} div#gif-title img {

   min-width: 100%;

}

1. content h1 {

   color: rgba(255, 255, 255, 0);
   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: black;

}

1. content strong {

   color: black;

}

1. home_logo,
2. sideMenu,
3. top_title,

.patrollink {

   display: none;

}

1. content {

   margin-left: 0px;
   margin-top: -20px;
   padding: 0px;
   width: 100%;

}

body {

   background-color: white;

}

.svgClass {

   display: block;

} .bottom {

   mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/b/b2/T--TecCEM--BtnBottom.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 40px;
   width: 40px;
   margin: auto;

} .open {

   mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/3/34/T--TecCEM--Open.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .closed {

   mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   -webkit-mask: url("https://static.igem.org/mediawiki/2018/8/8e/T--TecCEM--Close.svg")
       no-repeat;
   background-size: contain;
   display: inline-block;
   height: 20px;
   width: 20px;
   margin: auto;

} .dropdown-menu.show {

   background-color: rgba(250, 250, 250, 0.9);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   left: 20%;

}

a.dropdown-item, a.nav-link {

   letter-spacing: 2px;

}

a.dropdown-item:active {

   background-color: #f5e1e1;

}

div#top_menu_14 {

   -webkit-box-sizing: content-box;
   box-sizing: content-box;

}

1. navbarContainer {

   background-color: rgba(250, 250, 250, 0.9);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 0px 0px 5px 5px;

}

1. navbarContainer a {

   font-family: "TodaySHOP", serif;

}

1. navbarContainer a:hover,
2. navbarContainer ul .dropdown-menu a:visited {

   color: #333333 !important;

} .navbar#navbarContainer {

   top: 18px;

}

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

   .navbar {
       top: 20px;
   }
   #navbarTecCEM .w-75.nav-fill {
       width: 100% !important;
   }
   #navbarContainer {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       margin: 2px 2px 2px 2px;
       border-radius: 5px;
   }

}

1. HQ_page .sidebar-index * {

   font-family: "TodaySHOP", "HelveticaNeue-Light", "Helvetica Neue Light",
       "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

1. HQ_page .sidebar-index .sidebar-header {

   text-align: center;

}

1. HQ_page .sidebar-index > a {

   font-size: 1.3rem;
   font-weight: 600;
   letter-spacing: 2px;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li {

   display: table;
   margin-bottom: 5px;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li a {

   font-size: 1.1rem;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li ul li a {

   font-size: 1rem;
   cursor: pointer;

}

1. HQ_page .sidebar-index ul li ul li ul li a {

   font-size: 0.9rem;
   cursor: pointer;

} .wrapper {

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   width: 100%;

}

.sidebar-index {

   width: 20%;
   height: calc(100vh - 100px);
   position: -webkit-sticky;
   position: sticky;
   -ms-flex-item-align: start;
   align-self: flex-start;
   top: 100px;
   z-index: 900;
   margin: 0;
   padding: 1rem;

}

.sidebar-index a:after {

   content: "";
   width: 0;
   height: 1px;
   display: block;
   background-color: #333;
   -webkit-transition: width 0.3s ease-in-out 0s;
   -o-transition: width 0.3s ease-in-out 0s;
   transition: width 0.3s ease-in-out 0s;
   padding: 0;
   margin: 0;

}

.sidebar-index a:hover:after {

   width: 100%;

}

.wrapper .content {

   width: 80%;
   padding: 2% 5%;

}

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

   .wrapper .content {
       width: 100%;
   }
   .wrapper .sidebar-index {
       display: none;
   }

}

.sidebar-index .dropdown {

   position: absolute;
   left: 0px;

}

.sidebar-index a {

   color: inherit;

}

.sidebar-index a:hover {

   text-decoration: none;
   color: black !important;

}

.sidebar-index a:hover p {

   color: black !important;

}

.sidebar-index a:visited, .sidebar-index a:focus {

   color: inherit;
   text-decoration: none;

} .sidebar-index span.open, .sidebar-index span.closed {

   background-color: black;
   vertical-align: middle;

} .navbar-expand-lg .navbar-nav .dropdown-menu {

   width: 100%;
   top: 56px;
   left: 0px;

}