Added cards styles and example page (e.g. for talks, etc.)

design/cards.css

+html, body {
+  margin: 0;
+}
+
+.container {
+  max-width: 80em;
+  margin: 1em auto;
+  padding: 0 1em;
+}
+
+/* Header Styles */
+
+.header {
+  padding: 2em 0 1em 0;
+  width: 100%;
+  
+  color: white;
+  text-align: center;
+
+  background-image: url(cover.jpg);
+  background-size: cover;
+}
+
+.header-content img {
+  max-width: 80%;
+  max-height: 15%;
+}
+
+/* Navbar Styles */
+
+.nav {
+  padding: 0;
+  border-radius: 4px;
+  background-color: #222;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav ul li {
+  padding: 1em;
+  margin: 0;
+
+  display: block;
+  float: left; /* Remove awful extra whitespace between ul items */
+}
+
+.nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+/* We only want a border on all but the last element to act as a separator */
+.rightborder {
+  border-right: 1px solid white;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.code {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+/* Just in case flex is not working */
+
+.left-nav {
+  float: left;
+}
+
+.right-nav {
+  float: right;
+}
+
+/* Card Styles */
+
+.cards {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  margin-top: 1em; /* Spacing Between Navbar */
+}
+
+.card {
+  width: 30%;
+  
+  border: 1px solid #555;
+  border-radius: 4px;
+
+  box-shadow: 2px 2px 3px #BBB;
+  margin-bottom: 1em;
+}
+
+.card:hover {
+  box-shadow: 3px 3px 3px #888;
+}
+
+.card-content {
+  margin: 1em;
+}
+
+.card-content img {
+  width: 100%;
+  margin-bottom: 0.5em;
+}
+
+.caret {
+  width: 100%;
+  color: #298BDF;
+  font-size: 2em;
+}
+
+/* Breaking Styles */
+
+.break {
+  margin: 1em -1em;
+  border: 1px solid black;
+}
+
+/* Main content and sidebar styles */
+
+.content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sidebar {
+  width: 20%;
+}
+
+.text {
+    width: 75%;
+}
+
+/* Sidebar */
+
+.sidebar ul {
+  list-style: none;
+  float: right;
+  margin: 0;
+}
+
+.sidebar ul li {
+  border: 1px solid #145289;
+  border-radius: 4px;
+
+  padding: 0.5em;
+  margin-bottom: 0.5em;
+  
+  background-color: white;
+  color: #145289;
+
+  display: block;
+}
+
+.sidebar ul li.active {
+  background-color: #298BDF;
+  color: white;
+}
+
+.sidebar h2 {
+  color: #145289;
+  text-align: right;
+  float: right;
+  width: 100%;
+}
\ No newline at end of file

design/cards.haml

+!!! html
+
+%html
+    %head
+        %link{:rel => :stylesheet, :type => :"text/css", :href => "stylesheet.css"}
+        %link{:rel => :stylesheet, :type => :"text/css", :href => "cards.css"}
+        %link{href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel: "stylesheet", integrity: "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin: "anonymous"}
+
+    %body
+        .header
+            .header-content
+                %img{:src => "logo.svg"}
+                %h1.subhead <b>S</b>PH <b>W</b>ith <b>I</b>nter-dependent <b>F</b>ine-grained <b>T</b>asking
+
+        .container
+            .nav.mono
+                .left-nav
+                    %ul
+                        %li.rightborder.active
+                            %a About
+                        %li.rightborder
+                            %a Papers
+                        %li.rightborder
+                            %a Talks
+                        %li
+                            %a Contact
+
+                .right-nav
+                    %ul
+                        %li.btn-orange.code
+                            %a <i class="fa fa-gitlab" aria-hidden="true"></i> Code
+
+            .cards
+                .card
+                    .card-content
+                        %img{:src => "domains.png"}
+                        %h3 Card 1
+                        %p About Card 1
+
+                .card
+                    .card-content
+                        %img{:src => "domains.png"}
+                        %h3 Card 2
+                        %p About Card 2
+
+                .card
+                    .card-content
+                        %img{:src => "domains.png"}
+                        %h3 Card 3
+                        %p About Card 3
+                    
+                .card
+                    .card-content
+                        %img{:src => "domains.png"}
+                        %h3 Card 4
+                        %p About Card 4
\ No newline at end of file

design/cards.html

+<!DOCTYPE html>
+<html>
+<head>
+<link href='stylesheet.css' rel='stylesheet' type='text/css'>
+<link href='cards.css' rel='stylesheet' type='text/css'>
+<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'>
+</head>
+<body>
+<div class='header'>
+<div class='header-content'>
+<img src='logo.svg'>
+<h1 class='subhead'><b>S</b>PH <b>W</b>ith <b>I</b>nter-dependent <b>F</b>ine-grained <b>T</b>asking</h1>
+</div>
+</div>
+<div class='container'>
+<div class='nav mono'>
+<div class='left-nav'>
+<ul>
+<li class='rightborder active'>
+<a>About</a>
+</li>
+<li class='rightborder'>
+<a>Papers</a>
+</li>
+<li class='rightborder'>
+<a>Talks</a>
+</li>
+<li>
+<a>Contact</a>
+</li>
+</ul>
+</div>
+<div class='right-nav'>
+<ul>
+<li class='btn-orange code'>
+<a><i class="fa fa-gitlab" aria-hidden="true"></i> Code</a>
+</li>
+</ul>
+</div>
+</div>
+<div class='cards'>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 1</h3>
+<p>About Card 1</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 2</h3>
+<p>About Card 2</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 3</h3>
+<p>About Card 3</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 4</h3>
+<p>About Card 4</p>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>