From 561c595e4ec143d5336f7f70f030e2d13175748d Mon Sep 17 00:00:00 2001
From: mo8it <mo8it@proton.me>
Date: Tue, 30 May 2023 16:10:24 +0200
Subject: [PATCH] Starting point for base

---
 templates/base.html | 75 +++++++++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 37 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 1bccf38..a64c052 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,56 +5,57 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <title>
-            {% if page.title %}
-                {{ page.title }}
-            {% elif section.title %}
-                {{ section.title }}
-            {% else %}
-                {{ config.title }}
-            {% endif %}
+            {%- block title -%}
+                {%- if page.title -%}
+                    {{- page.title -}}
+                {%- elif section.title -%}
+                    {{- section.title -}}
+                {%- else -%}
+                    {{- config.title -}}
+                {%- endif -%}
+            {%- endblock -%}
         </title>
 
-        {% set image = resize_image(path=config.extra.logo_path, width=32, height=32, op="fill") %}
-        <link rel="icon" type="image/x-icon" href="{{ image.url }}" />
+        <meta name="description"
+              content="{%- block description -%}{%- if page.description -%}{{- page.description -}}{%- elif section.description -%}{{- section.description -}}{%- else -%}{{- config.description -}}{%- endif -%}{%- endblock -%}">
 
-        <link href="{{ get_url(path='bootstrap/bootstrap.min.css') }}"
+        <link rel="icon"
+              type="image/x-icon"
+              href="{{ get_url(path='images/logo.svg') | safe }}" />
+
+        <link href="{{ get_url(path='main.css') | safe }}?v={{ now(timestamp=true) }}"
               rel="stylesheet" />
 
-        <style>
-            .grow-on-hover {
-                transition: all .3s ease-in-out;
-            }
-
-            .grow-on-hover:hover {
-                transform: scale(1.1);
-            }
-
-            .underline-on-hover:hover {
-                text-decoration: underline;
-            }
-        </style>
-
         {% block styles %}{% endblock %}
     </head>
-    <body class="d-flex flex-column min-vh-100">
-        {% include "partials/nav.html" %}
+    <body class="flex flex-col p-3 mx-auto max-w-screen-lg min-h-screen text-lg">
+        <header class="flex gap-x-2 items-center px-5 mb-3 text-base font-light bg-gray-100 rounded-full sm:gap-x-4">
+            <a class="p-0.5 transition duration-500 hover:scale-110"
+               href="{{ get_url(path='/') | safe }}">
+                <img class="object-contain w-14 h-14 rounded"
+                     src="{{ get_url(path='images/logo.svg') | safe }}" />
+            </a>
 
-        <div class="container-xxl">
-            <br>
+            <nav class="flex gap-x-2 items-center sm:gap-x-4">
+                {% for menu_item in config.extra.menu_items %}
+                    <a class="p-1 no-underline transition duration-500 hover:scale-105"
+                       href="{{ menu_item.url | safe }}">{{ menu_item.name }}</a>
+                {% endfor %}
+            </nav>
+        </header>
 
+        <main class="leading-relaxed">
             {% block content %}{% endblock %}
+        </main>
 
-            <br>
-        </div>
-
-        <footer class="mt-auto"
-                style="background-image: linear-gradient(white, {{ config.extra.primary_color }} 15%);
-                       text-align: center">
-            {% include "partials/footer.html" %}
+        <footer class="pt-6 pb-2 mt-auto">
+            <nav class="flex flex-col gap-y-2 justify-around py-2 text-center bg-gray-100 rounded sm:flex-row sm:rounded-full">
+                {% for footer_item in config.extra.footer_items %}
+                    <a class="text-sm no-underline" href="{{ footer_item.url | safe }}">{{ footer_item.name }}</a>
+                {% endfor %}
+            </nav>
         </footer>
 
-        <script src="{{ get_url(path='bootstrap/bootstrap.bundle.min.js') }}"></script>
-
         {% block scripts %}{% endblock %}
     </body>
 </html>
