From 8bb2119be1935c4d2d943dc76a05782e58dc1983 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Thu, 5 Jan 2017 13:29:48 +0100
Subject: improved projects page

---
 assets/projects/managerzonderstress.nl.png | Bin 0 -> 340326 bytes
 assets/projects/rooster.hetmml.nl.png      | Bin 0 -> 21151 bytes
 projects.md                                |  12 ++++++++--
 style/main.scss                            |  36 +++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 assets/projects/managerzonderstress.nl.png
 create mode 100644 assets/projects/rooster.hetmml.nl.png

diff --git a/assets/projects/managerzonderstress.nl.png b/assets/projects/managerzonderstress.nl.png
new file mode 100644
index 0000000..0cc3106
Binary files /dev/null and b/assets/projects/managerzonderstress.nl.png differ
diff --git a/assets/projects/rooster.hetmml.nl.png b/assets/projects/rooster.hetmml.nl.png
new file mode 100644
index 0000000..cd25a5b
Binary files /dev/null and b/assets/projects/rooster.hetmml.nl.png differ
diff --git a/projects.md b/projects.md
index 9fcc455..ecce816 100644
--- a/projects.md
+++ b/projects.md
@@ -3,5 +3,13 @@ layout: layout
 ---
 Here are some of the projects i'm currently working on:
 
-- **[Metis Rooster](http://rooster.hetmml.nl/)** An improved version of my school schedule page.
-- **[Manager Zonder Stress](http://managerzonderstress.nl/)** A website for my dad.
\ No newline at end of file
+<div class="projects">
+  <a class="project" href="http://rooster.hetmml.nl" target="_black" rel="noopener">
+    <img src="/assets/projects/rooster.hetmml.nl.png" alt="rooster.hetmml.nl homepage">
+    <header>Metis Rooster</header>
+  </a>
+  <a class="project" href="http://managerzonderstress.nl" target="_black" rel="noopener">
+    <img src="/assets/projects/managerzonderstress.nl.png" alt="managerzonderstress.nl homepage">
+    <header>Manager zonder stress</header>
+  </a>
+</div>
\ No newline at end of file
diff --git a/style/main.scss b/style/main.scss
index 5afd75a..95883ed 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -3,6 +3,10 @@
 
 @import 'normalize';
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   background-color: #31363b;
   font-family: 'Roboto Mono', monospace;
@@ -96,4 +100,36 @@ main ul {
       left: 0;
     }
   }
+}
+
+.projects {
+  display: flex;
+
+  .project {
+    padding: 8px;
+    color: black;
+    text-decoration: none;
+    background-color: #93a1a1;
+    margin: 8px;
+    outline: none;
+
+    &:hover, &:focus {
+      background-color: #b8c5c5;
+    }
+
+    img {
+      width: 100%;
+    }
+    
+    header {
+      padding: 8px;
+      font-style: italic;
+    }
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .projects {
+    flex-wrap: wrap;
+  }
 }
\ No newline at end of file
-- 
cgit v1.1