From fb438c26b1c880b9e3902a9a2d6a96dd94123d5a Mon Sep 17 00:00:00 2001
From: PlexSheep <software@cscherr.de>
Date: Tue, 3 Oct 2023 15:48:22 +0200
Subject: [PATCH] tagify styling

---
 gawa/blog/data/articles/1.toml            | 23 +++++++
 gawa/blog/data/articles/10.toml           | 23 +++++++
 gawa/blog/data/articles/2.toml            | 23 +++++++
 gawa/blog/data/articles/3.toml            | 23 +++++++
 gawa/blog/data/articles/4.toml            | 23 +++++++
 gawa/blog/data/articles/5.toml            | 23 +++++++
 gawa/blog/data/articles/6.toml            | 23 +++++++
 gawa/blog/data/articles/7.toml            | 23 +++++++
 gawa/blog/data/articles/8.toml            | 23 +++++++
 gawa/blog/data/articles/9.toml            | 23 +++++++
 gawa/blog/data/articles/de-1.md           |  0
 gawa/blog/data/articles/de-10.md          |  0
 gawa/blog/data/articles/de-2.md           |  0
 gawa/blog/data/articles/de-3.md           |  0
 gawa/blog/data/articles/de-4.md           |  0
 gawa/blog/data/articles/de-5.md           |  0
 gawa/blog/data/articles/de-6.md           |  0
 gawa/blog/data/articles/de-7.md           |  0
 gawa/blog/data/articles/de-8.md           |  0
 gawa/blog/data/articles/de-9.md           |  0
 gawa/blog/data/articles/de-bash-arrays.md |  3 +
 gawa/blog/data/articles/en-1.md           |  0
 gawa/blog/data/articles/en-10.md          |  0
 gawa/blog/data/articles/en-2.md           |  0
 gawa/blog/data/articles/en-3.md           |  0
 gawa/blog/data/articles/en-4.md           |  0
 gawa/blog/data/articles/en-5.md           |  0
 gawa/blog/data/articles/en-6.md           |  0
 gawa/blog/data/articles/en-7.md           |  0
 gawa/blog/data/articles/en-8.md           |  0
 gawa/blog/data/articles/en-9.md           |  0
 gawa/blog/data/articles/en-bash-arrays.md |  3 +
 gawa/blog/templates/blog/blogpost.html    |  4 +-
 gawa/blog/templates/blog/browse.html      | 58 +++++++++++++-----
 gawa/start/templates/base.html            | 74 ++++++++++++++---------
 gawa/static/custom.css                    | 15 ++++-
 36 files changed, 343 insertions(+), 44 deletions(-)
 create mode 100644 gawa/blog/data/articles/1.toml
 create mode 100644 gawa/blog/data/articles/10.toml
 create mode 100644 gawa/blog/data/articles/2.toml
 create mode 100644 gawa/blog/data/articles/3.toml
 create mode 100644 gawa/blog/data/articles/4.toml
 create mode 100644 gawa/blog/data/articles/5.toml
 create mode 100644 gawa/blog/data/articles/6.toml
 create mode 100644 gawa/blog/data/articles/7.toml
 create mode 100644 gawa/blog/data/articles/8.toml
 create mode 100644 gawa/blog/data/articles/9.toml
 create mode 100644 gawa/blog/data/articles/de-1.md
 create mode 100644 gawa/blog/data/articles/de-10.md
 create mode 100644 gawa/blog/data/articles/de-2.md
 create mode 100644 gawa/blog/data/articles/de-3.md
 create mode 100644 gawa/blog/data/articles/de-4.md
 create mode 100644 gawa/blog/data/articles/de-5.md
 create mode 100644 gawa/blog/data/articles/de-6.md
 create mode 100644 gawa/blog/data/articles/de-7.md
 create mode 100644 gawa/blog/data/articles/de-8.md
 create mode 100644 gawa/blog/data/articles/de-9.md
 create mode 100644 gawa/blog/data/articles/en-1.md
 create mode 100644 gawa/blog/data/articles/en-10.md
 create mode 100644 gawa/blog/data/articles/en-2.md
 create mode 100644 gawa/blog/data/articles/en-3.md
 create mode 100644 gawa/blog/data/articles/en-4.md
 create mode 100644 gawa/blog/data/articles/en-5.md
 create mode 100644 gawa/blog/data/articles/en-6.md
 create mode 100644 gawa/blog/data/articles/en-7.md
 create mode 100644 gawa/blog/data/articles/en-8.md
 create mode 100644 gawa/blog/data/articles/en-9.md

diff --git a/gawa/blog/data/articles/1.toml b/gawa/blog/data/articles/1.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/1.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/10.toml b/gawa/blog/data/articles/10.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/10.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/2.toml b/gawa/blog/data/articles/2.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/2.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/3.toml b/gawa/blog/data/articles/3.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/3.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/4.toml b/gawa/blog/data/articles/4.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/4.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/5.toml b/gawa/blog/data/articles/5.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/5.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/6.toml b/gawa/blog/data/articles/6.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/6.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/7.toml b/gawa/blog/data/articles/7.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/7.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/8.toml b/gawa/blog/data/articles/8.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/8.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/9.toml b/gawa/blog/data/articles/9.toml
new file mode 100644
index 0000000..0afe0d5
--- /dev/null
+++ b/gawa/blog/data/articles/9.toml
@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""
diff --git a/gawa/blog/data/articles/de-1.md b/gawa/blog/data/articles/de-1.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-10.md b/gawa/blog/data/articles/de-10.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-2.md b/gawa/blog/data/articles/de-2.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-3.md b/gawa/blog/data/articles/de-3.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-4.md b/gawa/blog/data/articles/de-4.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-5.md b/gawa/blog/data/articles/de-5.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-6.md b/gawa/blog/data/articles/de-6.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-7.md b/gawa/blog/data/articles/de-7.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-8.md b/gawa/blog/data/articles/de-8.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-9.md b/gawa/blog/data/articles/de-9.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/de-bash-arrays.md b/gawa/blog/data/articles/de-bash-arrays.md
index 37c5b49..f66f0e0 100644
--- a/gawa/blog/data/articles/de-bash-arrays.md
+++ b/gawa/blog/data/articles/de-bash-arrays.md
@@ -15,6 +15,9 @@ markdown rendering.
 | yes    | super     | important |
 | really | really    | really    |
 
+cool math: $$1+2 \le \frac{1}{2}$$
+cool math: $1+2 \le \frac{1}{2}$
+
 ## Wait, but why?
 
 Writing about Bash is challenging because it's remarkably easy for an article
diff --git a/gawa/blog/data/articles/en-1.md b/gawa/blog/data/articles/en-1.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-10.md b/gawa/blog/data/articles/en-10.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-2.md b/gawa/blog/data/articles/en-2.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-3.md b/gawa/blog/data/articles/en-3.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-4.md b/gawa/blog/data/articles/en-4.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-5.md b/gawa/blog/data/articles/en-5.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-6.md b/gawa/blog/data/articles/en-6.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-7.md b/gawa/blog/data/articles/en-7.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-8.md b/gawa/blog/data/articles/en-8.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-9.md b/gawa/blog/data/articles/en-9.md
new file mode 100644
index 0000000..e69de29
diff --git a/gawa/blog/data/articles/en-bash-arrays.md b/gawa/blog/data/articles/en-bash-arrays.md
index 536665b..4c43dd7 100644
--- a/gawa/blog/data/articles/en-bash-arrays.md
+++ b/gawa/blog/data/articles/en-bash-arrays.md
@@ -14,6 +14,9 @@ markdown rendering.
 | yes    | super     | important |
 | really | really    | really    |
 
+cool math: $$1+2 \le \frac{1}{2}$$
+cool math: $1+2 \le \frac{1}{2}$
+
 ## Wait, but why?
 
 Writing about Bash is challenging because it's remarkably easy for an article
diff --git a/gawa/blog/templates/blog/blogpost.html b/gawa/blog/templates/blog/blogpost.html
index 09a0e79..36cdba4 100644
--- a/gawa/blog/templates/blog/blogpost.html
+++ b/gawa/blog/templates/blog/blogpost.html
@@ -11,12 +11,12 @@
 {% block nav %}
     {% include 'nav.html' %}
 {% endblock nav %}
-{% block headscripts %}
+{% block head %}
     <script type="text/javascript"
             id="MathJax-script"
             async
             src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
-{% endblock headscripts %}
+{% endblock head %}
 {% block main %}
     <div class="container-xl">
         <article>
diff --git a/gawa/blog/templates/blog/browse.html b/gawa/blog/templates/blog/browse.html
index 1b3cf4b..fb22def 100644
--- a/gawa/blog/templates/blog/browse.html
+++ b/gawa/blog/templates/blog/browse.html
@@ -8,12 +8,14 @@
 {% block title %}
     {% translate "cscherr.de" %} - {% translate "Blog" %}
 {% endblock title %}
+{% block blockname %}
+{% endblock blockname %}
 {% block nav %}
     {% include 'nav.html' %}
 {% endblock nav %}
 {% block main %}
     <div class="container">
-        <div class="row">
+        <div class="row pb-5">
             <div class="col">
                 <!-- <div class="position-absolute top-50 start-50 translate-middle"> -->
                 <h1 class="">
@@ -22,19 +24,47 @@
                 </h1>
                 <!-- </div> -->
             </div>
-            <div class="col position-relative">
-                <div class="position-absolute top-50 start-50 translate-middle">
-                    <form class="d-flex" role="search" action="" method="GET">
-                        <input type="search"
-                               name="search"
-                               class="form-control me-2"
-                               aria-label="Search"
-                               placeholder="{% trans "Search" %}"
-                               required=""
-                               id="id_search">
-                        <button class="btn bg-primary fw-bold" type="submit">{% trans "Filter" %}</button>
-                    </form>
-                </div>
+            <div class="col">
+                <form class="d-flex" role="search" action="" method="GET">
+                    <div class="container overflow-hidden ">
+                        <div class="row gy-5">
+                            <div class="col position-relative">
+                                <div class="row">
+                                    <div class="col">
+                                        <input type="search"
+                                               name="search"
+                                               class="form-control me-2 flex-fill"
+                                               aria-label="Search"
+                                               placeholder="{% trans "Search" %}"
+                                               required=""
+                                               id="id_search">
+                                        <div class="col position-relative mt-2">
+                                            <button class="btn bg-primary fw-bold position-absolute top-50 end-0" type="submit">{% trans "Filter" %}</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col">
+                                <input class="tagify"
+                                       name="keywords"
+                                       placeholder="{% trans "Keywords" %}"
+                                       value='tag1, tag2 autofocus'>
+                            </div>
+                            <!-- <div class="col"> -->
+                            <!--     <input class="tagify" -->
+                            <!--            name="category" -->
+                            <!--            placeholder="{% trans "Category" %}" -->
+                            <!--            value='tag1, tag2 autofocus'> -->
+                            <!-- </div> -->
+                        </div>
+                    </div>
+                    <script>
+                    // The DOM element you wish to replace with Tagify
+                    var input = document.querySelector('input[class=tagify]');
+                    // initialize Tagify on the above input node reference
+                    new Tagify(input)
+                    </script>
+                </form>
             </div>
         </div>
         <div class="row row-cols-6 gap-1">
diff --git a/gawa/start/templates/base.html b/gawa/start/templates/base.html
index c413731..85abd3e 100644
--- a/gawa/start/templates/base.html
+++ b/gawa/start/templates/base.html
@@ -5,14 +5,31 @@
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}">
     <head>
-        <title>{% block title %}{% endblock title %}</title>
+        <title>
+            {% block title %}
+            {% endblock title %}
+        </title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% compress css %}
-        <link type="text/x-scss" href="/static/bs5/scss/bootstrap.scss" rel="stylesheet" media="screen">
-        <link rel="stylesheet" href="/static/bsi1/font/bootstrap-icons.min.css">
-        <link rel="stylesheet" href="/static/codehighlight.css">
-        <link rel="stylesheet" href="/static/custom.css">
+            <link type="text/x-scss"
+                  href="/static/bs5/scss/bootstrap.scss"
+                  rel="stylesheet"
+                  media="screen">
+            <link rel="stylesheet" href="/static/bsi1/font/bootstrap-icons.min.css">
+            <link rel="stylesheet" href="/static/codehighlight.css">
+            <link rel="stylesheet" href="/static/custom.css">
+            {% block head_compress_css %}
+            {% endblock head_compress_css %}
+            <link href="/static/tagify/dist/tagify.css"
+                  rel="stylesheet"
+                  type="text/css" />
+        {% endcompress %}
+        {% compress js %}
+            <script src="/static/tagify/dist/tagify.min.js"></script>
+            <script src="/static/tagify/dist/tagify.polyfills.min.js"></script>
+            {% block head_compress_js %}
+            {% endblock head_compress_js %}
         {% endcompress %}
         {% block headscripts %}
         {% endblock headscripts %}
@@ -22,7 +39,8 @@
             {% include 'nav.html' %}
         {% endblock nav %}
         <main class="m-5" style="min-height: 80vh;">
-            {% block main %}{% endblock main %}
+            {% block main %}
+            {% endblock main %}
         </main>
         <footer class="text-center text-lg-start bg-dark-subtle text-muted">
             <div class="container overflow-hidden text-center">
@@ -51,45 +69,47 @@
                         <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
                             <h6 class="text-uppercase fw-bold mb-4">Information</h6>
                             <p>
-                            {% blocktranslate %}
-                            Ich habe diese Website selbst programmiert und gehostet. 
-                            Falls Sie einen Fehler belibiger Art finden, würde ich mich freuen, 
+                                {% blocktranslate %}
+                            Ich habe diese Website selbst programmiert und gehostet.
+                            Falls Sie einen Fehler belibiger Art finden, würde ich mich freuen,
                             wenn Sie mich darüber benachrichtigen.
                             <br><br>
-                            Die Suche nach Schwachstellen und Fehlern auf dieser Website ist für 
+                            Die Suche nach Schwachstellen und Fehlern auf dieser Website ist für
                             diesen Zweck ausdrücklich erlaubt.
                             {% endblocktranslate %}
-                            <br>
-                            <a href="mailto:admin@cscherr.de">admin@cscherr.de</a>
+                                <br>
+                                <a href="mailto:admin@cscherr.de">admin@cscherr.de</a>
                             </p>
                         </div>
                         <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
-                            <h6 class="text-uppercase fw-bold mb-4">
-                                Links
-                            </h6>
+                            <h6 class="text-uppercase fw-bold mb-4">Links</h6>
                             <p>
-                            <a href="{% url 'start:legal' %}" class="text-reset">{% translate "Legal Info" %}</a>
+                                <a href="{% url 'start:legal' %}" class="text-reset">{% translate "Legal Info" %}</a>
                             </p>
                             <p>
-                            <a href="https://github.com/plexsheep" class="text-reset">GitHub</a>
+                                <a href="https://github.com/plexsheep" class="text-reset">GitHub</a>
                             </p>
                             <p>
-                            <a href="https://git.cscherr.de" class="text-reset">Selfhosted Git</a>
+                                <a href="https://git.cscherr.de" class="text-reset">Selfhosted Git</a>
                             </p>
                             <p>
-                            <a href="https://git.cscherr.de/PlexSheep/gawa" class="text-reset">{% trans "Quellcode dieser Website" %}</a>
+                                <a href="https://git.cscherr.de/PlexSheep/gawa" class="text-reset">{% trans "Quellcode dieser Website" %}</a>
                             </p>
                         </div>
                         <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
                             <h6 class="text-uppercase fw-bold mb-4">{% translate "Contact" %}</h6>
                             <p>Christoph Johannes Scherr</p>
-                            <p><i class="fas fa-home me-3 text-secondary">
-                                Leininger Straße 20,<br>
-                                Maxdorf 67133,<br>
-                                {% translate "Deutschland" %}
-                            </i></p>
                             <p>
-                            <a href="mailto:contact@cscherr.de">contact@cscherr.de</a>
+                                <i class="fas fa-home me-3 text-secondary">
+                                    Leininger Straße 20,
+                                    <br>
+                                    Maxdorf 67133,
+                                    <br>
+                                    {% translate "Deutschland" %}
+                                </i>
+                            </p>
+                            <p>
+                                <a href="mailto:contact@cscherr.de">contact@cscherr.de</a>
                             </p>
                         </div>
                     </div>
@@ -102,8 +122,8 @@
             </div>
         </footer>
         {% compress js %}
-        <script src="/static/custom.js"></script>
-        <script src="/static/bs5/dist/js/bootstrap.bundle.min.js"></script>
+            <script src="/static/custom.js"></script>
+            <script src="/static/bs5/dist/js/bootstrap.bundle.min.js"></script>
         {% endcompress %}
     </body>
 </html>
diff --git a/gawa/static/custom.css b/gawa/static/custom.css
index 65eb703..7010287 100644
--- a/gawa/static/custom.css
+++ b/gawa/static/custom.css
@@ -2,6 +2,7 @@
 .codehilite {
   padding: 12px;
 }
+
 .linenodiv {
   padding-right: 4px;
   margin-right: 12px;
@@ -16,5 +17,17 @@ main * {
 	*
 	* The header is typically 59.5px high.
 	*/
-	scroll-margin-top: 60px;
+  scroll-margin-top: 60px;
+}
+
+.tagify {
+  --tags-border-color: var(--bs-light-border-subtle);
+  --placeholder-color: var(--bs-body-color) !important;
+  --placeholder-color-focus: var(--bs-primary) !important;
+  --tag-bg: var(--bs-primary) !important;
+  --tags-border-color: var(--bs-border-color) !important;
+  --tag-border-radius: 0.375rem !important;
+  --tag-text-color: var( 	--bs-body-color) !important;
+  /* border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; */
+  border-radius: 0.375rem;
 }