Difference between revisions of "Template:ITB INDONESIA/dev/css/style"

Revision as of 09:43, 6 August 2015 (view source) Aerlaut (Talk | contribs) m ← Older edit		Revision as of 13:40, 23 August 2015 (view source) Aerlaut (Talk | contribs) Newer edit →
Line 1:		Line 1:
	#globalWrapper {		#globalWrapper {
−	overflow-x: hidden;	+	overflow: hidden;
	}		}
Line 10:		Line 10:
	width: 100%;		width: 100%;
	font: Helvetica, Arial, sans-serif;		font: Helvetica, Arial, sans-serif;
−	font-size : 16px;	+	font-size: 16px;
−	background-color: #9CDCB8;	+	color: #14464a;
−	color: #333;	+
	line-height: 1.3em;		line-height: 1.3em;
	padding: 0;		padding: 0;
−	overflow: hidden;	+	/*background-image: url(../img/rl.png);*/
		+	/*background-size: 30%;*/
		+	background-color: rgba(20, 70, 74, 0.2);
		+	background-position: 200px 300px;
		+	padding: 2% 0;
	}		}
Line 24:		Line 27:
	#bodyContent {		#bodyContent {
−	width: 1080px;	+	width: 90%;
	margin: 0 auto;		margin: 0 auto;
−	background-color: white;	+	padding: 2%;
−	padding: 2% 2% 0 2%;	+
	position: relative;		position: relative;
	margin-bottom: -6px;		margin-bottom: -6px;
		+	background-color: rgba(255,255,255,0.9);
		+	/*background-color: rgba(20, 70, 74, 0.01);*/
		+	border-radius: 20px;
		+	background-image: url("img/rl.png");
	}		}
	#background-left, #background-right {		#background-left, #background-right {
	position: absolute;		position: absolute;
−	background-image: url(https://static.igem.org/mediawiki/2015/9/97/ITB_INDONESIA_IGEM2015_bgside.gif);	+	background-image: url(../img/bg-side.gif);
−	background-repeat : repeat-y;	+
	width: 823px;		width: 823px;
−	height: 120%;	+	height: 2224px;
	top: -2%;		top: -2%;
	}		}
Line 49:		Line 54:
	}		}
−	#header {	+	#background-top {
−	height: 333px;	+	position: absolute;
−	background-image: url(https://static.igem.org/mediawiki/2015/5/55/ITB_INDONESIA_IGEM2015_header.png);	+	background-image: url(https://static.igem.org/mediawiki/2015/2/2b/ITB_INDONESIA_IGEM2015_bgtop.png);
−	position: relative;	+	background-image: url(../img/bg-top.png);
		+	width: 200px;
		+	height: 263px;
		+	left: 100%;
		+	top: -2%;
	}		}
−	#header .socmed {	+	#background-bottom {
	position: absolute;		position: absolute;
−	top : 42%;	+	background-image: url(https://static.igem.org/mediawiki/2015/9/96/ITB_INDONESIA_IGEM2015_bgbottom.png);
−	left : 82%;	+	background-image: url(../img/bg-bottom.png);
		+	width: 320px;
		+	height: 269px;
		+	bottom: 0;
		+	right: 100%;
		+	}
		+
		+	#header h1 {
		+	margin-bottom: 0.8em;
		+	}
		+
		+	#header > div {
		+	display: inline-block;
		+	float: left;
		+	font-size: 2em;
		+	}
		+
		+	#header > div > span {
		+	border-top: 3px solid #14464a;
		+	padding-top: 6px;
		+	}
		+
		+	#header #logo {
		+	width: 25%;
		+	display: inline-block;
		+	float: right;
	}		}
−	#header .socmed img {	+	#header #project-name {
−	width: 8%;	+	font-size: 5em;
−	margin : -6px 6px 0 0;	+	line-height: 100%;
	}		}
Line 77:		Line 111:
	.main-nav {		.main-nav {
	float: left;		float: left;
−	border-bottom: 1px solid #14464a;	+	background-color: #14464a;
	width: 100%;		width: 100%;
		+	margin: 40px -10% 20px -10%;
		+	padding: 15px 10%;
	}		}
	.main-nav a {		.main-nav a {
−	color: #14464a;	+	color: #e0f2eb;
	text-decoration: none;		text-decoration: none;
	display: inline-block;		display: inline-block;
	padding: 10px 1em;		padding: 10px 1em;
		+	font-weight: 500;
	}		}
Line 91:		Line 128:
	font-size: 1.2em;		font-size: 1.2em;
	font-weight: 100;		font-weight: 100;
−	margin: 1% 0 1% 0;	+	margin: 0;
		+	padding: 0;
	}		}
Line 105:		Line 143:
	margin: 0 0 10px 0;		margin: 0 0 10px 0;
	padding: 0;		padding: 0;
−	background-color: #e0f2eb;	+	background-color:rgba(23, 188, 145, 1);
	width: 120%;		width: 120%;
	left: 0;		left: 0;
−	z-index : 1;	+	z-index: 1;
	}		}
Line 116:		Line 154:
	.main-nav > ul li:hover {		.main-nav > ul li:hover {
−	background-color: #e0f2eb;	+	background-color:rgba(23, 188, 145, 1);
	cursor: pointer;		cursor: pointer;
	}		}
Line 124:		Line 162:
	}		}
−	h2 {	+	.team-pic {
−	border-bottom: 1px solid #14464a;	+	margin: 10px 0;
	padding: 10px;		padding: 10px;
−	font-weight: 300;	+	float: left;
−	background-color: #eee;	+	width: 18%;
		+	display: inline-block;
		+	text-align: center;
	}		}
−	h2:not(:first-child) {	+	.team-pic h3 {
−	margin-top:2em;	+	margin-bottom: 2px;
		+	}
		+
		+	.team-pic .position {
		+	color: #888;
		+	}
		+
		+	.team-pic.dosen {
		+	width: 18%;
		+	}
		+
		+	.team-pic.leader {
		+	width: 100%;
		+	}
		+
		+	.team-pic img {
		+	width: 180px;
		+	box-shadow: 0 0 10px darkgray;
		+	margin: 0 20px 0 10px;;
		+	vertical-align: top;
		+	}
		+
		+	.team-pic > div {
		+	}
		+
		+	h2 {
		+	border-bottom: 2px solid #14464a;
		+	padding: 18px;
		+	font-weight: 700;
		+	/*background-color: rgba(23, 188, 145, 0.1);*/
		+	/*background: radial-gradient(circle, rgba(23, 188, 145, 0.3), 30%, rgba(23, 188, 145, 0), 50%, rgba(0, 0, 0, 0));*/
		+	text-align: center;
		+	}
		+
		+	h3 {
		+	font-weight: 700;
		+	padding-bottom: 5px;
	}		}
Line 138:		Line 214:
	word-spacing: 0.1em;		word-spacing: 0.1em;
	}		}
		+
		+	section {
		+	margin: 20px 0 60px 0;
		+	}
		+
		+	#idea { float: right; }
	.achievement ul {		.achievement ul {
Line 162:		Line 244:
	.achievement ul li.done::before {		.achievement ul li.done::before {
−	background-image: url(https://static.igem.org/mediawiki/2015/6/6f/ITB_INDONESIA_check_mark.png);	+	background-image: url("../img/check_mark.png");
	}		}
	.achievement ul li.not-done::before {		.achievement ul li.not-done::before {
−	background-image: url(https://static.igem.org/mediawiki/2015/2/20/ITB_INDONESIA_cross_mark.png);	+	background-image: url("../img/cross_mark.png");
−	}	+
−		+
−	.humprac {	+
−	width : 30%;	+
−	margin: 5px 1.5%;	+
−	}	+
−		+
−	footer {	+
−	border-top: 1px solid #14464a;	+
−	background-color: #eee;	+
−	text-align: center;	+
−	padding: 20px 0;	+
−	margin-top: 20px;	+
	}		}
Line 187:		Line 256:
	.bg-silver {		.bg-silver {
−	background-color: #efefef;	+	background-color: white;
	}		}
	.bg-gold {		.bg-gold {
	background-color: #dfcd78;		background-color: #dfcd78;
		+	}
		+
		+	footer {
		+	border-top: 1px solid #14464a;
		+	background-color:rgba(23, 188, 145, 0.05);
		+	text-align: center;
		+	padding: 20px 0;
		+	margin-top: 20px;
		+	}
		+
		+	#rhamno {
		+	position: absolute;
	}		}

---

Revision as of 13:40, 23 August 2015

1. globalWrapper {

 overflow: hidden;

}

.firstHeading {

 display: none;

}

1. content {

 width: 100%;
 font: Helvetica, Arial, sans-serif;
 font-size: 16px;
 color: #14464a;
 line-height: 1.3em;
 padding: 0;
 /*background-image: url(../img/rl.png);*/
 /*background-size: 30%;*/
 background-color: rgba(20, 70, 74, 0.2);
 background-position: 200px 300px;
 padding: 2% 0;

}

a, a:visited {

 color: #14464a;
 text-decoration: none;

}

1. bodyContent {

 width: 90%;
 margin: 0 auto;
 padding: 2%;
 position: relative;
 margin-bottom: -6px;
 background-color: rgba(255,255,255,0.9);
 /*background-color: rgba(20, 70, 74, 0.01);*/
 border-radius: 20px;
 background-image: url("img/rl.png");

}

1. background-left, #background-right {

 position: absolute;
 background-image: url(../img/bg-side.gif);
 width: 823px;
 height: 2224px;
 top: -2%;

}

1. background-left {

 right : 100%;

}

1. background-right {

 left: 100%;

}

1. background-top {

 position: absolute;
 background-image: url();
 background-image: url(../img/bg-top.png);
 width: 200px;
 height: 263px;
 left: 100%;
 top: -2%;

}

1. background-bottom {

 position: absolute;
 background-image: url();
 background-image: url(../img/bg-bottom.png);
 width: 320px;
 height: 269px;
 bottom: 0;
 right: 100%;

}

1. header h1 {

 margin-bottom: 0.8em;

}

1. header > div {

 display: inline-block;
 float: left;
 font-size: 2em;

}

1. header > div > span {

 border-top: 3px solid #14464a;
 padding-top: 6px;

}

1. header #logo {

 width: 25%;
 display: inline-block;
 float: right;

}

1. header #project-name {

  font-size: 5em;
  line-height: 100%;

}

nav {

 margin-bottom: 20px;

}

.logo {

 width: 20%;
 float: left;

}

.main-nav {

 float: left;
 background-color: #14464a;
 width: 100%;
 margin: 40px -10% 20px -10%;
 padding: 15px 10%;

}

.main-nav a {

 color: #e0f2eb;
 text-decoration: none;
 display: inline-block;
 padding: 10px 1em;
 font-weight: 500;

}

.main-nav > ul {

 font-size: 1.2em;
 font-weight: 100;
 margin: 0;
 padding: 0;

}

.main-nav > ul > li {

 float: left;
 position: relative;
 list-style: none;

}

.main-nav > ul > li ul {

 position: absolute;
 display: none;
 margin: 0 0 10px 0;
 padding: 0;
 background-color:rgba(23, 188, 145, 1);
 width: 120%;
 left: 0;
 z-index: 1;

}

.main-nav > ul > li ul li {

 display: block;

}

.main-nav > ul li:hover {

 background-color:rgba(23, 188, 145, 1);
 cursor: pointer;

}

.main-nav > ul li:hover > ul {

 display: block;

}

.team-pic {

 margin: 10px 0;
 padding: 10px;
 float: left;
 width: 18%;
 display: inline-block;
 text-align: center;

}

.team-pic h3 {

 margin-bottom: 2px;

}

.team-pic .position {

 color: #888;

}

.team-pic.dosen {

 width: 18%;

}

.team-pic.leader {

 width: 100%;

}

.team-pic img {

 width: 180px;
 box-shadow: 0 0 10px darkgray;
 margin: 0 20px 0 10px;;
 vertical-align: top;

}

.team-pic > div { }

h2 {

 border-bottom: 2px solid #14464a;
 padding: 18px;
 font-weight: 700;
 /*background-color: rgba(23, 188, 145, 0.1);*/
 /*background: radial-gradient(circle, rgba(23, 188, 145, 0.3), 30%, rgba(23, 188, 145, 0), 50%, rgba(0, 0, 0, 0));*/
 text-align: center;

}

h3 {

 font-weight: 700;
 padding-bottom: 5px;

}

p {

 word-spacing: 0.1em;

}

section {

 margin: 20px 0 60px 0;

}

1. idea { float: right; }

.achievement ul {

 margin: 0 0 0 2em;
 list-style-type: none;
 list-style-image: none;

}

.achievement ul li {

 margin: 10px 0;
 position: relative;

}

.achievement ul li.done::before, .achievement ul li.not-done::before {

 background-size: 1.2em;
 width: 1.5em;
 height: 1.5em;
 content: " ";
 display: inline-block;
 background-repeat: no-repeat;
 position: absolute;
 left: -1.7em;

}

.achievement ul li.done::before {

 background-image: url("../img/check_mark.png");

}

.achievement ul li.not-done::before {

 background-image: url("../img/cross_mark.png");

}

.bg-bronze {

 background-color: #daab85;

}

.bg-silver {

 background-color: white;

}

.bg-gold {

 background-color: #dfcd78;

}

footer {

 border-top: 1px solid #14464a;
 background-color:rgba(23, 188, 145, 0.05);
 text-align: center;
 padding: 20px 0;
 margin-top: 20px;

}

1. rhamno {

 position: absolute;

}

.clearfix {

 clear: both;

}