MATTR templates and tripleseat head file for custom fonts. Todos.

Custom_Templates/customer_templates/MATTR The Knowledge/_course_header.html.liquid

@@ -0,0 +1,82 @@
+{% assign bg_color = "#FAFAFA" %}
+{% assign txt_color = "#2E29FC" %}
+{% assign content_type = course.properties.content_type | downcase | replace: " ", "-" %}
+
+{% if content_type == "blue-mattr" %}
+  {% assign bg_color = "#E2E5FF" %}
+  {% assign txt_color = "#2E29FC" %}
+{% endif %}
+
+{% if content_type == "dark-mattr" %}
+  {% assign bg_color = "#333132" %}
+  {% assign txt_color = "#EAD9E3" %}
+{% endif %}
+
+{% if content_type == "grey-mattr" %}
+  {% assign bg_color = "#C0BDBF" %}
+  {% assign txt_color = "#333132" %}
+{% endif %}
+
+<div class="course-header" style="background-color:{{bg_color}}">
+  <img class="course-header-image np-hidden-mobile" src="{{ course.image_url }}" alt="{{ course.name }}" />
+  <div class="np-max-width course-header-container">
+    <div class="course-title" style="color:{{txt_color}}">
+      {{ course.name }} ({{course.properties.experience}})
+    </div>
+  </div>
+</div>
+
+<style>
+  .course-header {
+    position: relative;
+    width: 100%;
+    margin-top:70px;
+  }
+
+  .course-header-image {
+    position:absolute;
+    right:0;
+    top:50%;
+    transform:translateY(-50%);
+    height:100%;
+    width:auto;
+  }
+
+  .course-header-container {
+    padding: 32px 24px;
+  }
+
+  .course-title {
+    font-size: 32px;
+    font-weight: 600;
+    max-width: 520px;
+    line-height: 38px;
+    position: relative;
+  }
+
+  @media (min-width:768px) {
+    .course-header {
+      height: 300px;
+    }
+
+    .course-header-container {
+      padding: 48px 24px 32px;
+    }
+
+    .course-title {
+      font-size: 40px;
+      line-height: 48px;
+    }
+  }
+
+  @media (min-width:1200px) {
+    .course-header-container {
+      padding: 48px 5% 32px;
+    }
+
+    .course-title {
+      font-size: 48px;
+      line-height: 52px;
+    }
+  }
+</style>