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

Revision as of 16:32, 23 August 2019 (view source) Quasar (Talk | contribs) ← Older edit		Revision as of 16:45, 23 August 2019 (view source) Quasar (Talk | contribs) Newer edit →
Line 45:		Line 45:
	/*navbar*/		/*navbar*/
−	#menubar {	+	#navbar {
	width: 100vw;		width: 100vw;
	height: 6vmax;		height: 6vmax;
Line 58:		Line 58:
	box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);		box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
	}		}
−	#menubar #mobdiv {	+	#navbar #mobdiv {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
Line 81:		Line 81:
	display: none;		display: none;
	}		}
−	#menubar ul {	+	#navbar ul {
	list-style: none;		list-style: none;
	display: flex;		display: flex;
	}		}
−	#menubar > ul > li {	+	#navbar > ul > li {
	position: relative;		position: relative;
	-webkit-transition: 0.2s linear;		-webkit-transition: 0.2s linear;
Line 92:		Line 92:
	transition: 0.2s linear;		transition: 0.2s linear;
	}		}
−	#menubar ul li div {	+	#navbar ul li div {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	}		}
−	#menubar ul li div a {	+	#navbar ul li div a {
	width: 100%;		width: 100%;
	text-decoration: none;		text-decoration: none;
Line 108:		Line 108:
	transition: 0.2s linear;		transition: 0.2s linear;
	}		}
−	#menubar > ul > li > div {	+	#navbar > ul > li > div {
	width: auto;		width: auto;
	height: 6vmax;		height: 6vmax;
	}		}
−	#menubar > ul > li > div > a {	+	#navbar > ul > li > div > a {
	color: white;		color: white;
	}		}
−	#menubar > ul > li:hover > div > a {	+	#navbar > ul > li:hover > div > a {
	color: black;		color: black;
	}		}
−	#menubar > ul > li:hover {	+	#navbar > ul > li:hover {
	background-color: rgb(101,206,69);		background-color: rgb(101,206,69);
	}		}
−	#menubar > ul > li:hover .dropdown li {	+	#navbar > ul > li:hover .dropdown li {
	display: flex;		display: flex;
	-webkit-animation: fade 2s linear;		-webkit-animation: fade 2s linear;
Line 162:		Line 162:
	/*mobile mode*/		/*mobile mode*/
	@media screen and (orientation: portrait) {		@media screen and (orientation: portrait) {
−	#menubar {	+	#navbar {
	flex-direction: column;		flex-direction: column;
	height: auto;		height: auto;
Line 168:		Line 168:
	box-shadow: none;		box-shadow: none;
	}		}
−	#menubar {	+	#navbar {
	flex-direction: column;		flex-direction: column;
	height: auto;		height: auto;
	}		}
−	#menubar #mobdiv {	+	#navbar #mobdiv {
	width: 100%;		width: 100%;
	height: 10vmax;		height: 10vmax;
Line 229:		Line 229:
	transform: rotate(45deg) translateY(-0.35vmax);		transform: rotate(45deg) translateY(-0.35vmax);
	}		}
−	#menubar > ul {	+	#navbar > ul {
	width: auto;		width: auto;
	height: auto;		height: auto;
Line 238:		Line 238:
	box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);		box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
	}		}
−	#menubar > ul > li {	+	#navbar > ul > li {
	width: 25vw;		width: 25vw;
	height: 6vmax;		height: 6vmax;
Line 246:		Line 246:
	align-items: center;		align-items: center;
	}		}
−	#menubar > ul > li > div {	+	#navbar > ul > li > div {
	height: 6vmax;		height: 6vmax;
	}		}
−	#menubar > ul > li > div > a {	+	#navbar > ul > li > div > a {
	text-align: center;		text-align: center;
	width: 25vw;		width: 25vw;
Line 255:		Line 255:
	font-size: 2.5vmax;		font-size: 2.5vmax;
	}		}
−	#menubar > ul.visible {	+	#navbar > ul.visible {
	display: flex;		display: flex;
	}		}
−	#menubar > ul > li:hover .dropdown {	+	#navbar > ul > li:hover .dropdown {
	display: flex;		display: flex;
	-webkit-animation: fade 2s linear;		-webkit-animation: fade 2s linear;
Line 265:		Line 265:
	animation: fade 0.2s linear;		animation: fade 0.2s linear;
	}		}
−	#menubar .dropdown {	+	#navbar .dropdown {
	width: auto;		width: auto;
	position: relative;		position: relative;
Line 273:		Line 273:
	box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);		box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
	}		}
−	#menubar .dropdown > li {	+	#navbar .dropdown > li {
	display: flex;		display: flex;
	width: 30vw;		width: 30vw;
Line 280:		Line 280:
	align-items: center;		align-items: center;
	}		}
−	#menubar .dropdown > li > div {	+	#navbar .dropdown > li > div {
	height: 6vmax;		height: 6vmax;
	}		}
−	#menubar .dropdown > li > div > a {	+	#navbar .dropdown > li > div > a {
	text-align: center;		text-align: center;
	height: 100%;		height: 100%;

---

Revision as of 16:45, 23 August 2019

1. top_title, .logo_2019, #firstHeading{

display: none !important; }

1. content{

width: 100vw !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: absolute !important; left: 0 !important; }

/*fonts*/ @font-face {

   src: url("../fonts/Quesha.ttf");
   font-family: que;

} @font-face {

   src: url("../fonts/Rabelo.otf");
   font-family: eav;

} @font-face {

   src: url("../fonts/Vollkorn.ttf");
   font-family: vol;

} @font-face {

   src: url("../fonts/Wallington.ttf");
   font-family: wal;

} @font-face {

   src: url("../fonts/social.ttf");
   font-family: social;

}

/*body*/

• {

   margin: 0;
   padding: 0;
   box-sizing: border-box;

} body {

   overflow-y: scroll;
   overflow-x: hidden;

}

/*navbar*/

1. navbar {

   width: 100vw;
   height: 6vmax;
   background-color: black;
   display: flex;
   flex-wrap: wrap;
   align-items: center;  
   position: fixed;
   top: 16px;
   left: 0vw;
   z-index: 10;
   box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);

}

1. navbar #mobdiv {

   display: flex;  
   align-items: center;
   justify-content: space-between;
   width: auto;
   height: 6vmax;

}

1. mobdiv #logo {

   margin-left: 2vmax;
   display: flex;
   height: 100%;
   width: 14vmax;    

}

1. logo > a {

   width: 100%;
   padding: 0.2vmin 0.5vmin 0.2vmin 0.5vmin;

}

1. logo > a > img {

   height: 100%;   

}

1. mobdiv #menuicon {

   display: none;

}

1. navbar ul {

   list-style: none;
   display: flex;

}

1. navbar > ul > li {

   position: relative;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. navbar ul li div {

   display: flex;
   align-items: center;

}

1. navbar ul li div a {

   width: 100%; 
   text-decoration: none;
   font-family: ;
   font-size: 1.5vmax;  
   cursor: pointer; 
   padding: 1vmax;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. navbar > ul > li > div {

   width: auto;
   height: 6vmax;

}

1. navbar > ul > li > div > a {

   color: white; 

}

1. navbar > ul > li:hover > div > a {

   color: black;

}

1. navbar > ul > li:hover {

   background-color: rgb(101,206,69);

}

1. navbar > ul > li:hover .dropdown li {

   display: flex;    
   -webkit-animation: fade 2s linear;
   -moz-animation: fade 0.2s linear;
   -o-animation: fade 0.2s linear;
   animation: fade 0.2s linear;

} .dropdown {

   position: absolute;
   display: flex;
   flex-direction: column;
   background-color: rgb(116,237,70);
   box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);

} .dropdown > li {

   display: none;

} .dropdown > li > div {

   height: 3.5vmax;
   width: 100%;

} .dropdown > li > div > a {

   color: black;

} .dropdown li:hover > div > a {

   color: black;

} .dropdown li:hover {

   background-color: rgb(101,206,69);

} @-webkit-keyframes fade {

     0% { opacity: 0;}   
   100% { opacity: 1;}

} @-moz-keyframes fade {

     0% { opacity: 0;}   
   100% { opacity: 1;}

}

/*mobile mode*/ @media screen and (orientation: portrait) {

   #navbar {  
       flex-direction: column;
       height: auto;
       background: none;
       box-shadow: none;
   }
   #navbar {  
       flex-direction: column;
       height: auto;
   }
   #navbar #mobdiv {
       width: 100%;
       height: 10vmax;
       display: flex;
       flex-direction: row;
   }
   #mobdiv #logo {
       width: 30%;
       height: 100%;
   }
   #logo a img {
       height: 100%;
       width: auto;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   #mobdiv #menuicon {
       display: flex;
       height: 3.5vmax;
       width: 3.7vmax;
       cursor: pointer;   
       margin-right: 5vmax;     
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   #bar1, #bar2, #bar3 {
       margin: 0.3vmax 0vh 0.3vmax 0vh;
       width: 3.7vmax;
       height: 0.3vmax;
       background-color: white;
       border-radius: 25%;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   .change #bar1 {
       margin: 0vw;
       -webkit-transform: rotate(-45deg) translateY(0.35vmax);
       -moz-transform: rotate(-45deg) translateY(0.35vmax);
       -o-transform: rotate(-45deg) translateY(0.35vmax);
       transform: rotate(-45deg) translateY(0.35vmax);
   }
   .change #bar2 {
       margin: 0vw;
       opacity: 0;
   }
   .change #bar3 {
       margin: 0vw;
       -webkit-transform: rotate(45deg) translateY(-0.35vmax);
       -moz-transform: rotate(45deg) translateY(-0.35vmax);
       -o-transform: rotate(45deg) translateY(-0.35vmax);
       transform: rotate(45deg) translateY(-0.35vmax);
   }
   #navbar > ul {
       width: auto;
       height: auto;
       display: none;
       align-self: flex-end;
       flex-direction: column; 
       background-color: rgb(116,237,70);
       box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
   }
   #navbar > ul > li {  
       width: 25vw;
       height: 6vmax;  
       display: flex;
       flex-direction: row-reverse;
       justify-content: flex-start;
       align-items: center;
   }
   #navbar > ul > li > div {
       height: 6vmax;
   }
   #navbar > ul > li > div > a {
       text-align: center;
       width: 25vw;
       color: black;       
       font-size: 2.5vmax;  
   }
   #navbar > ul.visible {
       display: flex;
   }
   #navbar > ul > li:hover .dropdown {
       display: flex;    
       -webkit-animation: fade 2s linear;
       -moz-animation: fade 0.2s linear;
       -o-animation: fade 0.2s linear;
       animation: fade 0.2s linear;
   }
   #navbar .dropdown {
       width: auto;
       position: relative;
       display: none;
       flex-direction: column;
       align-self: flex-start;
       box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
   }
   #navbar .dropdown > li {
       display: flex;
       width: 30vw;
       height: 6vmax; 
       justify-content: center;
       align-items: center;  
   }
   #navbar .dropdown > li > div {
       height: 6vmax;
   }
   #navbar .dropdown > li > div > a {
       text-align: center;
       height: 100%;
       width: 30vw;
       font-size: 2.5vmax;
   }

}