blog index layout

This commit is contained in:
Christoph J. Scherr 2023-06-02 15:46:48 +02:00
parent 32191fa28d
commit 470707420b
Signed by: PlexSheep
GPG Key ID: 25B4ACF7D88186CC
9 changed files with 153 additions and 66 deletions

View File

@ -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>

View File

@ -13,7 +13,7 @@
<p>{% translate "Blog" %}</p> <p>{% translate "Blog" %}</p>
</div> </div>
<div class="row text-center"> <div class="row text-center">
<div class="col m-5"> <div class="col mx-3 my-5">
<h3>{% translate "Writeups" %}</h3> <h3>{% translate "Writeups" %}</h3>
<p> <p>
{% blocktranslate %} {% blocktranslate %}
@ -21,24 +21,29 @@
{% endblocktranslate %} {% endblocktranslate %}
</p> </p>
</div> </div>
<div class="col m-5"> <div class="col mx-3 my-5">
<h3>{% translate "Open Source" %}</h3> <h3>{% translate "Open Source" %}</h3>
{% blocktranslate %} {% blocktranslate %}
If something comes up, I may post Linux guides or my thoughts on current processes here. If something comes up, I may post Linux guides or my thoughts on current processes here.
{% endblocktranslate %} {% endblocktranslate %}
</div> </div>
<div class="col m-5"> <div class="col mx-3 my-5">
<h3>{% translate "Selfhosting" %}</h3> <h3>{% translate "Selfhosting" %}</h3>
{% blocktranslate %} {% blocktranslate %}
Selfhosting is something that I'm really fond of. There will be guides and thoughts about that too Selfhosting is something that I'm really fond of. There will be guides and thoughts about that too
{% endblocktranslate %} {% endblocktranslate %}
</div> </div>
<div class="col m-5"> <div class="col mx-3 my-5">
<h3>{% translate "Anything Really" %}</h3> <h3>{% translate "Anything Really" %}</h3>
{% blocktranslate %} {% blocktranslate %}
This is my personal Blog after all, I will put here whatever I want and you can't stop me. This is my personal Blog after all, I will put here whatever I want and you can't stop me.
{% endblocktranslate %} {% endblocktranslate %}
</div> </div>
</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> </div>
{% endblock main %} {% endblock main %}

View File

@ -43,38 +43,10 @@
</ul> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<button type="button" class="btn btn-dark" id="toggleThemeButton"> {% include 'dark_light_switch.html' %}
<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>
</li> </li>
</ul> </ul>
{% block MainSearchFormSpace %} {% include 'main_search_form.html' %}
<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 %}
</div> </div>
</div> </div>
<script> <script>

View File

@ -23,7 +23,7 @@
{% block nav %} {% block nav %}
{% include 'start/nav.html' %} {% include 'start/nav.html' %}
{% endblock nav %} {% endblock nav %}
<main class="m-5"> <main class="m-5" style="min-height: 80vh;">
{% block main %}{% endblock main %} {% block main %}{% endblock main %}
</main> </main>
<footer class="text-center text-lg-start bg-dark-subtle text-muted"> <footer class="text-center text-lg-start bg-dark-subtle text-muted">

View File

@ -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>

View File

@ -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>

View File

@ -43,38 +43,31 @@
</ul> </ul>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<button type="button" class="btn btn-dark" id="toggleThemeButton"> {% include 'dark_light_switch.html' %}
<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>
</li> </li>
</ul> </ul>
{% block MainSearchFormSpace %} {% include 'main_search_form.html' %}
<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 %}
</div> </div>
</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> </nav>

View File

@ -1,4 +1,4 @@
{% extends 'start/base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
{% block languagecode %}{{ LANGUAGE_CODE }}{% endblock languagecode %} {% block languagecode %}{{ LANGUAGE_CODE }}{% endblock languagecode %}