Added styles to team page.

frontend/app/js/views/Team/index.jsx

@@ -22,61 +22,114 @@ export default class Team extends Component {
 
 				<div className="current-members">
 					<div className="current-member">
-						<span className="name">Kristian Vos</span>
-						<span className="line"><b>Role:</b> <span>Founder - Developer - Designer</span></span>
-						<span className="line"><b>Joined:</b> <span>September 23, 2015</span></span>
-						<span className="line"><b>Email:</b> <span><a href="mailto:&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">kris@musare.com</a></span></span>
+						<img className="picture" src="/assets/images/notes-transparent.png"/>
+						<div className="lines">
+							<span className="name">Kristian Vos</span>
+							<span className="line"><b>Role:</b> <span>Founder - Developer - Designer</span></span>
+							<span className="line"><b>Joined:</b> <span>September 23, 2015</span></span>
+							<span className="line"><b>Email:</b> <span><a href="mailto:&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">kris@musare.com</a></span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="current-member">
-						<span className="name">Owen Diffey</span>
-						<span className="line"><b>Role:</b> <span>Community manager</span></span>
-						<span className="line"><b>Joined:</b> <span>February 29, 2016</span></span>
-						<span className="line"><b>Email:</b> <span><a href="mailto:&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">owen@musare.com</a></span></span>
+						<img className="picture" src="/assets/images/notes-transparent.png"/>
+						<div className="lines">
+							<span className="name">Owen Diffey</span>
+							<span className="line"><b>Role:</b> <span>Community manager</span></span>
+							<span className="line"><b>Joined:</b> <span>February 29, 2016</span></span>
+							<span className="line"><b>Email:</b> <span><a href="mailto:&#111;&#119;&#101;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">owen@musare.com</a></span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="current-member">
-						<span className="name">Antonio</span>
-						<span className="line"><b>Role:</b> <span>Lead-Moderator</span></span>
-						<span className="line"><b>Joined:</b> <span>November 11, 2015</span></span>
-						<span className="line"><b>Email:</b> <span><a href="mailto:&#097;&#110;&#116;&#111;&#110;&#105;&#111;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">antonio@musare.com</a></span></span>
+						<img className="picture" src="/assets/images/notes-transparent.png"/>
+						<div className="lines">
+							<span className="name">Antonio</span>
+							<span className="line"><b>Role:</b> <span>Lead-Moderator</span></span>
+							<span className="line"><b>Joined:</b> <span>November 11, 2015</span></span>
+							<span className="line"><b>Email:</b> <span><a href="mailto:&#097;&#110;&#116;&#111;&#110;&#105;&#111;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;">antonio@musare.com</a></span></span>
+						</div>
+						<div className="background"/>
+					</div>
+					<div className="current-member">
+						<img className="picture" src="/assets/images/notes-transparent.png"/>
+						<div className="lines">
+							<span className="name">Johannes Andersen</span>
+							<span className="line"><b>Role:</b> <span>Moderator</span></span>
+							<span className="line"><b>Joined:</b> <span>September 23, 2015</span></span>
+							<span className="line"><b>Email:</b> <span>None yet</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 				</div>
 
 				<h2>{ t("team:oldTeamMembers") }</h2>
 				<div className="old-members">
 					<div className="old-member">
-						<span className="name">Adryd</span>
-						<span className="line"><b>Role:</b> <span>Designer</span></span>
-						<span className="line"><b>Joined:</b> <span>April 21, 2017</span></span>
-					</div>
-					<div className="old-member">
-						<span className="name">Cameron Kline</span>
-						<span className="line"><b>Role:</b> <span>Developer</span></span>
-						<span className="line"><b>Joined:</b> <span>August 26, 2016</span></span>
+						<span className="picture">
+							<span className="initial">A</span>
+						</span>
+						<div className="lines">
+							<span className="name">Adryd</span>
+							<span className="line"><b>Role:</b> <span>Designer</span></span>
+							<span className="line"><b>Joined:</b> <span>April 21, 2017</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="old-member">
-						<span className="name">Wesley McCann</span>
-						<span className="line"><b>Role:</b> <span>Developer</span></span>
-						<span className="line"><b>Joined:</b> <span>November 8, 2015</span></span>
+						<span className="picture">
+							<span className="initial">C</span>
+						</span>
+						<div className="lines">
+							<span className="name">Cameron Kline</span>
+							<span className="line"><b>Role:</b> <span>Developer</span></span>
+							<span className="line"><b>Joined:</b> <span>August 26, 2016</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="old-member">
-						<span className="name">Nex</span>
-						<span className="line"><b>Role:</b> <span>Developer</span></span>
-						<span className="line"><b>Joined:</b> <span>February 26, 2016</span></span>
+						<span className="picture">
+							<span className="initial">W</span>
+						</span>
+						<div className="lines">
+							<span className="name">Wesley McCann</span>
+							<span className="line"><b>Role:</b> <span>Developer</span></span>
+							<span className="line"><b>Joined:</b> <span>November 8, 2015</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="old-member">
-						<span className="name">Akira Laine</span>
-						<span className="line"><b>Role:</b> <span>Founder - Developer</span></span>
-						<span className="line"><b>Joined:</b> <span>February 23, 2015</span></span>
+						<span className="picture">
+							<span className="initial">N</span>
+						</span>
+						<div className="lines">
+							<span className="name">Nex</span>
+							<span className="line"><b>Role:</b> <span>Developer</span></span>
+							<span className="line"><b>Joined:</b> <span>February 26, 2016</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="old-member">
-						<span className="name">Johannes Andersen</span>
-						<span className="line"><b>Role:</b> <span>Developer</span></span>
-						<span className="line"><b>Joined:</b> <span>September 23, 2015</span></span>
+						<span className="picture">
+							<span className="initial">A</span>
+						</span>
+						<div className="lines">
+							<span className="name">Akira Laine</span>
+							<span className="line"><b>Role:</b> <span>Founder - Developer</span></span>
+							<span className="line"><b>Joined:</b> <span>February 23, 2015</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 					<div className="old-member">
-						<span className="name">Aaron Gildea</span>
-						<span className="line"><b>Role:</b> <span>Moderator</span></span>
-						<span className="line"><b>Joined:</b> <span>November 7, 2015</span></span>
+						<span className="picture">
+							<span className="initial">A</span>
+						</span>
+						<div className="lines">
+							<span className="name">Aaron Gildea</span>
+							<span className="line"><b>Role:</b> <span>Moderator</span></span>
+							<span className="line"><b>Joined:</b> <span>November 7, 2015</span></span>
+						</div>
+						<div className="background"/>
 					</div>
 				</div>
 			</main>

frontend/app/styles/main.scss

@@ -8,6 +8,7 @@
 @import "settings";
 @import "termsPrivacy";
 @import "profile";
+@import "team";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");
@@ -20,11 +21,13 @@ html, body {
 	text-rendering: optimizeLegibility;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
+	background-color: #F5F5F5;
 }
 
 * {
 	padding: 0;
 	margin: 0;
+	border: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {

frontend/app/styles/navbar.scss

@@ -85,6 +85,7 @@ header {
 			flex-direction: column;
 			position: absolute;
 			top: 64px;
+			z-index: 100;
 
 			&.show {
 				visibility: visible;

frontend/app/styles/team.scss

@@ -0,0 +1,156 @@
+@import "colors";
+@import "breakpoints";
+
+main#team {
+	width: 272px;
+	margin-left: auto;
+	margin-right: auto;
+
+	.current-members {
+		margin-bottom: 24px;
+
+		.current-member {
+			width: 100%;
+			height: 86px;
+			position: relative;
+			margin-bottom: 24px;
+
+			.picture {
+				width: 64px;
+				height: 64px;
+				margin-top: 11px;
+				position: relative;
+				float: left;
+				z-index: 1;
+				border-radius: 100%;
+				box-shadow: 0 3px 6px $musare_shadow_color;
+				background-color: white;
+			}
+
+			.lines {
+				z-index: 1;
+				position: relative;
+				margin-left: 10px;
+				overflow: hidden;
+				max-width: calc(100% - 74px);
+				float: left;
+
+				.name, .line {
+					display: block;
+				}
+
+				.name {
+					margin-top: 5px;
+					text-align: center;
+					font-size: 17px;
+					line-height: 22px;
+					font-weight: 600;
+				}
+
+				.line {
+					font-size: 12px;
+					line-height: 16px;
+					b {
+						font-weight: 600;
+					}
+
+					span {
+						font-weight: 100; // TODO Figure out proper font-weight
+					}
+				}
+			}
+
+			.background {
+				height: 100%;
+				width: calc(100% - 32px);
+				background-color: $musare_color_white;
+				border: 1px solid hsla(0, 0, 29, .3); //TODO Add to colors
+				box-shadow: 0 3px 6px $musare_shadow_color;
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+		}
+	}
+
+	.old-members {
+		.old-member {
+			width: 100%;
+			height: 70px;
+			position: relative;
+			margin-bottom: 24px;
+
+			.picture {
+				width: 64px;
+				height: 64px;
+				margin-top: 11px;
+				position: relative;
+				float: left;
+				z-index: 1;
+				border-radius: 100%;
+				background-color: $musare_color_primary_blue;
+				border: 1px solid hsla(0, 0, 29, .5); //TODO Add to colors
+				box-shadow: 0 3px 6px $musare_shadow_color;
+
+				.initial {
+					font-size: 51px;
+					line-height: 59px;
+					color: #EFEFEF; //Add to colors or change color
+					text-align: center;
+					display: block;
+				}
+			}
+
+			.lines {
+				z-index: 1;
+				position: relative;
+				margin-left: 10px;
+				overflow: hidden;
+				max-width: calc(100% - 74px);
+				float: left;
+
+				.name, .line {
+					display: block;
+				}
+
+				.name {
+					margin-top: 5px;
+					text-align: center;
+					font-size: 17px;
+					line-height: 22px;
+					font-weight: 600;
+				}
+
+				.line {
+					font-size: 12px;
+					line-height: 16px;
+					b {
+						font-weight: 600;
+					}
+
+					span {
+						font-weight: 100; // TODO Figure out proper font-weight
+					}
+				}
+			}
+
+			.background {
+				height: 100%;
+				width: calc(100% - 32px);
+				background-color: $musare_color_white;
+				border: 1px solid hsla(0, 0, 29, .3); //TODO Add to colors
+				box-shadow: 0 3px 6px $musare_shadow_color;
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+		}
+	}
+
+	h2 {
+		font-size: 20px;
+		line-height: 27px;
+		margin-bottom: 16px;
+		text-align: center;
+	}
+}