From 470707420bc1e853a483a67fe099e7b784362787 Mon Sep 17 00:00:00 2001
From: PlexSheep <software@cscherr.de>
Date: Fri, 2 Jun 2023 15:46:48 +0200
Subject: [PATCH] blog index layout

---
 gawa/blog/templates/blog/featured.html        | 88 +++++++++++++++++++
 gawa/blog/templates/blog/index.html           | 13 ++-
 gawa/blog/templates/blog/nav.html             | 32 +------
 gawa/start/templates/base.html                |  2 +-
 gawa/start/templates/dark_light_switch.html   | 23 +++++
 gawa/start/templates/main_search_form.html    |  6 ++
 .../templates/start/mainsearch_snippet.html   |  0
 gawa/start/templates/start/nav.html           | 53 +++++------
 gawa/start/templates/start/search.html        |  2 +-
 9 files changed, 153 insertions(+), 66 deletions(-)
 create mode 100644 gawa/blog/templates/blog/featured.html
 create mode 100644 gawa/start/templates/dark_light_switch.html
 create mode 100644 gawa/start/templates/main_search_form.html
 delete mode 100644 gawa/start/templates/start/mainsearch_snippet.html

diff --git a/gawa/blog/templates/blog/featured.html b/gawa/blog/templates/blog/featured.html
new file mode 100644
index 0000000..2437058
--- /dev/null
+++ b/gawa/blog/templates/blog/featured.html
@@ -0,0 +1,88 @@
+{% load i18n %}
+<div class="container-lg mt-5">
+    <h4 class="">{% trans "Featured" %}</h4>
+    <div class="row my-3">
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row my-5">
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card" style="width: 18rem;">
+                <img src="..." class="card-img-top" alt="...">
+                <div class="card-body">
+                    <h5 class="card-title">Card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/gawa/blog/templates/blog/index.html b/gawa/blog/templates/blog/index.html
index 0de2ddd..663b6fc 100644
--- a/gawa/blog/templates/blog/index.html
+++ b/gawa/blog/templates/blog/index.html
@@ -13,7 +13,7 @@
         <p>{% translate "Blog" %}</p>
     </div>
     <div class="row text-center">
-        <div class="col m-5">
+        <div class="col mx-3 my-5">
             <h3>{% translate "Writeups" %}</h3>
             <p>
             {% blocktranslate %}
@@ -21,24 +21,29 @@
             {% endblocktranslate %}
             </p>
         </div>
-        <div class="col m-5">
+        <div class="col mx-3 my-5">
             <h3>{% translate "Open Source" %}</h3>
             {% blocktranslate %}
             If something comes up, I may post Linux guides or my thoughts on current processes here.
             {% endblocktranslate %}
         </div>
-        <div class="col m-5">
+        <div class="col mx-3 my-5">
             <h3>{% translate "Selfhosting" %}</h3>
             {% blocktranslate %}
             Selfhosting is something that I'm really fond of. There will be guides and thoughts about that too
             {% endblocktranslate %}
         </div>
-        <div class="col m-5">
+        <div class="col mx-3 my-5">
             <h3>{% translate "Anything Really" %}</h3>
             {% blocktranslate %}
             This is my personal Blog after all, I will put here whatever I want and you can't stop me.
             {% endblocktranslate %}
         </div>
     </div>
+    <div class="container text-center jumbotron my-3">
+        <h1 class="my-4">{% translate "Looking for anything specific?" %}</h1>
+        {% include 'main_search_form.html' %}
+    </div>
+    {% include 'blog/featured.html' %}
 </div>
 {% endblock main %}
diff --git a/gawa/blog/templates/blog/nav.html b/gawa/blog/templates/blog/nav.html
index 8be33c3..d817b2f 100644
--- a/gawa/blog/templates/blog/nav.html
+++ b/gawa/blog/templates/blog/nav.html
@@ -43,38 +43,10 @@
                     </ul>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="btn btn-dark" id="toggleThemeButton">
-                        <i id="toggleThemeIcon" class="bi bi-sun"></i>
-                    </button>
-                    <script>
-                        'use strict'
-                        let i = document.getElementById("toggleThemeIcon").className = "bi bi-sun";
-                        const storedTheme =  localStorage.getItem('theme');
-                        if (storedTheme == null) {
-                            localStorage.setItem("theme", "light");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
-                            setTheme("light"); 
-                        }
-                        else if (storedTheme == "dark") {
-                            localStorage.setItem("theme", "dark");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun";
-                            setTheme("dark");
-                        }
-                        else if (storedTheme == "light") {
-                            localStorage.setItem("theme", "light");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
-                            setTheme("light");
-                        }
-                    </script>
+                    {% include 'dark_light_switch.html' %}
                 </li>
             </ul>
-            {% block MainSearchFormSpace %}
-            <form class="d-flex" role="search" action="{% url 'start:search' %}" method="GET">
-                {#{ MainSearchForm }#}
-                <input type="search" name="search" class="form-control me-2" aria-label="Search" placeholder="Suchen" required id="id_search">
-                <button class="btn btn-outline-dark bg-success" type="submit">Search</button>
-            </form>
-            {% endblock MainSearchFormSpace %}
+            {% include 'main_search_form.html' %}
         </div>
     </div>
     <script>
diff --git a/gawa/start/templates/base.html b/gawa/start/templates/base.html
index 7174746..b579ee7 100644
--- a/gawa/start/templates/base.html
+++ b/gawa/start/templates/base.html
@@ -23,7 +23,7 @@
         {% block nav %}
             {% include 'start/nav.html' %}
         {% endblock nav %}
-        <main class="m-5">
+        <main class="m-5" style="min-height: 80vh;">
             {% block main %}{% endblock main %}
         </main>
         <footer class="text-center text-lg-start bg-dark-subtle text-muted">
diff --git a/gawa/start/templates/dark_light_switch.html b/gawa/start/templates/dark_light_switch.html
new file mode 100644
index 0000000..18fb77f
--- /dev/null
+++ b/gawa/start/templates/dark_light_switch.html
@@ -0,0 +1,23 @@
+<button type="button" class="btn btn-dark" id="toggleThemeButton">
+    <i id="toggleThemeIcon" class="bi bi-sun"></i>
+</button>
+<script>
+    'use strict'
+    let i = document.getElementById("toggleThemeIcon").className = "bi bi-sun";
+    const storedTheme =  localStorage.getItem('theme');
+    if (storedTheme == null) {
+        localStorage.setItem("theme", "light");
+        document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
+        setTheme("light"); 
+    }
+    else if (storedTheme == "dark") {
+        localStorage.setItem("theme", "dark");
+        document.getElementById("toggleThemeIcon").className = "bi bi-sun";
+        setTheme("dark");
+    }
+    else if (storedTheme == "light") {
+        localStorage.setItem("theme", "light");
+        document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
+        setTheme("light");
+    }
+</script>
diff --git a/gawa/start/templates/main_search_form.html b/gawa/start/templates/main_search_form.html
new file mode 100644
index 0000000..671241c
--- /dev/null
+++ b/gawa/start/templates/main_search_form.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+<form class="d-flex" role="search" action="{% url 'start:search' %}" method="GET">
+    {#{ MainSearchForm }#}
+    <input type="search" name="search" class="form-control me-2" aria-label="Search" placeholder="Suchen" required id="id_search">
+    <button class="btn btn-outline-dark bg-success" type="submit">{% translate "Suchen" %}</button>
+</form>
diff --git a/gawa/start/templates/start/mainsearch_snippet.html b/gawa/start/templates/start/mainsearch_snippet.html
deleted file mode 100644
index e69de29..0000000
diff --git a/gawa/start/templates/start/nav.html b/gawa/start/templates/start/nav.html
index 338826c..32bd6b8 100644
--- a/gawa/start/templates/start/nav.html
+++ b/gawa/start/templates/start/nav.html
@@ -43,38 +43,31 @@
                     </ul>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="btn btn-dark" id="toggleThemeButton">
-                        <i id="toggleThemeIcon" class="bi bi-sun"></i>
-                    </button>
-                    <script>
-                        'use strict'
-                        let i = document.getElementById("toggleThemeIcon").className = "bi bi-sun";
-                        const storedTheme =  localStorage.getItem('theme');
-                        if (storedTheme == null) {
-                            localStorage.setItem("theme", "light");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
-                            setTheme("light"); 
-                        }
-                        else if (storedTheme == "dark") {
-                            localStorage.setItem("theme", "dark");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun";
-                            setTheme("dark");
-                        }
-                        else if (storedTheme == "light") {
-                            localStorage.setItem("theme", "light");
-                            document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
-                            setTheme("light");
-                        }
-                    </script>
+                    {% include 'dark_light_switch.html' %}
                 </li>
             </ul>
-            {% block MainSearchFormSpace %}
-            <form class="d-flex" role="search" action="{% url 'start:search' %}" method="GET">
-                {#{ MainSearchForm }#}
-                <input type="search" name="search" class="form-control me-2" aria-label="Search" placeholder="Suchen" required id="id_search">
-                <button class="btn btn-outline-dark bg-success" type="submit">Search</button>
-            </form>
-            {% endblock MainSearchFormSpace %}
+            {% include 'main_search_form.html' %}
         </div>
     </div>
+    <script>
+        'use strict'
+        document.getElementById("toggleThemeButton").onclick = function () { 
+            const storedTheme =  localStorage.getItem('theme');
+            if (storedTheme == null) {
+                localStorage.setItem("theme", "dark");
+                document.getElementById("toggleThemeIcon").className = "bi bi-sun";
+                setTheme("dark"); 
+            }
+            else if (storedTheme == "dark") {
+                localStorage.setItem("theme", "light");
+                document.getElementById("toggleThemeIcon").className = "bi bi-sun-fill";
+                setTheme("light");
+            }
+            else if (storedTheme == "light") {
+                localStorage.setItem("theme", "dark");
+                document.getElementById("toggleThemeIcon").className = "bi bi-sun";
+                setTheme("dark");
+            }
+        };
+    </script>
 </nav>
diff --git a/gawa/start/templates/start/search.html b/gawa/start/templates/start/search.html
index b296968..ef63f8d 100644
--- a/gawa/start/templates/start/search.html
+++ b/gawa/start/templates/start/search.html
@@ -1,4 +1,4 @@
-{% extends 'start/base.html' %}
+{% extends 'base.html' %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block languagecode %}{{ LANGUAGE_CODE }}{% endblock languagecode %}