Edit `project.html` to look like flyer

content/projekte/hack-n-fun/_index.md

@@ -7,6 +7,7 @@ template = "project.html"
 logo = "artwork/logo-hacknfun.svg"
 project_slug = "hack-n-fun"
 list_icon = "images/soldering.png"
+title_icon = "images/camping-tent.png"
 theses = [
     "Wir zeigen, dass man Technik selber gestalten kann",
     "Alle können von- und miteinander lernen",

content/projekte/indiedact/_index.md

@@ -7,6 +7,7 @@ template = "project.html"
 logo = "artwork/logo-leopard.svg"
 project_slug = "indiedact"
 list_icon = "images/pencil.png"
+title_icon = "images/reading.png"
 theses = [
     "Selbstgewähltes Lernthema und -tempo ist Motivator Nr. 1",
     "Pädagog*innen begleiten sensibel nach Bedürfnis der Lernenden",

content/projekte/schul-frei/_index.md

@@ -7,6 +7,7 @@ template = "project.html"
 logo = "artwork/logo-schul-frei.svg"
 project_slug = "schul-frei"
 list_icon = "images/chalks.png"
+title_icon = "images/school-bag.png"
 theses = [
     "Software in Schulen muss offen und verstehbar sein",
     "Schulen und Eltern müssen die Rechte der Schüler*innen und des Kollegiums respektieren und stärken",

sass/_content.scss

@@ -5,3 +5,6 @@
         height: 100%;
     }
 }
+.roboto-black {
+    font-family: 'Roboto Black'; 
+}

sass/style.scss

 @charset "utf-8";
 
 $family-sans-serif: "Roboto", sans-serif;
+$title-color: inherit;
 
 @import "./_teckids.scss";
 

templates/project.html

@@ -13,24 +13,26 @@
 {% endblock %}
 
 {% block main %}
-<section class="hero hero-main">
+  <section class="hero hero-main is-fullheight-with-navbar project-background-{{ section.extra.project_slug }} roboto-black">
   <div class="hero-body">
     <div class="container">
-      <div class="columns">
+      <div class="columns is-vcentered">
+        <div class="column is-one-third circle-bg">
+          <img class="is-1by1" src="/{{ section.extra.title_icon }}" alt="">
+        </div>
         <div class="column is-two-fifth project-title">
-          <h1 class="title is-1">{{ section.title }}</h1>
-          <p class="title is-5">
-            {{ section.description }}
-          </p>
-          <div class="content">
-              {% if section.content %}
-                {{ section.content | safe }}
-              {% else %}
-                {% include "baustelle.html" %}
-              {% endif %}
+        <div class="columns">
+          <div class="column">
+            <h1 class="title is-1">{{ section.title }}</h1>
+            <p class="title is-3">
+              {{ section.description }}
+            </p>
           </div>
         </div>
-        <div class="column project-theses">
+      </div>
+    </div>
+      <div class="container">
+        <div class="project-theses">
           {% for thesis in section.extra.theses %}
           <article class="media">
             <figure class="media-left">
@@ -39,7 +41,7 @@
               </p>
             </figure>
             <div class="media-content">
-              <p>{{ thesis }}</p>
+              <p class="title is-4">{{ thesis }}</p>
             </div>
           </article>
           {% endfor %}