Add a project based layout

Presents projects in a flex list that utilizes two-columns for wide displays and a single column for small ones. Each project page has a coherent layout similar to that of an article but focussed on presentation instead of text writing, i.e. it is wider compared to the standard layout from the theme.
image-rs · Apr 22, 2019 · 226181d · 226181d
1 parent 8a447fc
commit 226181d
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 6 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1 +1,4 @@
-theme: jekyll-theme-slate
+theme: jekyll-theme-slate
+collections:
+        projects:
+                output: true
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,maximum-scale=2">
+    <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
+{% seo %}
+  </head>
+
+  <body>
+
+    <!-- HEADER -->
+    <div id="header_wrap" class="outer">
+        <header class="inner">
+          <a id="forkme_banner" href="{{ site.github.repository_url }}">View on GitHub</a>
+
+          <h1 id="project_title">{{ site.title | default: site.github.repository_name }}</h1>
+          <h2 id="project_tagline">{{ site.description | default: site.github.project_tagline }}</h2>
+
+          {% if site.show_downloads %}
+            <section id="downloads">
+              <a class="zip_download_link" href="{{ site.github.zip_url }}">Download this project as a .zip file</a>
+              <a class="tar_download_link" href="{{ site.github.tar_url }}">Download this project as a tar.gz file</a>
+            </section>
+          {% endif %}
+        </header>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div id="main_content_wrap" class="outer">
+      <main id="main_content" class="inner-wide">
+        {{ content }}
+      </main>
+    </div>
+
+    <!-- FOOTER  -->
+    <div id="footer_wrap" class="outer">
+      <footer class="inner">
+        {% if site.github.is_project_page %}
+        <p class="copyright">{{ site.title | default: site.github.repository_name }} maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+        {% endif %}
+        <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/_layouts/project.html b/_layouts/project.html
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<div>
+<h1 class="post-title">
+	{{ page.title }}
+</h1>
+
+<main class="post-content">
+	{{ content }}
+</main>
+</div>
diff --git a/_projects/image.md b/_projects/image.md
@@ -0,0 +1,6 @@
+---
+layout: project
+name: "image"
+---
+
+The `image` project.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -0,0 +1,51 @@
+---
+---
+
+@import "jekyll-theme-slate";
+
+.inner-wide { 
+  position: relative;
+  max-width: 992px;
+  padding: 20px 10px;
+  margin: 0 auto;
+}
+
+.image-rs-inline-avatar {
+  display: inline;
+  margin: 0px;
+  height: 1em;
+  vertical-align: text-bottom;
+}
+
+.post-info {
+  text-align: right;
+  font-weight: bold;
+}
+
+.subtle-link {
+  color: inherit;
+}
+
+a:hover {
+  color: #0F79D0;
+  text-decoration: none;
+}
+
+.project-list {
+  display: flex;
+  max-width: 300ch;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.project-list > article {
+  width: 45%;
+  max-width: 45%;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 992px) {
+  .project-list > article {
+    width: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+---
+layout: "default"
+description: "Open-source, image related Rust crates."
+---
+
+<div class="project-list">
+{% for project in site.projects %}
+  <article>
+    <h2><a href="{{ project.url }}">{{ project.name }}</a></h2>
+    <p>{{ project.content | markdownify }}</p>
+  </article>
+{% endfor %}
+</div>
diff --git a/index.md b/index.md