blog index layout
This commit is contained in:
parent
32191fa28d
commit
470707420b
|
@ -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>
|
|
@ -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 %}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue