Difference between revisions of "Template:TecCEM/Style"

Revision as of 04:35, 9 October 2018 (view source) Joellara (Talk | contribs) ← Older edit		Revision as of 04:54, 9 October 2018 (view source) Joellara (Talk | contribs) Newer edit →
Line 412:		Line 412:
	.sidebar-index {		.sidebar-index {
	width: 20%;		width: 20%;
−	height: 100vh;	+	height: calc(100vh - 70px);
	position: sticky;		position: sticky;
	align-self: flex-start;		align-self: flex-start;

---

Revision as of 04:54, 9 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 {
   line-height: 1.22222222;
 }

}

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-red > *, .text-red {

 color: #ff1558 !important;

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

 color: #17cc46 !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%;
 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 {

 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:visited,
2. navbarContainer a:hover {

 color: #333333 !important;

} .navbar {

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

}

.wrapper div.container-fluid {

 padding-right: 2rem;

}

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;

}

1. HQ_page .sidebar-index ul li {

 display: table;
 margin-bottom: 5px;

}

1. HQ_page .sidebar-index ul li a {

 font-size: 1.1rem;

}

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

 font-size: 1rem;

}

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

 font-size: 0.9rem;

} .wrapper {

 display: flex;
 align-items: stretch;
 width: 100%;

}

.sidebar-index {

 width: 20%;
 height: calc(100vh - 70px);
 position: sticky;
 align-self: flex-start;
 top: 70px;
 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;
 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%;

}

.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;

}