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">
<h1 class="h1">Seite nicht gefunden</h1>
<img
src="{{ get_url(path='images/404/bot.svg') }}"
class="img-fluid"
width="300"
/>
<img src="{{ get_url(path='images/404/bot.svg') }}"
class="img-fluid"
width="300"/>
<div class="d-grid gap-2 pt-3">
<a
class="btn btn-dark"
href="/"
role="button"
>Zurück zur Startseite</a>
<a class="btn btn-dark" href="/" role="button">Zurück zur Startseite</a>
</div>
</div>
{% endblock content %}

View file

@ -1,24 +1,22 @@
{% extends "base.tera.html" %}
{% block content %}
<h2 class="h1 text-center">
{{ page.title }}
</h2>
<h2 class="h1 text-center">{{ page.title }}</h2>
<br>
<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 image_path = dir ~ config.extra.appointment_image_filename %}
{% set image = resize_image(path=image_path, width=520, height=520, op="fill") %}
<img
src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid shadow"
/>
<img src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid shadow"/>
</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>
{{ page.content | safe }}
@ -50,20 +48,25 @@
</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">
<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>
{% endblock content %}
{% block scripts %}
<script>
"use strict";
const iframe = document.querySelector("#iframe");
iframe.addEventListener("load", () => {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 50 + "px";
});

View file

@ -15,29 +15,27 @@
</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 }}"
/>
<link 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>
.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 styles %}
{% block styles %}
{% endblock styles %}
</head>
<body class="d-flex flex-column min-vh-100">
{% include "partials/nav.tera.html" %}
@ -45,20 +43,21 @@
<div class="container-xxl">
<br>
{% block content %}{% endblock content %}
{% block content %}
{% endblock content %}
<br>
</div>
<footer
class="mt-auto"
style="background-image: linear-gradient(white, {{ config.extra.primary_color }} 15%); text-align: center;"
>
<footer class="mt-auto"
style="background-image: linear-gradient(white, {{ config.extra.primary_color }} 15%);
text-align: center">
{% include "partials/footer.tera.html" %}
</footer>
<script src="{{ get_url(path='bootstrap/bootstrap.bundle.min.js') }}"></script>
{% block scripts %}{% endblock scripts %}
{% block scripts %}
{% endblock scripts %}
</body>
</html>

View file

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

View file

@ -1,16 +1,16 @@
{% macro offer(image_filename, name, description) %}
<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 image_path = dir ~ image_filename %}
{% set image = resize_image(path=image_path, width=400, height=400, op="fill") %}
<img
src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid shadow"
/>
<img src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid shadow"/>
</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>
<h3>{{ name }}</h3>
<p>{{ description | safe }}</p>

View file

@ -8,15 +8,18 @@
{{ offers_macros::offer(
image_filename="Rücken-_und_Nackenmassage.jpg",
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."
) }}
{{ offers_macros::offer(
image_filename="Ying-Yang-Massage.jpg",
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>
Hilft Verspannungen zu lösen und lindert Schmerzen.<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.
<br>
Hilft Verspannungen zu lösen und lindert Schmerzen.
<br>
Eine Wohltat nach einem anstrengenden Tag."
) }}
@ -52,8 +55,10 @@
{{ offers_macros::offer(
image_filename="Bambus-Massage.jpeg",
name="Bambus-Massage",
description="Löst auch tiefe Verspannungen!<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>
description="Löst auch tiefe Verspannungen!
<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."
) }}
@ -86,10 +91,10 @@
)}}
<div class="d-grid col-5 mx-auto pt-2 pb-3">
<a href="/termin" class="btn btn-success grow-on-hover shadow">
Terminvereinbarung
</a>
<a href="/termin" class="btn btn-success grow-on-hover shadow">Terminvereinbarung</a>
</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 %}

View file

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

View file

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

View file

@ -12,7 +12,9 @@
</tr>
<tr>
<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>
<th class="pe-3" scope="row">Adresse:</th>

View file

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