style.scss

/* Variables */
$font-stack: Arial, Helvetica, sans-serif;

/* Templating */
html, body, div, span, h1, h2, h3, h4,
h5, h6, p, a, img, i, ol, ul, li, form,
label, table, caption, {
	margin: 0;
	padding: 0;
}



html {
	width: 100%;
	font-family: $font-stack; 

	body {

		/* Header */
		header {
			width: 100%;
			background-color: #222;
			color: #fff;

			nav {
				margin: 0 auto;
				padding: 20px 0;
				width: 80%;
				overflow: auto;

				> a {
					color: inherit;

					h1 {
						float: left;
						font-size: 16px;
						color: inherit;
					}
				}
				ul {
					float: right;
					list-style: none;

					li {
						float: left;
						width: 100px;
						text-align: center;

						a {
							text-decoration: none;
							color: inherit;
						}
					}
				}
			}
		}
		/* General main template */
		main {
			margin: 0 auto;
			width: 100%;

			> h1.page-header {
				margin: 20px auto 10px;
				width: 80%;
			}
			section {
				margin: 0 auto;
				width: 80%;
			}
		}
		/* Portfolio page */
		main#portfolio {

			div#portfolio-gallery {
				margin: 0 auto;
				width: 100%;
				overflow: auto;
				height: auto;

				div.container {
					width: calc((100% - 60px - 40px) / 4);
					display: inline-block;
					margin-bottom: 20px;
					border: 2px solid #bbb;
					text-align: center;
					position: relative;

					div.aspect-ratio-keeper {
						padding-bottom: 100%;
					}

					div.content {
						position: absolute;
						top: 0;  bottom: 0;  left: 0;  right: 0;
					}

					a {
						color: inherit;
						text-decoration: none;
					}

					span.link-spanner {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						z-index: 1;
					}

					div.image-container {
						position: relative;
						height: 85%;
						overflow: hidden;
						text-align: center;
						-webkit-transform-style: preserve-3d;
						-moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

						div.image-vertical-align-box {
							position: relative;
							top: 50%;
							-webkit-transform: translateY(-50%);
							-ms-transform: translateY(-50%);
							transform: translateY(-50%);
							
							img.inner {
								width: 100%;
								margin: auto;
							}
						}
					}

					div.inner-text {
						padding-top: 8%;
						padding-bottom: 4%;
						z-index: 100;
						background: white;
						overflow: hidden;
						position: absolute;
						bottom: 0px;
						width: 100%;
						max-height: 30%;
						min-height: 10%;

						h2 {
							font-size: 16px;
							margin: 0;
							padding: 0;
							margin-left: 1%;
							margin-right: 1%;
						}
					}
				}

				/* 2xN grid: */
				@media screen and (max-width : 800px) {
					div.container:not(:nth-child(2n)) {
						margin-right: 20px;
					}
					div.container {
						width: calc((100% - 40px - 40px) / 2);
					}
				}

				/* 4xN grid: */
				div.container:not(:nth-child(4n)) {
					margin-right: 20px;
				}
			}
		}

		
		/* About page */
		main#about {

			section#about-content {
				overflow: auto;

				img#portrait {
					float: right;
					margin-bottom: 25px;
					margin-left: 25px;
					width: 280px;
				}
				h1 { margin: 0.67em 0; font-size: 2em; }
				h2 { margin: 0.75em 0; }
				h3 { margin: 0.83em 0; }
				h3, p, ul, form, ol { margin: 1.12em 0 }
				h5 { margin: 1.5em 0 }
				h6 { margin: 1.67em 0 }
				ol, ul { margin-left: 40px; }
			}
		}
		/* Contact page */
		main#contact {

			section#contact-content {
				overflow: auto;

				img#contact-image {
					float: right;
					margin-bottom: 25px;
					margin-left: 25px;
					width: 280px;
				}

				h1 { margin: 0.67em 0; font-size: 2em; }
				h2 { margin: 0.75em 0; }
				h3 { margin: 0.83em 0; }
				h3, p, ul, form, ol { margin: 1.12em 0 }
				h5 { margin: 1.5em 0 }
				h6 { margin: 1.67em 0 }
				ol, ul { margin-left: 40px; }	
			}
		}
		/* Project page template */
		main.project {

			section#contact-content {
				margin-top: 20px;
				overflow: auto;

				img#project-image {
					float: right;
					margin-bottom: 25px;
					margin-left: 25px;
					width: 280px;
				}
				h1#project-title {
					margin: 0;
				}
				h2#project-date {
					margin-top: 5px;
					font-size: 16px;
				}

				h1 { margin: 0.67em 0; font-size: 2em; }
				h2 { margin: 0.75em 0; }
				h3 { margin: 0.83em 0; }
				h3, p, ul, form, ol { margin: 1.12em 0 }
				h5 { margin: 1.5em 0 }
				h6 { margin: 1.67em 0 }
				ol, ul { margin-left: 40px; }	
			}
		}
		/* Footer */
		footer {
			margin-top: 40px;
			width: 100%;
			background-color: #222;
			color: #fff;

			ul {
				margin: 0 auto;
				padding: 10px 0;
				width: 80%;
				overflow: auto;
				list-style: none;

				li {
					float: left;
					width: calc(100% / 3);
					text-align: center;
				}
				@media screen and (max-width : 1000px) {
					li {
						width: 100%;
						float: none;
						text-align: left;
						
					}
				}
			}

			
		}
	}
}