{{ 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 }}