Introduced xs classes to resolve #13

ElkeCodes · Sep 14, 2017 · 8838b67 · 8838b67
1 parent 54f6c2c
commit 8838b67
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 23 deletions.
diff --git a/angular/timeframe.component.html b/angular/timeframe.component.html
@@ -1,8 +1,8 @@
 <section class="row project">
-	<div class="col-md-2 timeframe">
+	<div class="col-md-2 col-xs-12 timeframe">
 		{{model.start}} - {{model.end}}
 	</div>
-	<p class="col-md-10">
+	<p class="col-md-10 col-xs-12">
 		<ng-transclude></ng-transclude>
 	</p>
 </section>
diff --git a/css/default.less b/css/default.less
@@ -54,6 +54,35 @@ body {
 	}
 }
 
+@media (max-width: 768px) { 
+	body {
+		.bodyLine() {
+		    bottom: 0;
+		    left: 5px;
+		    width: 0;	
+			margin: 0;
+			padding: 0;    
+		}
+
+		&:before {
+			.bodyLine;
+		    z-index: -1;
+		    top: 0;
+		    border-left: 2px solid @accentColor;
+		    border-right: 2px solid @accentColor;
+		}
+
+		&:after {
+			.bodyLine;
+		    position: fixed;
+		    z-index: 0;
+		    top: 200px; /* should be equal to top position of the dot */
+		    border-left: 2px solid @neutralColor;
+		    border-right: 2px solid @neutralColor;
+		}
+	}
+}
+
 body > header {
 	height: 120px;
 	line-height: 80px;
@@ -77,6 +106,21 @@ body > header {
 	}
 }
 
+@media (max-width: 768px) { 
+	body > header {
+		padding: 10px 20px;
+		height: 70px;
+		line-height: 50px;
+
+		h1 {
+			margin: 0;
+			background: url('../img/logo.xs.png') no-repeat;
+			width: auto;
+			height: 50px;
+		}
+	}
+}
+
 body > header.scrolled {
 	height: 70px;
 	line-height: 50px;
@@ -135,6 +179,36 @@ nav ul {
 	}
 }
 
+@media (max-width: 768px) { 
+	nav.dropdown {
+		float: right;
+		text-align: right;
+		padding: 0;
+	}
+
+	nav button, nav.open button {
+		margin: 0;
+		background: @accentColor;
+		color: #fff !important;
+	}
+
+	nav ul.dropdown-menu {
+		float: right;
+		right: 0;
+		top: 100%;
+		position: relative;
+	}
+
+	nav	li {
+		margin: 0;
+		text-align: right;
+
+		a {
+			padding: 0px;
+		}
+	}
+}
+
 body > section {
 	margin-left: 100px !important; /* don't like !important but we need it to override bootstrap */
 	margin-right: 50px !important;
@@ -165,16 +239,49 @@ body > section {
 	}
 }
 
+
+@media (max-width: 768px) { 
+	body > section {
+		margin-left: 18px !important; /* don't like !important but we need it to override bootstrap */
+		margin-right: 10px !important;
+		margin-top: 20px;
+		padding: 0px;
+
+		header h2 {
+			margin-bottom: 0px;
+
+			&:before,
+			&:after {
+				width: 80%;
+			}
+		}
+	}
+}
+
 aside {
 	text-align: right;
+	font-style: italic;
 	line-height: 25px;
 }
 
+@media (max-width: 768px) { 
+	aside {
+		text-align: center
+	}
+}
+
 section > article, section > form {
 	border-left: 1px solid @accentColor;
 	padding: 0 20px;
 }
 
+@media (max-width: 768px) { 
+	section > article, section > form {
+		border-left: 0;
+		padding: 0 0px;
+	}
+}
+
 @media (min-width: 970px) { 
 	section#introduction > article {
 		border-right: 1px solid @accentColor;
@@ -186,10 +293,26 @@ body > section section {
 	margin: 20px 0;
 }
 
+@media (max-width: 768px) { 
+	body > section section {
+		margin: 0;
+	}
+}
+
 section#introduction {
 	margin-top: 160px;
 }
 
+@media (max-width: 768px) { 
+	section#introduction {
+		margin-top: 80px;
+
+		> article p {
+			padding: 0;
+		}
+	}
+}
+
 footer {
 	text-align: center;
 	font-size: 11pt;
@@ -224,6 +347,28 @@ footer {
 	}
 }
 
+@media (max-width: 768px) { 
+	footer {
+		margin: 0pt 0 0 0 !important;
+		padding: 0px;
+		height: 100px;
+
+		p {
+			line-height: 60px;
+			margin: 0;
+			padding: 0;
+			height: 60px;
+
+			&:before,
+			&:after {
+				height: 0px;
+				width: 0;
+			    margin-right: 7px; /* should be the same as the letter-spacing */
+			}
+		}
+	}
+}
+
 h1 {
 	font-size: 20pt;
 
@@ -258,6 +403,13 @@ section#skills h3 {
 	margin: 0 0 15pt 0;
 }
 
+@media (max-width: 768px) { 
+	section#skills h3 {
+		padding: 0 0 0 0pt;
+		margin: 0 0 0pt 0;
+	}
+}
+
 section#skills label {
 	font-weight: 400;
 	font-size: 9pt;
@@ -269,8 +421,31 @@ section#skills .progress-bar {
 	color: @accentColor; /* temp disable showing the actual percentage */
 }
 
+@media (max-width: 768px) { 
+	section#skills {
+		padding: 10px 10px;
+		text-align: center;
+	}
+
+	section#skills h3 {
+		text-align: left;
+	}
+
+	section#skills label {
+		font-style: italic;
+	}
+}
+
 p {
 	line-height: 25px;
+
+		padding: 15px;
+}
+
+@media (max-width: 768px) { 
+	article > p {
+		text-align: justify;
+	}
 }
 
 p a, article a {
@@ -295,12 +470,26 @@ img#me {
 	.shadow();
 }
 
+@media (max-width: 768px) { 
+	img#me {
+		width: 100px;
+		height: 100px;
+	}
+}
+
 aside.image img {
 	width: 100%;
 	border: 1px solid @shadowColor;
 	.shadow();
 }
 
+@media (max-width: 768px) { 
+	aside.image img {
+		margin: 0px 10px;
+		width: 90%;
+	}
+}
+
 article section.project {
 	margin: 0;
 	padding: 0;
@@ -328,6 +517,15 @@ form input, form textarea {
 	padding: 5px;
 }
 
+@media (max-width: 768px) { 
+	form input, form textarea {
+		width: 100%;
+		margin-bottom: 0px;;
+		border-radius: 5px;
+		padding: 0px;
+	}
+}
+
 form input[type="submit"] {
 	color: white;
 	background-color: @accentColor;
@@ -366,6 +564,23 @@ ul.personal-links {
 	}
 }
 
+@media (max-width: 768px) { 
+	ul.personal-links {
+		margin: 0px 0px 0px 0px;
+		padding: 0;
+
+		li {
+			width: 100%;
+			line-height: 25px;
+			height: 25px;
+
+			&:nth-child(3) {
+				clear: both;
+			}
+		}
+	}
+}
+
 div#navigation-dot {
 	position: fixed;
 	top: 200px;
@@ -379,4 +594,17 @@ div#navigation-dot {
 	margin: 0;
 	padding: 0;
 	.shadow();
+}
+
+@media (max-width: 768px) { 
+	div#navigation-dot {
+		top: 200px;
+		left: 4px;
+		width: 8px;
+		height: 8px;
+		border: 1px solid #fff;
+		border-radius: 5px;
+		margin: 0;
+		padding: 0;
+	}
 }