Improve Heros for Projects and correct title font

sass/_content.scss

@@ -8,3 +8,8 @@
 .roboto-black {
     font-family: 'Roboto Black'; 
 }
+
+.media-v-centered {
+    @extend .media;
+    align-items: center;
+}

sass/_teckids.scss

@@ -19,7 +19,12 @@ $project-colors: (
 $project-colors-fonts: (
     hack-n-fun: #ffffff,
     schul-frei: #ffffff,
-    indiedact: #000000,
+    indiedact: #1c1f33,
+);
+$project-colors-title-fonts: (
+    hack-n-fun: rgba(white, 0.7),
+    schul-frei: rgba(white, 0.7),
+    indiedact: rgba(black, 0.5),
 );
 
 .menu-project-section {
@@ -31,6 +36,9 @@ $project-colors-fonts: (
         background-color: map-get($project-colors, $project);
         color: map-get($project-colors-fonts, $project);
     }
+    .project-title-#{$project} {
+        color: map-get($project-colors-title-fonts, $project);
+    }
 
     #menu-project-section-#{$project} {
         border-color: map-get($project-colors, $project);

templates/menu/projects.html

@@ -3,14 +3,13 @@
 <div class="container is-fluid">
   <div class="columns">
     {% for project in projects.items %}
-    <section
-      class="column menu-project-section"
-      id="menu-project-section-{{ project.slug }}"
-    >
+    <section class="column menu-project-section" id="menu-project-section-{{ project.slug }}">
       {% set section = get_section(path = "projekte/" ~ project.slug ~
       "/_index.md") %}
-      <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}">{{ section.title }}</a></h1>
-      <strong class="is-mega-menu-subtitle">{{ section.description }}</strong>
+      <h1 class="title is-6 is-mega-menu-title"><a href="{{ section.permalink }}">
+          <p> {{ section.title }} </p>
+          <p class="is-4">{{ section.description }}</p>
+        </a></h1>
 
       {% for page in project.pages %}
       <a class="navbar-item" href="{{ page.permalink }}">

templates/project.html

@@ -16,25 +16,26 @@
   <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 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">
+      <!-- <div class="columns is-vcentered"> -->
+      <!--   <div class="column is-two-fifth project-title"> -->
         <div class="columns">
-          <div class="column">
+                <div class="column project-title-{{ section.extra.project_slug }}">
             <h1 class="title is-1">{{ section.title }}</h1>
             <p class="title is-3">
               {{ section.description }}
             </p>
-          </div>
-        </div>
+        <!--   </div> -->
+        <!-- </div> -->
       </div>
     </div>
-      <div class="container">
+    <div class="container">
+      <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="project-theses">
           {% for thesis in section.extra.theses %}
-          <article class="media">
+          <article class="media-v-centered">
             <figure class="media-left">
               <p class="image is-64x64">
                 <img src="/{{ section.extra.list_icon }}" />
@@ -45,6 +46,7 @@
             </div>
           </article>
           {% endfor %}
+          </div>
         </div>
       </div>
     </div>