Add macros & project listing

2 years ago · ffe6e62ced
parent 7ffad10601
commit ffe6e62ced
8 changed files with 84 additions and 0 deletions
--- a/content/projekty/_index.md
+++ b/content/projekty/_index.md
@ -1,3 +1,4 @@
 +++
 title = "Projekty"
+template = "projects.html"
 +++
--- a/content/projekty/project-0.md
+++ b/content/projekty/project-0.md
@ -0,0 +1,4 @@
+++
+title = "Project 0"
+description = "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
+++
--- a/content/projekty/project-1.md
+++ b/content/projekty/project-1.md
@ -0,0 +1,3 @@
+++
+title = "Project 1"
+++
--- a/sass/style.scss
+++ b/sass/style.scss
@ -155,3 +155,45 @@ body>footer {
 		padding: 1rem 0;
 	}
 }
+
+.project-list {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1rem;
+	background: none;
+	padding: 0;
+
+	@media only screen and (min-width: $width-narrow) {
+		grid-template-columns: 1fr 1fr;
+	}
+
+	&>a {
+		display: flex;
+		min-height: 10rem;
+		background: $col-dark;
+		color: inherit;
+
+		.title {
+			font-weight: bold;
+			font-size: 1.5em;
+			margin-bottom: .5em;
+			line-height: 1;
+		}
+
+		.description {
+			padding: 1.5em 1em;
+			width: 100%;
+
+			p {
+				margin: 0;
+				line-height: 1.5;
+			}
+		}
+
+		.image {
+			display: block;
+			height: 100%;
+			width: 12rem;
+		}
+	}
+}
--- a/static/img/project_placeholder.png
+++ b/static/img/project_placeholder.png
--- a/templates/base.html
+++ b/templates/base.html
@ -1,3 +1,5 @@
+{% import "macros.html" as macros %}
+
 <!DOCTYPE html>
 <html lang="cs">
 	<head>
--- a/templates/macros.html
+++ b/templates/macros.html
@ -0,0 +1,25 @@
+{% macro project_list() %}
+	{% for project in section.pages %}
+		<a href="{{ project.permalink }}">
+			{% set_global image = "/static/img/project_placeholder.png" %}
+			{% for asset in project.assets %}
+				{% if asset is matching("[img.](jpg|png)$") %}
+					{% set_global image = asset %}
+					{% break %}
+				{% endif %}
+			{% endfor %}
+			{% set image = resize_image(path=image, width=300, height=300, op="fill") %}
+			<div class="image" style="background-image: url('{{ image.url }}')"></div>
+			<div class="description">
+				<div class="title">{{ project.title }}</div>
+				<p>
+				{% if project.description %}
+					{{ project.description }}
+				{% else %}
+					&hellip;
+				{% endif %}
+				</p>
+			</div>
+		</a>
+	{% endfor %}
+{% endmacro %}
--- a/templates/projects.html
+++ b/templates/projects.html
@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block content %}
+	<section class="project-list">
+		{{ macros::project_list() }}
+	</section>
+{% endblock content %}