1 files changed, 96 insertions, 0 deletions
diff --git a/themes/cranky/layouts/projects/list.html b/themes/cranky/layouts/projects/list.html
new file mode 100644
index 0000000..9dc5286
--- /dev/null
+++ b/themes/cranky/layouts/projects/list.html
@@ -0,0 +1,96 @@
+{{ define "title" -}}
+{{ .Title | title }}
+{{- end }}
+{{ define "main" -}}
+{{ .Content }}
+<style>
+time {
+  float: right;
+  font-size: 0.8em;
+  color: var(--light-fg);
+}
+
+.project-title {
+  font-size: 1.2em;
+  color: var(--header-fg);
+  text-decoration: none;
+}
+
+.project-box > * {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.project-box {
+  margin-bottom: 1em;
+  padding: 7px;
+  border-radius: 10px;
+  position: relative;
+  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+  background: linear-gradient(
+    45deg,
+    #222d32,
+    #111a1f
+  );
+  z-index: 1;
+}
+
+.project-box::before {
+  position: absolute;
+  content: '';
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(
+    45deg,
+    #111a1f,
+    #222d32
+  );
+  border-radius: 10px;
+  z-index: -1;
+  transition: opacity 0.5s linear;
+  opacity: 0;
+}
+
+.project-box:hover::before {
+  opacity: 1;
+}
+/* Align the read more link to the bottom right corner of the box */
+.read-more {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 5px;
+  font-size: 0.8em;
+  color: var(--header-fg);
+  transition: color 0.5s ease-out;
+  text-decoration: none;
+  padding: 5px;
+  border-radius: 7px;
+  background: linear-gradient(
+    -45deg,
+    #a84,
+    #223
+  );
+}
+.read-more:hover {
+  color: var(--link-fg-std);
+}
+</style>
+{{- range.Pages }}
+<div class="project-box">
+	<a class="project-title" href="{{ .RelPermalink }}">{{ .Title }}</a>
+	{{- if .Param "datesinlist" }}<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006 Jan 02" }}</time> {{ end -}}
+  {{ $summary := index (split .Content "</p>") 0 }}
+  <p>{{ $summary | plainify }} </p>
+	{{- if .Param "authorsinlist" }}
+	{{ with .Params.authors }}
+		by
+		{{ delimit . ", " " and " }}
+	{{end}}
+  <a class="read-more" href="{{ .RelPermalink }}">Read more...</a>
+</div>
+	{{ end -}}
+{{- end }}
+{{- end }}