projects: Begin Projects section

I want to publish some details about my projects, but I don't like the
blog format for this.

.gitignore

@@ -1 +1,2 @@
-public/
+public/
+static/processed_images

content/projects/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Projects"
+sort_by = "none"
+template = "projects.html"
+page_template = "project-page.html"
++++
+
+Tinkering is fun, especially when there are tangible results!

sass/style.scss

@@ -1,5 +1,6 @@
 $primary-color: #505050;
 $primary-color-dark: #282828;
+$primary-color-darker: #212121;
 $primary-color-light: #7c7c7c;
 
 $secondary-color: #333f58;
@@ -9,6 +10,7 @@ $secondary-color-dark: #09192f;
 $background-color: #121212;
 $text-color: #e2e2e2;
 $panel-color: $primary-color-dark;
+$panel-color-dark: $primary-color-darker;
 $toolbar-color: $primary-color;
 
 @font-face {
@@ -341,6 +343,49 @@ article.post .post-date {
   margin-bottom: 1em;
 }
 
+.project-cards {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.project-card {
+  width: 100%;
+  background-color: $panel-color-dark;
+  margin: 0.75em;
+  padding: 0 0.75em;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+@media only screen and (min-width: 600px) {
+  .project-card {
+    width: 45%;
+  }
+}
+
+@media only screen and (min-width: 800px) {
+  .project-card {
+    width: 30%;
+  }
+}
+
+.project-card:hover {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.project-card a {
+  text-decoration: none;
+}
+
+.project-card h2 {
+  text-align: center;
+}
+
+.project-card img {
+  max-width: 100%;
+}
+
 /* CV */
 
 .cv.panel {

templates/base.html

@@ -44,6 +44,7 @@
       <nav class="main-nav">
         <ul>
           <li><a href="{{ config.base_url }}">Home</a></li
+          ><li><a href="{{ get_url(path='/projects') }}">Projects</a></li
           ><li><a href="{{ get_url(path='/blog') }}">Blog</a></li
           ><li><a href="{{ get_url(path='/cv') }}">CV</a><li
           >

templates/index.html

@@ -24,6 +24,12 @@ Curriculum Vitae
 </a>
 </div>
 <div class="link">
+<a href="{{ get_url(path='/projects') }}">
+{{ load_data(path='static/bug.svg') | safe }}
+Projects
+</a>
+</div>
+<div class="link">
 <a href="{{ get_url(path='/blog') }}">
 {{ load_data(path='static/post.svg') | safe }}
 Blog

templates/project-page.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ page.title }}</h1>
+{{ page.content | safe }}
+</article>
+{% endblock %}

templates/projects.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ section.title }}</h1>
+{{ section.content | safe }}
+<div class="project-cards">
+{% for path in section.subsections %}
+<div class="project-card">
+{% set sect = get_section(path=path) %}
+<a href="{{ sect.permalink }}">
+<h2>{{ sect.title }}</h2>
+{% if sect.extra.image is defined %}
+{% set image = resize_image(path=sect.extra.image, width=640, height=480, op="fit") %}
+<img src="{{ image.url }}" />
+{% else %}
+<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
+{% endif %}
+<p>{{ sect.description }}</p>
+</a>
+</div>
+{% endfor %}
+{% for page in section.pages %}
+<div class="project-card">
+<a href="{{ page.permalink }}">
+<h2>{{ page.title }}</h2>
+{% if page.extra.image is defined %}
+{% set image = resize_image(path=page.extra.image, width=640, height=480, op="fit") %}
+<img src="{{ image.url }}" />
+{% else %}
+<img src="//picsum.photos/seed/{{ page.path | slugify }}/320/240" />
+{% endif %}
+<p>{{ page.description }}</p>
+</a>
+</div>
+{% endfor %}
+</div>
+</article>
+{% endblock %}

templates/section.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ section.title }}</h1>
+{{ section.content | safe }}
+</article>
+{% endblock %}

templates/shortcodes/resize_image.html

@@ -0,0 +1,9 @@
+{% set image = resize_image(path=path, width=width, height=height, op=op) %}
+{% if link is defined %}<a href="{{ link }}">{% endif %}
+<img src="{{ image.url }}"
+  {% if title is defined %}title="{{ title }}"{% endif %}
+  {% if alt is defined %}alt="{{ alt }}"{% endif %}
+  {% if class is defined %}class="{{ class }}"{% endif %}
+  {% if style is defined %}style="{{ style }}"{% endif %}
+  />
+{% if link is defined %}</a>{% endif %}