prototypal project cards

content/assets/stylesheets/main.scss

@@ -214,3 +214,33 @@ a, a:hover, a:visited, a:link, a:active {
   width: 100%;
   bottom: 0;
 }
+
+
+.project-card {
+  background-color: #2D5CB4;
+  color: white;
+  height: 300px;
+
+  margin-top: 5px;
+  margin-bottom: 5px;
+
+  display: flex;
+  justify-content: space-between;
+
+  .project-title {
+    background: #1e3c72; /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+    font-size: 4em;
+    padding: 20px;
+    flex-grow: 1;
+  }
+
+  .project-description {
+    background-color: #1e3c72;
+    text-align: right;
+    padding: 20px;
+    width: 700px;
+  }
+}

content/projects.erb

@@ -0,0 +1,15 @@
+<% 5.times do %>
+<div class="project-card">
+  <div class="project-title">
+    Hydra
+  </div>
+  <div class="project-description">
+    <p>
+      Dit is een heel cool project enal
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus facere, ut in magnam harum at, aliquam nostrum totam tempore distinctio explicabo natus quis pariatur quos maiores dignissimos inventore! Ad amet harum ipsum laudantium modi ipsa dolores, omnis impedit nostrum expedita sed molestias similique veritatis, quo explicabo odit minus cum quibusdam accusamus beatae quam vitae cumque ipsam eius. Alias ipsam blanditiis deleniti nam magni veritatis, quas quae. Quam quia at tempora repellat optio aliquam, quasi deserunt esse distinctio voluptate harum hic sed vel blanditiis nam modi fuga, totam neque vero! Sunt, ipsum sit! Libero quam temporibus deserunt, quo itaque perspiciatis earum.
+    </p>
+  </div>
+</div>
+<% end %>

layouts/generic.erb

@@ -1,6 +1,6 @@
 <div class="pure-g">
-  <div class="pure-u-xl-1-5 pure-u-lg-1-6 pure-u-md-1-8 pure-u-sm-1-12 pure-u-1-24"></div>
-  <div id="container" class="pure-u-xl-3-5 pure-u-lg-2-3 pure-u-md-3-4 pure-u-sm-5-6 pure-u-11-12">
+  <div class="pure-u-1-24"></div>
+  <div id="container" class="pure-u-11-12">
     <header>
       <div class="header-top">
         <a href="/">

layouts/partials/_navbar.erb

@@ -5,10 +5,13 @@
   <a href="/archives">
     Archief
   </a>
-  <a href="/search">
-    Zoeken
+  <a href="/projects">
+    Projecten
   </a>
   <a href="/cammie">
     Cammie
   </a>
+  <a href="/search">
+    Zoeken
+  </a>
 </nav>