refactor: content inner header as template to be reusable

app/static/css/register.css

@@ -8,17 +8,3 @@
     width: 200px;
   }
 }
-
-.register__header-logo {
-  background-image: url('./../img/paw.png');
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.register__header-title {
-  margin-bottom: 0px;
-  @media(min-width: 576px) {
-    margin-bottom: .5rem;  
-  }
-}

app/static/css/styles.css

@@ -12,3 +12,17 @@ body {
 .content {
   flex-grow: 1;
 }
+
+.inner-header-logo {
+  background-image: url('./../img/paw.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.inner-header-title {
+  margin-bottom: 0px;
+  @media(min-width: 576px) {
+    margin-bottom: .5rem;  
+  }
+}

app/templates/layout/inner_header.html

@@ -0,0 +1,10 @@
+{% macro inner_header(title) %}
+<div class="row">
+  {% include 'message.html' %}
+  <div class="col-2 inner-header-logo">
+  </div>
+  <div class="col-10 gx-md-4 gx-0">
+    <h1 class="inner-header-title">{{title}}</h1>
+  </div>
+</div>
+{% endmacro %}

app/templates/users/register.html

@@ -1,5 +1,6 @@
 {% extends "layout/layout.html" %}
 {% from "forms/validation-block.html" import form_field_validation %}
+{% from "layout/inner_header.html" import inner_header%} 
 {% block title %} register {% endblock %}
 {% block head %} 
   {{ super() }}
@@ -7,15 +8,9 @@
 {% endblock %} 
 {% block content %}
 <div class="container">
-
   <div class="register mx-auto">
-    <div class="row my-3 my-md-5">
+    <div class="my-3 my-md-5">
-      {% include 'message.html' %}
+      {{ inner_header("Register") }}
-      <div class="col-2 register__header-logo">
-      </div>
-      <div class="col-10 gx-md-4 gx-0">
-        <h1 class="register__header-title">Register</h1>
-      </div>
     </div>
     <form class="row g-3 needs-validation" method="post" novalidate>
       <div class="col-12">