home: Add link boxes

I'm probably never going to write blog posts frequently enough to
warrant having the main focus of this site be the recent posts.
Instead, the home page can just be links to each section of the site.

The icons used here are from the [Material Design Icons][0] project.

[0]: https://materialdesignicons.com/

sass/style.scss

@@ -173,7 +173,7 @@ main.main-content div.main-content {
   font-size: 10pt;
   text-align: center;
   list-style-type: none;
-  margin: 0;
+  margin: 0 0 4em 0;
   padding: 0;
 }
 
@@ -189,6 +189,30 @@ main.main-content div.main-content {
   content: " • ";
 }
 
+.home .links {
+  width: 100%;
+  max-width: 10in;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.home .links .link {
+  background-color: $background-color;
+  flex: 0 10em;
+  margin: 1em;
+  padding: 0 0 1em 0;
+  text-align: center;
+}
+
+.home .links svg {
+  fill: $text-color;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
 #songquote {
   display: none;
   font-size: 120%;

static/bug.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z" /></svg>

static/file-document-outline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z" /></svg>

static/image.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>

static/post.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M3 3V21H21V3H3M18 18H6V17H18V18M18 16H6V15H18V16M18 12H6V6H18V12Z" /></svg>

templates/index.html

@@ -16,22 +16,31 @@
 <li>Tinkerer</li>
 <li>Writer</li>
 </ul>
-<div class="recent-posts">
-<h2>Recent Posts</h2>
-{% set blog = get_section(path="blog/_index.md") %}
-{% for page in blog.pages | slice(end=3) %}
-<a href="{{ page.path }}" class="post-summary">
-<h3 class="post-title">{{ page.title }}</h3>
-<div class="post-date">
-<time datetime="{{ page.date }}">{{ page.date | date(format="%d %b %Y") }}</time>
-</div>
-{% if page.summary %}
-<p>{{ page.summary }}</p>
-{% else %}
-<p>{{ page.content | striptags | split(pat=" ") | slice(end=20) | join(sep=" ") | safe }}{% if page.word_count > 20 %}…{% endif %}</p>
-{% endif %}
+<div class="links">
+<div class="link">
+<a href="{{ get_url(path='/cv') }}">
+{{ load_data(path='static/file-document-outline.svg') | safe }}
+Curriculum Vitae
 </a>
-{% endfor %}
+</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
+</a>
+</div>
+<div class="link">
+<a href="{{ get_url(path='/gallery') }}">
+{{ load_data(path='static/image.svg') | safe }}
+Photos
+</a>
+</div>
 </div>
 </section>
 {% endblock %}