1
0
Fork 0

Format with djlint

This commit is contained in:
Mo 2022-11-06 20:54:49 +01:00
parent 7bb61948b3
commit 2bc4cefdd2
10 changed files with 91 additions and 110 deletions

View file

@ -3,18 +3,12 @@
<div class="container text-center"> <div class="container text-center">
<h1 class="h1">Seite nicht gefunden</h1> <h1 class="h1">Seite nicht gefunden</h1>
<img <img src="{{ get_url(path='images/404/bot.svg') }}"
src="{{ get_url(path='images/404/bot.svg') }}" class="img-fluid"
class="img-fluid" width="300"/>
width="300"
/>
<div class="d-grid gap-2 pt-3"> <div class="d-grid gap-2 pt-3">
<a <a class="btn btn-dark" href="/" role="button">Zurück zur Startseite</a>
class="btn btn-dark"
href="/"
role="button"
>Zurück zur Startseite</a>
</div> </div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -1,24 +1,22 @@
{% extends "base.tera.html" %} {% extends "base.tera.html" %}
{% block content %} {% block content %}
<h2 class="h1 text-center"> <h2 class="h1 text-center">{{ page.title }}</h2>
{{ page.title }}
</h2>
<br> <br>
<div class="row pb-4"> <div class="row pb-4">
<div class="col d-flex align-content-center flex-wrap" style="min-width: 300px;"> <div class="col d-flex align-content-center flex-wrap"
style="min-width: 300px">
{% set dir = page.path | trim_start_matches(pat="/") %} {% set dir = page.path | trim_start_matches(pat="/") %}
{% set image_path = dir ~ config.extra.appointment_image_filename %} {% set image_path = dir ~ config.extra.appointment_image_filename %}
{% set image = resize_image(path=image_path, width=520, height=520, op="fill") %} {% set image = resize_image(path=image_path, width=520, height=520, op="fill") %}
<img <img src="{{ image.url }}"
src="{{ image.url }}" class="rounded d-block mx-auto img-fluid shadow"/>
class="rounded d-block mx-auto img-fluid shadow"
/>
</div> </div>
<div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3" style="min-width: 300px;"> <div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3"
style="min-width: 300px">
<div> <div>
{{ page.content | safe }} {{ page.content | safe }}
@ -50,20 +48,25 @@
</div> </div>
</div> </div>
<iframe id="iframe" src="{{ get_url(path='/contact-form') }}" width="100%" title="Kontakt-Formular"></iframe> <iframe id="iframe"
src="{{ get_url(path='/contact-form') }}"
width="100%"
title="Kontakt-Formular"></iframe>
<div class="alert alert-warning mt-2" role="alert"> <div class="alert alert-warning mt-2" role="alert">
<h5 class="alert-heading">Bitte beachten Sie:</h5> <h5 class="alert-heading">Bitte beachten Sie:</h5>
<p class="mb-0">Können Sie einen vereinbarten Termin nicht wahrnehmen, so informieren Sie uns darüber bitte spätestens 8 Stunden vor dem Termin. Ansonsten behalten wir uns vor, Ihnen den Ausfall zu berechnen.</p> <p class="mb-0">
Können Sie einen vereinbarten Termin nicht wahrnehmen, so informieren Sie uns darüber bitte spätestens 8 Stunden vor dem Termin. Ansonsten behalten wir uns vor, Ihnen den Ausfall zu berechnen.
</p>
</div> </div>
{% endblock content %} {% endblock content %}
{% block scripts %} {% block scripts %}
<script> <script>
"use strict"; "use strict";
const iframe = document.querySelector("#iframe"); const iframe = document.querySelector("#iframe");
iframe.addEventListener("load", () => { iframe.addEventListener("load", () => {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 50 + "px"; iframe.style.height = iframe.contentDocument.body.scrollHeight + 50 + "px";
}); });

View file

@ -15,29 +15,27 @@
</title> </title>
{% set image = resize_image(path=config.extra.logo_path, width=32, height=32, op="fill") %} {% set image = resize_image(path=config.extra.logo_path, width=32, height=32, op="fill") %}
<link <link rel="icon" type="image/x-icon" href="{{ image.url }}" />
rel="icon"
type="image/x-icon"
href="{{ image.url }}"
/>
<link href="{{ get_url(path='bootstrap/bootstrap.min.css') }}" rel="stylesheet"/> <link href="{{ get_url(path='bootstrap/bootstrap.min.css') }}"
rel="stylesheet"/>
<style> <style>
.grow-on-hover { .grow-on-hover {
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
} }
.grow-on-hover:hover { .grow-on-hover:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.underline-on-hover:hover { .underline-on-hover:hover {
text-decoration: underline; text-decoration: underline;
} }
</style> </style>
{% block styles %}{% endblock styles %} {% block styles %}
{% endblock styles %}
</head> </head>
<body class="d-flex flex-column min-vh-100"> <body class="d-flex flex-column min-vh-100">
{% include "partials/nav.tera.html" %} {% include "partials/nav.tera.html" %}
@ -45,20 +43,21 @@
<div class="container-xxl"> <div class="container-xxl">
<br> <br>
{% block content %}{% endblock content %} {% block content %}
{% endblock content %}
<br> <br>
</div> </div>
<footer <footer class="mt-auto"
class="mt-auto" style="background-image: linear-gradient(white, {{ config.extra.primary_color }} 15%);
style="background-image: linear-gradient(white, {{ config.extra.primary_color }} 15%); text-align: center;" text-align: center">
>
{% include "partials/footer.tera.html" %} {% include "partials/footer.tera.html" %}
</footer> </footer>
<script src="{{ get_url(path='bootstrap/bootstrap.bundle.min.js') }}"></script> <script src="{{ get_url(path='bootstrap/bootstrap.bundle.min.js') }}"></script>
{% block scripts %}{% endblock scripts %} {% block scripts %}
{% endblock scripts %}
</body> </body>
</html> </html>

View file

@ -1,30 +1,22 @@
{% extends "base.tera.html" %} {% extends "base.tera.html" %}
{% block styles %} {% block styles %}<link rel="stylesheet" href="{{ get_url(path='leaflet/leaflet.css') }}"/>{% endblock %}
<link rel="stylesheet" href="{{ get_url(path='leaflet/leaflet.css') }}"/>
{% endblock %}
{% block content %} {% block content %}
<div class="row pb-3"> <div class="row pb-3">
<div class="col d-flex align-content-center flex-wrap"> <div class="col d-flex align-content-center flex-wrap">
{% set image = resize_image(path=config.extra.portrait_path, height=500, op="fit_height") %} {% set image = resize_image(path=config.extra.portrait_path, height=500, op="fit_height") %}
<img <img src="{{ image.url }}" class="rounded d-block mx-auto shadow" />
src="{{ image.url }}"
class="rounded d-block mx-auto shadow"
/>
</div> </div>
<div class="col d-flex align-content-center flex-wrap ps-5 pe-5 pt-3" style="min-width: 350px;"> <div class="col d-flex align-content-center flex-wrap ps-5 pe-5 pt-3"
style="min-width: 350px">
<p style="font-size: 17px;">{{ config.extra.self_introduction }}</p> <p style="font-size: 17px;">{{ config.extra.self_introduction }}</p>
</div> </div>
</div> </div>
<div class="d-grid col-5 mx-auto gap-2 pt-2 pb-4"> <div class="d-grid col-5 mx-auto gap-2 pt-2 pb-4">
<a href="/angebot" class="btn btn-success grow-on-hover shadow"> <a href="/angebot" class="btn btn-success grow-on-hover shadow">Unser Angebot</a>
Unser Angebot <a href="/termin" class="btn btn-success grow-on-hover shadow">Terminvereinbarung</a>
</a>
<a href="/termin" class="btn btn-success grow-on-hover shadow">
Terminvereinbarung
</a>
</div> </div>
<div class="mb-2 shadow" id="map" style="height: 40vh;"></div> <div class="mb-2 shadow" id="map" style="height: 40vh;"></div>
@ -39,13 +31,13 @@
zoom: 17, zoom: 17,
scrollWheelZoom: false, scrollWheelZoom: false,
}); });
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 5, minZoom: 5,
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); }).addTo(map);
L.marker(center).addTo(map).bindPopup("{{ config.extra.address }}").openPopup(); L.marker(center).addTo(map).bindPopup("{{ config.extra.address }}").openPopup();
</script> </script>
{% endblock %} {% endblock %}

View file

@ -1,16 +1,16 @@
{% macro offer(image_filename, name, description) %} {% macro offer(image_filename, name, description) %}
<div class="row pb-5 pt-3"> <div class="row pb-5 pt-3">
<div class="col d-flex align-content-center flex-wrap" style="min-width: 300px;"> <div class="col d-flex align-content-center flex-wrap"
style="min-width: 300px">
{% set dir = page.path | trim_start_matches(pat="/") %} {% set dir = page.path | trim_start_matches(pat="/") %}
{% set image_path = dir ~ image_filename %} {% set image_path = dir ~ image_filename %}
{% set image = resize_image(path=image_path, width=400, height=400, op="fill") %} {% set image = resize_image(path=image_path, width=400, height=400, op="fill") %}
<img <img src="{{ image.url }}"
src="{{ image.url }}" class="rounded d-block mx-auto img-fluid shadow"/>
class="rounded d-block mx-auto img-fluid shadow"
/>
</div> </div>
<div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3" style="min-width: 300px;"> <div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3"
style="min-width: 300px">
<div> <div>
<h3>{{ name }}</h3> <h3>{{ name }}</h3>
<p>{{ description | safe }}</p> <p>{{ description | safe }}</p>

View file

@ -8,15 +8,18 @@
{{ offers_macros::offer( {{ offers_macros::offer(
image_filename="Rücken-_und_Nackenmassage.jpg", image_filename="Rücken-_und_Nackenmassage.jpg",
name="Rücken- und Nackenmassage mit Öl", name="Rücken- und Nackenmassage mit Öl",
description="Dieser zentrale Bereich des Körpers ist täglich vielen Belastungen ausgesetzt.<br> description="Dieser zentrale Bereich des Körpers ist täglich vielen Belastungen ausgesetzt.
<br>
Eine Rücken- und Nackenmassage kann aufbauend wirken und die Regeneration fördern. Unsere Kunden schätzen diese Massage und kommen gerne wieder." Eine Rücken- und Nackenmassage kann aufbauend wirken und die Regeneration fördern. Unsere Kunden schätzen diese Massage und kommen gerne wieder."
) }} ) }}
{{ offers_macros::offer( {{ offers_macros::offer(
image_filename="Ying-Yang-Massage.jpg", image_filename="Ying-Yang-Massage.jpg",
name="Ying-Yang-Massage", name="Ying-Yang-Massage",
description="Eine tiefe Form der Ganzkörpermassage, die zur Entspannung dient. Das Massieren mit feinen Ölen, kombiniert mit Handgriffen der traditionellen Thaimassage am ganzen Körper, bewirkt eine tiefe körperliche und seelische Entspannung.<br> description="Eine tiefe Form der Ganzkörpermassage, die zur Entspannung dient. Das Massieren mit feinen Ölen, kombiniert mit Handgriffen der traditionellen Thaimassage am ganzen Körper, bewirkt eine tiefe körperliche und seelische Entspannung.
Hilft Verspannungen zu lösen und lindert Schmerzen.<br> <br>
Hilft Verspannungen zu lösen und lindert Schmerzen.
<br>
Eine Wohltat nach einem anstrengenden Tag." Eine Wohltat nach einem anstrengenden Tag."
) }} ) }}
@ -52,8 +55,10 @@
{{ offers_macros::offer( {{ offers_macros::offer(
image_filename="Bambus-Massage.jpeg", image_filename="Bambus-Massage.jpeg",
name="Bambus-Massage", name="Bambus-Massage",
description="Löst auch tiefe Verspannungen!<br> description="Löst auch tiefe Verspannungen!
Hier werden unterschiedlich geformte Bambusstäbe für die Massage genutzt. Diese Stäbe wirken im Sommer kühlend, können aber auch angewärmt werden.<br> <br>
Hier werden unterschiedlich geformte Bambusstäbe für die Massage genutzt. Diese Stäbe wirken im Sommer kühlend, können aber auch angewärmt werden.
<br>
Durch verschiedene Techniken wie Rollen, Kneten, Hebeln und Klopfen lösen sich auch tiefer liegende Verspannungen auf eine wohltuende Art. Somit ergibt sich eine positive Wirkung auf Muskulatur und Faszien. Diese Massage befreit von alltäglichem Stress und vermittelt ein Gefühl von Leichtigkeit." Durch verschiedene Techniken wie Rollen, Kneten, Hebeln und Klopfen lösen sich auch tiefer liegende Verspannungen auf eine wohltuende Art. Somit ergibt sich eine positive Wirkung auf Muskulatur und Faszien. Diese Massage befreit von alltäglichem Stress und vermittelt ein Gefühl von Leichtigkeit."
) }} ) }}
@ -86,10 +91,10 @@
)}} )}}
<div class="d-grid col-5 mx-auto pt-2 pb-3"> <div class="d-grid col-5 mx-auto pt-2 pb-3">
<a href="/termin" class="btn btn-success grow-on-hover shadow"> <a href="/termin" class="btn btn-success grow-on-hover shadow">Terminvereinbarung</a>
Terminvereinbarung
</a>
</div> </div>
<h4 class="text-center p-3" style="color: red;">Wichtig: Jegliche Nachfrage nach Erotik ist unerwünscht und respektlos!</h4> <h4 class="text-center p-3" style="color: red;">
Wichtig: Jegliche Nachfrage nach Erotik ist unerwünscht und respektlos!
</h4>
{% endblock %} {% endblock %}

View file

@ -5,9 +5,8 @@
{% for footer_item in config.extra.footer_items %} {% for footer_item in config.extra.footer_items %}
<div class="col-sm p-1"> <div class="col-sm p-1">
<a href="{{ footer_item.url }}" style="text-decoration: none;"> <a href="{{ footer_item.url }}" style="text-decoration: none;">
<span class="underline-on-hover" style="color: {{ config.extra.secondary_color}};"> <span class="underline-on-hover"
{{ footer_item.name }} style="color: {{ config.extra.secondary_color }}">{{ footer_item.name }}</span>
</span>
</a> </a>
</div> </div>
{% endfor %} {% endfor %}

View file

@ -1,21 +1,19 @@
{% set image = resize_image(path="images/background/nav_background.jpg", height=750, op="fit_height") %} {% set image = resize_image(path="images/background/nav_background.jpg", height=750, op="fit_height") %}
<div <div class="d-flex align-content-end flex-wrap"
class="d-flex align-content-end flex-wrap" style="background-image: url('{{ image.url }}');
style=" background-position: center;
background-image: url('{{ image.url }}'); height: 40vh;
background-position: center; background-size: cover">
height: 40vh; <div class="container-fluid mb-3"
background-size: cover; style="background-color: rgba(0, 0, 0, 0.6)">
"
>
<div class="container-fluid mb-3" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="container-xxl text-white pb-2 pt-2 ps-4 pe-4"> <div class="container-xxl text-white pb-2 pt-2 ps-4 pe-4">
<h1 style="font-weight: bold;">{{ config.title }}</h1> <h1 style="font-weight: bold;">{{ config.title }}</h1>
<h5>{{ config.extra.address }}</h5> <h5>{{ config.extra.address }}</h5>
</div> </div>
</div> </div>
</div> </div>
<nav class="navbar navbar-expand-lg" style="background-image: linear-gradient({{ config.extra.primary_color }}, 25%, white);"> <nav class="navbar navbar-expand-lg"
style="background-image: linear-gradient({{ config.extra.primary_color }}, 25%, white)">
<div class="container-xxl"> <div class="container-xxl">
<a class="navbar-brand grow-on-hover" href="/"> <a class="navbar-brand grow-on-hover" href="/">
<!-- Use heigher resize_height for better resolution --> <!-- Use heigher resize_height for better resolution -->
@ -24,37 +22,28 @@
{% set logo_width_to_height_ratio = logo_meta.width / logo_meta.height %} {% set logo_width_to_height_ratio = logo_meta.width / logo_meta.height %}
{% set resize_width = logo_width_to_height_ratio * resize_height | int %} {% set resize_width = logo_width_to_height_ratio * resize_height | int %}
{% set image = resize_image(path=config.extra.logo_path, width=resize_width, height=resize_height, op="fill") %} {% set image = resize_image(path=config.extra.logo_path, width=resize_width, height=resize_height, op="fill") %}
<img <img src="{{ image.url }}"
src="{{ image.url }}" {% set actual_height = 70 %}
{% set actual_height = 70 %} {% set actual_width = logo_width_to_height_ratio * actual_height | int %}
{% set actual_width = logo_width_to_height_ratio * actual_height | int %} width="{{ actual_width }}"
width="{{ actual_width }}" height="{{ actual_height }}"/>
height="{{ actual_height }}"
/>
</a> </a>
<button <button class="navbar-toggler"
class="navbar-toggler" type="button"
type="button" data-bs-toggle="collapse"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-expanded="false" aria-label="Toggle navigation">
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
{% for menu_item in config.extra.menu_items %} {% for menu_item in config.extra.menu_items %}
<li class="nav-item"> <li class="nav-item">
<a <a class="nav-link" href="{{ menu_item.url }}">
class="nav-link" <button class="btn btn-outline-success" type="button">{{ menu_item.name }}</button>
href="{{ menu_item.url }}"
>
<button class="btn btn-outline-success" type="button">
{{ menu_item.name }}
</button>
</a> </a>
</li> </li>
{% endfor %} {% endfor %}

View file

@ -12,7 +12,9 @@
</tr> </tr>
<tr> <tr>
<th class="pe-3" scope="row">E-Mail:</th> <th class="pe-3" scope="row">E-Mail:</th>
<td class="ps-3"><a href="mailto:{{ config.extra.email }}">{{ config.extra.email }}</a></td> <td class="ps-3">
<a href="mailto:{{ config.extra.email }}">{{ config.extra.email }}</a>
</td>
</tr> </tr>
<tr> <tr>
<th class="pe-3" scope="row">Adresse:</th> <th class="pe-3" scope="row">Adresse:</th>

View file

@ -1,9 +1,7 @@
{% extends "base.tera.html" %} {% extends "base.tera.html" %}
{% block content %} {% block content %}
<h2 class="h2 text-center"> <h2 class="h2 text-center">{{ page.title }}</h2>
{{ page.title }}
</h2>
<br> <br>