Difference between revisions of "Template:Vilnius-Lithuania/CSS/ContentPage"

Revision as of 14:25, 21 August 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Revision as of 14:28, 21 August 2020 (view source) Paulius (Talk | contribs) m Newer edit →
Line 184:		Line 184:
	}		}
	.index a {		.index a {
−	color: inherit;	+	color: #121212;
−	text-decoration: inherit;	+	text-decoration: none;
	}		}
	.index li {		.index li {
Line 284:		Line 284:
	_::-webkit-full-page-media, _:future, :root .index li::before {		_::-webkit-full-page-media, _:future, :root .index li::before {
−	transition-duration: unset	+	transition-duration: unset;
	}		}

---

Revision as of 14:28, 21 August 2020

body, html {

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.igem_column_wrapper > p {

 margin: 0;

}

1. section-text .content .content-paragraph {

 font-family: "lato-regular";
 margin: 0;
 font-size: 1.4em;
 margin-top: 20px;
 margin-bottom: 40px;

} @media (max-width: 480px) {

 #section-text .content .content-paragraph {
   font-size: 1em;
 }

}

1. section-text .content .h3 {

 font-size: 1.5em;

}

main {

 font-size: initial;

}

div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 {

 font-weight: 800;
 margin-bottom: 0.83em;
 margin-top: 1em;

} div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger {

 font-size: 2.2rem;

}

.introContainer {

 width: 100%;
 height: calc(100vh - 18px);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #121212;

} .introContainer span {

 width: 80vw;
 height: 80vw;
 border-radius: 40vw;
 position: relative;
 background-size: cover;
 background-position: center;
 overflow: hidden;

} @media (min-aspect-ratio: 1/1) {

 .introContainer span {
   width: 80vh;
   height: 80vh;
 }

} .introContainer span #image-overlay {

 width: 100%;
 height: 100%;
 position: absolute;
 background-color: #6281EF;
 mix-blend-mode: multiply;

} .introContainer .heading {

 z-index: 3;
 position: fixed;
 font-size: 7vh;
 top: 46vh;
 left: 10vw;
 color: #FAFAFC;
 text-transform: uppercase;
 font-family: "ubuntu-bold";

} @media (min-aspect-ratio: 1/1) {

 .introContainer .heading {
   font-size: 7vw;
 }

} .introContainer .heading.other {

 top: 48vh;
 left: 8vw;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;

} @media (max-width: 480px) {

 .introContainer .heading {
   top: 49vh;
 }
 .introContainer .heading.other {
   top: 50vh;
 }

} .introContainer::before {

 z-index: 2;
 position: absolute;
 width: 100%;
 height: 100vh;
 content: "";
 pointer-events: none;
 background-image: url(https://static.igem.org/mediawiki/2020/d/db/T--Vilnius-Lithuania--milk1.svg);
 background-size: cover;
 background-position: bottom;
 background-origin: border-box;
 border-bottom: 2px solid #FAFAFC;

}

main {

 margin-top: -5px;
 width: 100%;
 background-color: #FAFAFC;
 z-index: 10;
 position: relative;
 padding-bottom: 50px;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-evenly;

} main::after {

 content: "";
 clear: both;
 display: table;

}

.indexbutton {

 display: none;
 position: fixed;
 bottom: -100px;
 color: #FAFAFC;
 border-radius: 64px 64px 0 0;
 text-transform: capitalize;
 font-size: 1.5rem;
 font-weight: bold;
 padding: 24px 24px 8px;
 cursor: pointer;
 background-color: #6281EF;
 transition: 0.5s;

} .indexbutton[onText=true] {

 bottom: 0px;

} .indexbutton.open {

 bottom: 0px;

} @media (max-width: 800px) {

 .indexbutton {
   display: block;
   z-index: 21;
 }

}

.index {

 text-transform: uppercase;
 float: left;
 margin-left: 10vw;
 position: -webkit-sticky;
 position: sticky;
 top: 50%;
 margin: 200px 32px 0 32px;
 transform: translateY(-50%);
 min-width: 220px;

} @media (max-width: 1024px) {

 .index {
   margin: 200px 8px 0 32px;
 }

} .index b {

 font-size: 1.5em;
 font-weight: bold;
 margin-left: 0.25em;

} .index ul {

 margin: 1em 0;
 padding: 0;

} .index a {

 color: #121212;
 text-decoration: none;

} .index li {

 margin: 24px;
 list-style: none;
 color: #121212;
 padding-left: 1em;
 font-size: 1.1em;
 cursor: pointer;

} .index li:last-child {

 margin-bottom: 0;

} .index li::before {

 width: 0.7em;
 height: 0.7em;
 content: " ";
 margin-left: -1em;
 margin-right: 0.75em;
 box-sizing: border-box;
 position: relative;
 display: inline-block;
 border: 1px solid;
 color: #2E64EC;
 border-radius: 1em;
 transition: 0.5s;

} .index li.active::before {

 background-color: #2E64EC;

} @media (max-width: 800px) {

 .index {
   position: fixed;
   bottom: 0;
   padding: 64px 64px 0;
   border-radius: 1000px 1000px 0 0;
   background-color: #6281EF;
   color: #FAFAFC;
   float: unset;
   margin: 0;
   z-index: 20;
   min-width: 300px;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(50%) scale(0);
 }
 .index b {
   display: block;
   margin-right: 1em;
 }
 .index ul {
   display: inline-block;
   text-align: start;
   margin-top: 0;
   margin-bottom: 60px;
 }
 .index li {
   font-weight: bold;
   color: #FAFAFC;
 }
 .index li::before {
   color: #FAFAFC;
 }
 .index li.active::before {
   background-color: #FAFAFC;
 }
 .index.open {
   transform: translateY(0) scale(1);
 }

}

.content {

 width: 80vw;
 max-width: 700px;
 margin-right: 10vw;
 float: right;
 padding: 40px;
 border-radius: 16px;
 box-shadow: 0 0 10px lightgray;
 color: #121212;

} @media (max-width: 1024px) {

 .content {
   margin-right: 5vw;
 }

} @media (max-width: 800px) {

 .content {
   margin: 0 auto;
   box-shadow: unset;
   padding: 30px;
 }

} .content *:first-child {

 margin-top: 0;

}

_::-webkit-full-page-media, _:future, :root .index li::before {

 transition-duration: unset;

}