Experimenting with CSS grids

emilbaehr · emilbaehr · commit f46f35719369 · 2019-01-05T15:42:57.000+01:00
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,3 +1,3 @@
 <footer>
-	<p>By <a href="http://emilbaehr.com">Emil</p>
+	<p>Made by <a href="http://emilbaehr.com">Emil Baehr</a> in Copenhagen</p>
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,5 +1,4 @@
 <head>
-	
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,7 +7,4 @@
 
 	<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
 	<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600' rel='stylesheet' type='text/css'>
-	<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
-
 </head> 
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,15 +1,10 @@
-<aside>
-	<div class="container">
-		<nav>
-			<ul>
-				{% for page in site.pages %} {% if page.title %}
-				<li><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
-				{% endif %} {% endfor %}
-			</ul>
-		</nav>
-	</div>
-</aside>
 
 <header>
-	<h1><a href="{{ site.baseurl }}">{{ site.title }}</a></h1>
+	<nav>
+		<ul>
+			<li><a href="/">Home</a></li>
+			<li><a href="/changelog">Changelog</a></li>
+			<li><a href="/faq">FAQ</a></li>
+		</ul>
+	</nav>
 </header>
diff --git a/_layouts/changelog.html b/_layouts/changelog.html
diff --git a/_layouts/faq.html b/_layouts/faq.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+{% include head.html %}
+
+<body>
+	{% include header.html %}
+	<main>
+		<article>
+			{{ content }}
+		</article>
+		{% include footer.html %}
+	</main>
+</body>
+
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
diff --git a/_pages/about.md b/_pages/about.md
diff --git a/_pages/changelog.md b/_pages/changelog.md
@@ -0,0 +1,8 @@
+---
+layout: changelog
+title: Changelog
+permalink: /changelog/
+---
+
+### Version 1.0
+This version is the first public release of Your App.
diff --git a/_pages/contact.md b/_pages/contact.md
diff --git a/_pages/faq.md b/_pages/faq.md
@@ -0,0 +1,13 @@
+---
+layout: faq
+title: Frequently Asked Questions
+permalink: /faq/
+---
+
+Here are some frequently asked question.
+
+### Question 1 goes here?
+Yes, it does.
+
+### Where does question 2 go?
+Just below.
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -1,13 +1,12 @@
-$content-width: 800px;
-$main: #00ff33;
-$font-style: 'Helvetica Neue', sans-serif;
-$font-color: #000;
+$content-width: 1140px;
+$accent-color: #00ff33;
+
+$font: 'Helvetica Neue', sans-serif;
+$primary-text-color: #000;
+$secondary-text-color: #000;
+
 $link-color: #00ff33;
-$link-hover-color: $main;
-$heading-font: 'Helvetica Neue', sans-serif;
-$heading-font-color: #000;
-$light: #e6e6e6;
-$header:  #ccc;
+$link-color-hover: #00ff33;
 
 *,
 *::before,
diff --git a/_sass/layout.scss b/_sass/layout.scss
@@ -1,121 +1,37 @@
 body {
+	box-sizing: border-box;
 	margin: 0;
-	color: $font-color;
-	font-family: $font-style;
+	font-family: $font;
 	font-size: 1.1em;
-	line-height: 1.6;
-	-webkit-font-smoothing: antialiased;
-}
-
-h1,
-h2,
-h3 {
-	font-weight: 600;
-	color: $heading-font-color;
-	font-family: $heading-font;
-	line-height: 1.5;
-}
-
-h1 {
-	color: $main;
-	font-size: 2.5em;
-	a,
-	a:visited {
-		text-decoration: none;
-		color: $main;
-	}
-}
-
-h2 {
-	font-size: 2em;
-}
-
-a,
-a:visited {
-	color: $link-color;
-	text-decoration: underline;
-	font-weight: bold;
-}
-
-a:hover {
-	color: $link-hover-color;
-	text-decoration: underline;
-}
-
-header {
-	background: $header;
-	padding: 0px 15px;
-	text-align: center;
-	margin: 50px 0 0;
-	height: 50vh;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-main {
-	padding: 0 15px;
-	max-width: $content-width;
-	margin: 0 auto;
-}
-
-time {
-	color: #898989;
 }
 
 .container {
+	display: grid;
 	max-width: $content-width;
-	margin: 0 auto;
+	padding-left: 15px;
+	padding-right: 15px;
+	grid-column-gap: 50px;
+	grid-template-columns: repeat(12, 1fr);
+	grid-template-rows: 500px 1000px 200px;
+	grid-column-gap: 30px;
+	grid-template-areas: 
+		"h h h h h h h h h h h h"
+		"c c c c c c c c c c c c"
+		"f f f f f f f f f f f f";
 }
 
-/* Aside */
+header {
+	display: grid;
+	grid-area: h;
+	background-color:rgb(0, 255, 13);
+}
 
-aside {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: #fff;
-	width: 100%;
-	z-index: 2;
-	border-bottom: 1px solid lighten($light, 30%);
-	box-shadow: 0px 1px 1px RGBA(4, 25, 54, .1);
-	nav {
-		float: left;
-		max-width: 800px;
-		margin: 0 auto;
-		ul {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-			li {
-				float: left;
-				position: relative;
-				a {
-					text-decoration: none;
-					display: block;
-					padding: 15px;
-					font-family: $heading-font;
-					line-height: 20px;
-					margin-bottom: -1px;
-					box-shadow: 0;
-					&:hover,
-					&:active {
-						background: $header;
-						text-decoration: none;
-						color: $main;
-					}
-				}
-			}
-		}
-		&:after {
-			content: '';
-			display: table;
-			clear: both;
-		}
-	}
+.features {
+	grid-area: c;
+	background-color:rgb(255, 208, 0);
 }
 
 footer {
-	text-align: center;
-	padding: 40px;
+	grid-area: f;
+	background-color:rgb(255, 2, 2);
 }
diff --git a/index.html b/index.html
@@ -1,5 +1,20 @@
 ---
-layout: default
+title: Your App – Subtitle
 ---
 
-<h1>Front Page</h1>
+<!DOCTYPE html>
+<html>
+{% include head.html %}
+
+<body>
+	<div class="container">
+		{% include header.html %}
+
+		<div class="features">
+		</div>
+
+		{% include footer.html %}
+	</div>
+</body>
+
+</html>
