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

Revision as of 15:51, 5 October 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Revision as of 16:00, 5 October 2020 (view source) Paulius (Talk | contribs) m Newer edit →
Line 10:		Line 10:
	}		}
−	#section-text .content .content-paragraph {	+	#section-text .content .content-paragraph, #section-text .content .reference {
	font-family: "lato-regular";		font-family: "lato-regular";
	margin: 0;		margin: 0;
−	font-size: 1.4rem;	+	font-size: 1.2rem;
−	line-height: 1.4;	+	line-height: 1.5;
	margin-top: 20px;		margin-top: 20px;
	margin-bottom: 40px;		margin-bottom: 40px;
		+	text-align: justify;
	}		}
	@media (max-width: 480px) {		@media (max-width: 480px) {
−	#section-text .content .content-paragraph {	+	#section-text .content .content-paragraph, #section-text .content .reference {
−	font-size: 1em;	+	font-size: 1rem;
	}		}
		+	}
		+	#section-text .content .reference {
		+	word-break: break-word;
	}		}
	#section-text .content .h3 {		#section-text .content .h3 {
−	font-size: 1.5em;	+	font-size: 1.5rem;
		+	}
		+	#section-text .content .references {
		+	font-size: 1.9rem;
	}		}
Line 31:		Line 38:
	}		}
−	div.h1,	+	div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 {
−	div.h2,	+	font-family: "montserrat-bold";
−	div.h3,	+
−	div.h4,	+
−	div.h5,	+
−	div.h6 {	+
	font-weight: 800;		font-weight: 800;
	margin-bottom: 0.83em;		margin-bottom: 0.83em;
−	margin-top: 1em;	+	margin-top: 1rem;
	}		}
−	div.h1.larger,	+	div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger {
−	div.h2.larger,	+	font-size: 1.9rem;
−	div.h3.larger,	+
−	div.h4.larger,	+
−	div.h5.larger,	+
−	div.h6.larger {	+
−	font-size: 2.2rem;	+
	}		}
Line 85:		Line 83:
	position: absolute;		position: absolute;
	font-size: 5.7vh;		font-size: 5.7vh;
−	font-size: min(7vh, 12vw);	+	font-size: calc(3vh + 2vw);
	top: 46vh;		top: 46vh;
	left: 10vw;		left: 10vw;
Line 151:		Line 149:
	.indexbutton {		.indexbutton {
	display: none;		display: none;
−	position: fixed;
−	bottom: -100px;
	color: #FAFAFC;		color: #FAFAFC;
−	border-radius: 64px 64px 0 0;
	text-transform: capitalize;		text-transform: capitalize;
−	font-size: 1.5rem;	+	font-size: 1.4rem;
		+	width: 100%;
		+	text-align: center;
	font-weight: bold;		font-weight: bold;
−	padding: 24px 24px 8px;	+	padding: 16px 0;
		+	height: 62px;
		+	box-sizing: border-box;
	cursor: pointer;		cursor: pointer;
	background-color: #6281EF;		background-color: #6281EF;
		+	z-index: 21;
	transition: 0.5s;		transition: 0.5s;
−	}
−	.indexbutton[onText=true] {
−	bottom: 0px;
−	}
−	.indexbutton.open {
−	bottom: 0px;
	}		}
	@media (max-width: 800px) {		@media (max-width: 800px) {
	.indexbutton {		.indexbutton {
	display: block;		display: block;
−	z-index: 21;
	}		}
	}		}
Line 183:		Line 176:
	position: sticky;		position: sticky;
	top: 50%;		top: 50%;
−	margin: 200px 32px 0 8vw;	+	margin: 200px 32px 0 4vw;
	transform: translateY(-50%);		transform: translateY(-50%);
	min-width: 220px;		min-width: 220px;
Line 194:		Line 187:
	}		}
	.sideBlock b {		.sideBlock b {
−	font-size: 1.5em;	+	font-family: "montserrat-bold";
		+	font-size: 1.4rem;
	font-weight: bold;		font-weight: bold;
	margin-left: 0.25em;		margin-left: 0.25em;
Line 211:		Line 205:
	list-style: none;		list-style: none;
	color: #121212;		color: #121212;
−	font-size: 1.1em;	+	font-size: 1.1rem;
	cursor: pointer;		cursor: pointer;
	display: flex;		display: flex;
Line 239:		Line 233:
	position: fixed;		position: fixed;
	bottom: 0;		bottom: 0;
−	padding: 64px 64px 0;	+	padding: 0 64px;
−	border-radius: 1000px 1000px 0 0;	+
	background-color: #6281EF;		background-color: #6281EF;
	color: #FAFAFC;		color: #FAFAFC;
Line 246:		Line 239:
	margin: 0;		margin: 0;
	z-index: 20;		z-index: 20;
−	min-width: 300px;	+	width: 100%;
		+	box-sizing: border-box;
		+	min-width: unset;
	max-width: unset;		max-width: unset;
	text-align: center;		text-align: center;
	transition: transform 0.5s;		transition: transform 0.5s;
	top: unset;		top: unset;
−	transform: translateY(50%) scale(0);	+	transform: translateY(calc(100% - 62px));
		+	display: flex;
		+	flex-direction: column;
		+	align-items: center;
	}		}
	.sideBlock b {		.sideBlock b {
	display: block;		display: block;
−	margin-right: 1em;	+	margin: 0;
	}		}
	.sideBlock ul {		.sideBlock ul {
Line 261:		Line 259:
	text-align: start;		text-align: start;
	margin-top: 0;		margin-top: 0;
−	margin-bottom: 60px;	+	margin-bottom: 30px;
	}		}
	.sideBlock li {		.sideBlock li {
Line 276:		Line 274:
	}		}
	.sideBlock.open {		.sideBlock.open {
−	transform: translateY(0) scale(1);	+	transform: translateY(0);
	}		}
	}		}
Line 282:		Line 280:
	.contentBlock {		.contentBlock {
	width: 64vw;		width: 64vw;
−	max-width: 750px;	+	max-width: 700px;
	float: right;		float: right;
	display: flex;		display: flex;
Line 289:		Line 287:
	@media (max-width: 1024px) {		@media (max-width: 1024px) {
	.contentBlock {		.contentBlock {
−	margin-right: 3vw;	+	margin-right: 5vw;
	}		}
	}		}
Line 295:		Line 293:
	.contentBlock {		.contentBlock {
	margin-right: unset;		margin-right: unset;
−	width: unset;	+	width: 100%;
		+	box-sizing: border-box;
		+	max-width: 650px;
	}		}
	}		}
	.content {		.content {
−	padding: 40px;	+	padding: 64px;
	border-radius: 5px;		border-radius: 5px;
	box-shadow: 0 0 10px lightgray;		box-shadow: 0 0 10px lightgray;
	color: #121212;		color: #121212;
	margin-top: 40px;		margin-top: 40px;
		+	overflow: hidden;
	}		}
	@media (max-width: 800px) {		@media (max-width: 800px) {
Line 310:		Line 311:
	margin: 0 auto;		margin: 0 auto;
	box-shadow: unset;		box-shadow: unset;
−	padding: 30px;	+	padding: 40px;
		+	width: 100%;
		+	box-sizing: border-box;
		+	}
		+	}
		+	@media (max-width: 400px) {
		+	.content {
		+	padding: 20px;
	}		}
	}		}

---

Revision as of 16:00, 5 October 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, #section-text .content .reference {

 font-family: "lato-regular";
 margin: 0;
 font-size: 1.2rem;
 line-height: 1.5;
 margin-top: 20px;
 margin-bottom: 40px;
 text-align: justify;

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

 #section-text .content .content-paragraph, #section-text .content .reference {
   font-size: 1rem;
 }

}

1. section-text .content .reference {

 word-break: break-word;

}

1. section-text .content .h3 {

 font-size: 1.5rem;

}

1. section-text .content .references {

 font-size: 1.9rem;

}

main {

 font-size: initial;

}

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

 font-family: "montserrat-bold";
 font-weight: 800;
 margin-bottom: 0.83em;
 margin-top: 1rem;

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

 font-size: 1.9rem;

}

.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: 1000px;
 position: relative;
 background-size: cover;
 background-position: 0px 0px;
 background-attachment: fixed;
 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: absolute;
 font-size: 5.7vh;
 font-size: calc(3vh + 2vw);
 top: 46vh;
 left: 10vw;
 color: #FAFAFC;
 text-transform: uppercase;
 font-family: "montserrat-black";

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

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

 main {
   justify-content: center;
 }

}

.indexbutton {

 display: none;
 color: #FAFAFC;
 text-transform: capitalize;
 font-size: 1.4rem;
 width: 100%;
 text-align: center;
 font-weight: bold;
 padding: 16px 0;
 height: 62px;
 box-sizing: border-box;
 cursor: pointer;
 background-color: #6281EF;
 z-index: 21;
 transition: 0.5s;

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

 .indexbutton {
   display: block;
 }

}

.sideBlock {

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

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

 .sideBlock {
   margin: 200px 32px 0 4vw;
 }

} .sideBlock b {

 font-family: "montserrat-bold";
 font-size: 1.4rem;
 font-weight: bold;
 margin-left: 0.25em;
 display: block;

} .sideBlock ul {

 margin: 1em 0;
 padding: 0;

} .sideBlock a {

 color: #121212;
 text-decoration: none;

} .sideBlock li {

 margin: 24px;
 list-style: none;
 color: #121212;
 font-size: 1.1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 margin-left: 0.25em;

} .sideBlock li:last-child {

 margin-bottom: 0;

} .sideBlock li div {

 max-width: 15px;
 max-height: 15px;
 box-sizing: border-box;
 border: 1px solid;
 color: #2E64EC;
 border-radius: 20px;
 transition: 0.5s;
 margin-right: 8px;
 height: 10vw;
 width: 10vh;

} .sideBlock li.active div {

 background-color: #2E64EC;

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

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 0 64px;
   background-color: #6281EF;
   color: #FAFAFC;
   float: unset;
   margin: 0;
   z-index: 20;
   width: 100%;
   box-sizing: border-box;
   min-width: unset;
   max-width: unset;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(calc(100% - 62px));
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .sideBlock b {
   display: block;
   margin: 0;
 }
 .sideBlock ul {
   display: inline-block;
   text-align: start;
   margin-top: 0;
   margin-bottom: 30px;
 }
 .sideBlock li {
   font-weight: bold;
 }
 .sideBlock li a {
   color: #FAFAFC;
 }
 .sideBlock li div {
   color: #FAFAFC;
 }
 .sideBlock li.active div {
   background-color: #FAFAFC;
 }
 .sideBlock.open {
   transform: translateY(0);
 }

}

.contentBlock {

 width: 64vw;
 max-width: 700px;
 float: right;
 display: flex;
 flex-direction: column;

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

 .contentBlock {
   margin-right: 5vw;
 }

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

 .contentBlock {
   margin-right: unset;
   width: 100%;
   box-sizing: border-box;
   max-width: 650px;
 }

}

.content {

 padding: 64px;
 border-radius: 5px;
 box-shadow: 0 0 10px lightgray;
 color: #121212;
 margin-top: 40px;
 overflow: hidden;

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

 .content {
   margin: 0 auto;
   box-shadow: unset;
   padding: 40px;
   width: 100%;
   box-sizing: border-box;
 }

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

 .content {
   padding: 20px;
 }

} .content *:first-child {

 margin-top: 0;

}

_::-webkit-full-page-media, _:future,

root {

 transition-duration: unset;

}