Difference between revisions of "Team:IISER-Kolkata/style.css"

Revision as of 14:19, 27 July 2018 (view source) Quasar (Talk | contribs) ← Older edit		Revision as of 05:03, 10 October 2018 (view source) Quasar (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	.logo_2018, #firstHeading, #top_menu_under {	+	.pagelink#homeMenu a {
−	display:none;}	+	color: gold;
−		+
−	#content {	+
−	width: 100vw;	+
−	padding: 0;	+
−	margin-left:0;	+
−	}	+
−	/*fonts*/	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf");	+
−	font-family: blogger;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf");	+
−	font-family: prime;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf");	+
−	font-family: rodina;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf");	+
−	font-family: social;	+
	}		}
−	/*body*/	+	.maincont#container {
−	body, html {	+	width: 100vw;
−	width: 100vw;	+
−	margin: 0;	+
−	padding: 0;	+
−	}	+
−	body {	+
	height: auto;		height: auto;
−	overflow-y: scroll;	+	display: flex;
−	overflow-x: hidden;	+	flex-direction: column;
−	margin: auto;	+
−	}	+
−	body::-webkit-scrollbar-track	+
−	{	+
−	background-color: black;	+
−	}	+
−	body::-webkit-scrollbar	+
−	{	+
−	width: 1vw;	+
−	}	+
−	body::-webkit-scrollbar-thumb	+
−	{	+
−	background-color: #999999;	+
−	}	+
−	body::-webkit-scrollbar-thumb:hover	+
−	{	+
−	background-color: #777777;	+
−	}	+
−	#container {	+
−	height: auto;	+
−	width: 100vw;	+
−	display: flex;	+
−	flex-direction: column;	+
−	}	+
−	section {	+
−	position: relative;	+
−	display: flex;	+
−	height: 100vh;	+
−	width: 100vw;	+
−	}	+
−	#home {	+
−	background: white;	+
−	height: 100vh;	+
−	}	+
−	#home #iiserk {	+
−	height: 6vw;	+
−	width: 6vw;	+
−	display: flex;	+
−	align-items: center;	+
−	position: absolute;	+
−	top: 1vw;	+
−	left: 1vw;	+
−	z-index: 5;	+
−	cursor: pointer;	+
−	}	+
−	#iiserk a img {	+
−	height: 6vw;	+
−	width: auto;	+
−	}	+
−	#home #pagedown {	+
−	top: 90vh;	+
−	left: 47vw;	+
−	height: 3vw;	+
−	width: 6vw;	+
−	cursor: pointer;	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	background-color: gray;	+
−	border: solid black 0.1vw;	+
−	position: absolute;	+
−	font-size: 1.2vw;	+
−	font-family: rodina;	+
	}		}
−	/*abstract page*/	+	section.mainpage {
−	#abstract {	+	position: relative;
−	background-color: #D8D9E5;	+	display: flex;
		+	width: 100vw;
	}		}
−		+	/*Landing*/
−	/*descr page*/	+	.mainpage#landing {
−	#descr {	+	flex-direction: column;
−	background-color: #B4BAC2;	+	min-height: 70vh;
−	}	+
−		+
−	#details {	+
−	background-color: #D8D9E5;	+
−	}	+
−	#interLab {	+
−	height: 500vh;	+
−	}	+
−	#ourTeam {	+
−	background-color: #B4BAC2;	+
−	}	+
−	#sponsors {	+
−	background-color: #D8D9E5;	+
−	}	+
−	#contactUs {	+
−	background-color: #B4BAC2;	+
−	}	+
−		+
−	#home_gif{	+
−	width: 55vw;	+
−	margin-left: 20vw;	+
−	margin-top: 2vh;	+
−	}	+
−	#main_title{	+
−	top: 60vh;	+
−	left: 22vw;	+
−	height: 6vw;	+
−	width: 6vw;	+
−	position: absolute;	+
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
−	font-family: blogger;	+	background-color: #eeeeee;
−	font-size: 4vw ;	+	padding: 15vmin 0vw 5vmin 0vw;
	}		}
−	p {	+	#landing #mainlogo {
−	font-size: 1.3vw !important;	+	height: 50vmin;
−	font-family: blogger !important;	+	width: auto;
		+	margin: 2vw;
	}		}
−	span.heading {	+	#landing h3 {
−	font-size: 1.5vw;	+	width: auto;
	font-family: prime;		font-family: prime;
		+	font-size: 1.8vmax;
		+	margin: 2vw 0vw 1.5vw 0vw;
	}		}
−	#title_desc{	+	#landing p {
−	position: absolute;	+	margin: 0.8vw 0vw 1.2vw 0vw;
−	left: 40vw;	+	font-family: blogger;
−	top: 65vh;	+	font-size: 1.5vmax;
−	height: 4vh;	+
−	width:40vw;	+
−	align-items: center;	+
−	justify-content: center;	+
−	font-family: sans-serif;	+
−	font-size:1.2vw;	+
−		+
	}		}
−		+	/*Sponsors*/
−	#mascot{	+	.mainpage#sponsors {
−	position: absolute;	+	flex-wrap: wrap;
−	margin-left:5vw;	+	height: auto;
−	margin-top: 15vh;	+	background-color: #dddddd;
		+	justify-content: space-around;
	}		}
−	#abstractDiv {	+	#sponsors a img {
−	position: absolute;	+	height: 20vmin;
		+	width: auto;
		+	margin: 2vmax;
	}		}
−	#abstract_text{	+
−	height:70vh;	+	/*Contact Us*/
−	width:55vw;	+	.mainpage#contactUs {
−	left:40vw;	+	flex-wrap: wrap;
−	top:13vh;	+	height: auto;
		+	background-color: #222222;
	justify-content: center;		justify-content: center;
−	align-items: center;
−	position: absolute;
−	font-size: 1.2vw;
−	font-family: sans-serif;
	}		}
−		+	#contactUs #contactLeft {
−		+	display: flex;
−	#descript  ,#detdiv{	+	flex-direction: column;
−	position: absolute;	+	width: 40vw;
−	height:70vh;	+	margin: 2vw;
−	width:80vw;	+
−	top:15vh;	+
−	left:10vw;	+
	}		}
−		+	#contactUs #contactRight {
−		+	display: flex;
−	#des_left ,#det_cont{	+	flex-direction: column;
−	position: absolute;	+	width: 30vw;
−	left:2vw;	+	margin: 2vw;
−	top: 2vh;	+
−	width: 80vw;	+
−	justify-content: center;	+
−	align-items: center;	+
−	text-align: justify;	+
−	font-family: sans-serif;	+
	}		}
−		+	#contactLeft h4,#contactRight h4 {
−		+	margin: 1.5vw 0vw 1vw 0vw;
−	#interDiv {	+	color: #dddddd;
−	position: absolute;	+	font-family: prime;
−	padding: 3vw;	+	font-size: 1.6vmax;
−	width: 80vw;	+
−	height: auto;	+
−	left: 10vw;	+
−	top: 10vh;	+
	}		}
−	table.table {	+	#contactLeft p,#contactRight p {
−	font-size: 1.3vw;	+	margin: 0.5vw 0vw 0.5vw 0vw;
−	border: 0.1vw solid black;	+	color: #dddddd;
	font-family: blogger;		font-family: blogger;
−	}	+	font-size: 1.5vmax;
−	.table td {	+
−	padding: 0.2vw;	+
	}		}
−	.table th {	+	#contactLeft a,#contactRight a {
−	padding: 0.2vw;	+	color: #999999;
−	font-weight: bold;	+	font-family: blogger;
−	}	+	font-size: 1.5vmax;
−		+	text-decoration: none;
−		+
−	#team {	+
−	position: absolute;	+
−	}	+
−	#team_left{	+
−	width: 35vw;	+
−	height: 70vh;	+
−	left:10vw;	+
−	top:25vh;	+
−	position: absolute;	+
−	}	+
−	#team_right{	+
−	width: 35vw;	+
−	height: 70vh;	+
−	left:45vw;	+
−	top:17vh;	+
−	position: absolute;	+
−	}	+
−	#team_right2{	+
−	width: 35vw;	+
−	height: 70vh;	+
−	left:75vw;	+
−	top:17vh;	+
−	position: absolute;	+
−	}	+
−	span.instructName {	+
−	font-size: 2vw;	+
−	}	+
−	span.studentName {	+
−	font-size: 1.2vw;	+
−	}	+
−		+
−		+
−	#spon {	+
−	position: absolute;	+
−	}	+
−	#dbt{	+
−	width:15vw;	+
−	left:10vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	font-size:1.2vw;	+
	}		}
−	#dbt_des{	+	#contactLeft a:hover,#contactRight a:hover {
−	width:15vw;	+
−	left:10vw;	+
−	top:20vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
	color: white;		color: white;
−	text-align: center;
−	font-size:1.2vw;
	}		}
−	#dbt_des:hover{	+	#contactUs #social {
−	opacity: 1;	+	display: flex;
		+	width: 100vw;
		+	margin: 1vmax 0vmax 1vmax 0vmax;
		+	justify-content: center;
	}		}
−	#dbt_text{	+	#social .links {
−	top:45vh;	+	font-family: social;
−	left:10vw;	+	font-size: 4vmax;
−	position: absolute;	+	margin: 1vmax;
−	font-size:1.2vw;	+	color: #999999;
		+	text-decoration: none;
		+	-webkit-transition: 0.2s linear;
		+	-moz-transition: 0.2s linear;
		+	-o-transition: 0.2s linear;
		+	transition: 0.2s linear;
	}		}
−	#gb{	+	#socFacebook:hover {
−	width:25vw;	+	color: #3b5998;
−	position: absolute;	+
−	left:30vw;	+
−	top:15vh;	+
	}		}
−	#gb_text{	+	#socTwitter:hover {
−	top:33vh;	+	color: #00aced;
−	left:39vw;	+
−	position: absolute;	+
−	font-size:1.2vw;	+
	}		}
−	#gb_des{	+	#footer {
−	width:25vw;	+
−	position: absolute;	+
−	left:30vw;	+
−	top:18vh;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	font-size:1.2vw;	+
−	}	+
−	#gb_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#idt{	+
−	width:17.5vw;	+
−	left:60vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	}	+
−	#idt_text{	+
−	top:33vh;	+
−	left:61vw;	+
−	position: absolute;	+
−	font-size:1.2vw;	+
−	}	+
−	#idt_des{	+
−	width:17.5vw;	+
−	left:60vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	font-size:1.2vw;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#idt_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#ik{	+
−	width:15vw;	+
−	left:82vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	}	+
−	#ik_des{	+
−	font-size:1.2vw;	+
−	width:15vw;	+
−	left:82vw;	+
−	top:25vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#ik_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#ik_text{	+
−	position: absolute;	+
−	left:86vw;	+
−	font-size:1.2vw !importan;	+
−	top:47vh;	+
−	}	+
−	#neb{	+
−	width:25vw;	+
−	left:20vw;	+
−	top:60vh;	+
−	position: absolute;	+
−	}	+
−	#neb_des{	+
−	width:25vw;	+
−	left:20vw;	+
−	font-size:1.2vw;	+
−	top:63vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#neb_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#neb_text{	+
−	left:26vw;	+
−	top:80vh;	+
−	font-size:1.2vw;	+
−	position: absolute;	+
−	}	+
−	#sg{	+
−	width: 35vw;	+
−	left:55vw;	+
−	top: 60vh;	+
−	position: absolute;	+
−	}	+
−	#sg_des{	+
−	width: 35vw;	+
−	left:55vw;	+
−	font-size:1.2vw;	+
−	top: 65vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#sg_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#sg_text{	+
−	left:70vw;	+
−	font-size:1.2vw;	+
−	top:80vh;	+
−	position: absolute;	+
−	}	+
−		+
−		+
−	#contactDiv {	+
−	position: absolute;	+
−	}	+
−	#phys{	+
−	width: 40vw;	+
−	height:80vh;	+
−	font-size: 1.5vw;	+
−	position: absolute;	+
−	left:10vw;	+
−	top: 20vh;	+
−	}	+
−	#write{	+
−	width: 40vw;	+
−	height: 35vh;	+
−	left:55vw;	+
−	top:12vh;	+
−	position: absolute;	+
−	}	+
−	#soc{	+
−	left:55vw;	+
−	top:70vh;	+
−	position: absolute;	+
−	width:40vw;	+
−	height: 30vh;	+
−	}	+
−	.ver_tab{	+
−	display:inline-block;	+
−	width: 2vw;	+
−	}	+
−		+
−	/*navbar*/	+
−	#menubar {	+
−	width: 100vw;	+
−	height: 3vw;	+
−	background-color: rgba(0,0,0,1);	+
−	display: inline-flex;	+
−	align-items: center;	+
−	position: absolute;	+
−	top: 100vh;	+
−	left: 0vw;	+
−	z-index: 10;	+
−	}	+
−	#menubar.stickymenu {	+
−	position: fixed;	+
−	top: 16px;	+
−	left: 0vw;	+
−	}	+
−	#menubar #logo {	+
−	margin-left: 1vw;	+
−	margin-right: 1vw;	+
	display: flex;		display: flex;
−	width: 2.5vw;
−	height: 2.5vw;
−	}
−	#logo img {
−	height: 100%;
−	width: 100%;
−	}
−	#menubar .pagelink {
−	display: flex;
	align-items: center;		align-items: center;
−	justify-content: center;	+	justify-content: flex-end;
−	height: 100%;	+	min-height: 2vmax;
−	width: 8vw;	+	width: 90vw;
	}		}
−		+	#footer p {
−	.pagelink div {	+	margin: 1vw 0vh 0vw 0vh;
−	cursor: pointer;	+	padding: 0.5vw 0 0.5vw 0;
−	-webkit-transition: 0.2s linear;	+	border-top: 0.1vw solid white;
−	-moz-transition: 0.2s linear;	+	font-size: 1.5vmax;
−	-o-transition: 0.2s linear;	+	font-family: rodina;
−	transition: 0.2s linear;	+	color: #dddddd;
−	}	+
−	.pagelink div p {	+
−	font-family: prime !important;	+
−	font-size: 1.2vw !important;	+
−	color: #cccccc;	+
−	}	+
−	.pagelink div:hover > p {	+
−	color: white !important;	+
	}		}

---

Revision as of 05:03, 10 October 2018

.pagelink#homeMenu a {

   color: gold;

}

.maincont#container { width: 100vw;

   height: auto;

display: flex; flex-direction: column; }

section.mainpage { position: relative; display: flex; width: 100vw; }

/*Landing*/ .mainpage#landing {

   flex-direction: column;
   min-height: 70vh;
   align-items: center;
   justify-content: center;
   background-color: #eeeeee;
   padding: 15vmin 0vw 5vmin 0vw;

}

1. landing #mainlogo {

   height: 50vmin;
   width: auto; 
   margin: 2vw;   

}

1. landing h3 {

   width: auto;
   font-family: prime;
   font-size: 1.8vmax;
   margin: 2vw 0vw 1.5vw 0vw;

}

1. landing p {

   margin: 0.8vw 0vw 1.2vw 0vw;
   font-family: blogger;
   font-size: 1.5vmax;

}

/*Sponsors*/ .mainpage#sponsors {

   flex-wrap: wrap;
   height: auto;
   background-color: #dddddd;
   justify-content: space-around;

}

1. sponsors a img {

   height: 20vmin;
   width: auto;
   margin: 2vmax;

}

/*Contact Us*/ .mainpage#contactUs {

   flex-wrap: wrap;
   height: auto;
   background-color: #222222;
   justify-content: center;

}

1. contactUs #contactLeft {

   display: flex;
   flex-direction: column;
   width: 40vw;
   margin: 2vw;

}

1. contactUs #contactRight {

   display: flex;
   flex-direction: column;
   width: 30vw;
   margin: 2vw;

}

1. contactLeft h4,#contactRight h4 {

   margin: 1.5vw 0vw 1vw 0vw;
   color: #dddddd;
   font-family: prime;
   font-size: 1.6vmax;

}

1. contactLeft p,#contactRight p {

   margin: 0.5vw 0vw 0.5vw 0vw;
   color: #dddddd;
   font-family: blogger;
   font-size: 1.5vmax;

}

1. contactLeft a,#contactRight a {

   color: #999999;
   font-family: blogger;
   font-size: 1.5vmax;
   text-decoration: none;

}

1. contactLeft a:hover,#contactRight a:hover {

   color: white;

}

1. contactUs #social {

   display: flex;   
   width: 100vw;
   margin: 1vmax 0vmax 1vmax 0vmax;
   justify-content: center; 

}

1. social .links {

   font-family: social;
   font-size: 4vmax;
   margin: 1vmax;
   color: #999999;
   text-decoration: none;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. socFacebook:hover {

   color: #3b5998;

}

1. socTwitter:hover {

   color: #00aced;

}

1. footer {

   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-height: 2vmax;
   width: 90vw;

}

1. footer p {

   margin: 1vw 0vh 0vw 0vh;
   padding: 0.5vw 0 0.5vw 0;
   border-top: 0.1vw solid white;
   font-size: 1.5vmax;
   font-family: rodina;
   color: #dddddd;

}