startpage styling

This commit is contained in:
Christoph J. Scherr 2023-10-08 21:23:14 +02:00
parent 57174c88a1
commit e0b6a2885b
3 changed files with 20 additions and 8 deletions

View File

@ -38,10 +38,16 @@
{% block nav %}
{% include 'nav.html' %}
{% endblock nav %}
<main class="m-5" style="min-height: 80vh;">
<main class="m-5" style="min-height: 80vh;" id="main">
{% block main %}
{% endblock main %}
</main>
<script>
if (screen.width < 480) {
row = document.getElementById("main")
row.classList.remove("m-5");
};
</script>
<footer class="text-center text-lg-start bg-dark-subtle text-muted">
<div class="container overflow-hidden text-center">
<div class="row gy-5">

View File

@ -107,7 +107,7 @@
<a class="dropdown-item" href="http://localhost:8080" target="_blank">DB</a>
</li>
<li>
<a class="dropdown-item" href="/translation" target="_blank">Translation</a>
<a class="dropdown-item" href="/translation/" target="_blank">Translation</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'admin:logout' %}" target="_blank">{% trans "Logout" %}</a>

View File

@ -8,14 +8,14 @@
{% translate "cscherr.de" %} - {% translate "startpage" %}
{% endblock title %}
{% block main %}
<div class="container-xl">
<div class="container">
<div class="jumbotron text-center">
{# TODO: add a fancy graphic here #}
<h1>{% translate "cscherr.de" %}</h1>
<h1 class="display-1">{% translate "cscherr.de" %}</h1>
<p>{% trans "Personal Website" %}</p>
</div>
<div class="container overflow-hidden text-center mt-5">
<div class="row gx-1 row-cols-2">
<div class="container-fluid overflow-hidden text-center mt-5 mx-0">
<div class="row gx-5" id="desc-rows">
<div class="col">
<div class="container overflow-hidden text-center mt-5">
<div class="row gy-3 row-cols-1">
@ -89,7 +89,7 @@
{% blocktranslate %}
Music is amazing. I don't find a lot of time lately, but sometimes I feel like making music. Usually,
I prefer calm music. Some types of music I like are:
<ul class="list-group pt-3 list-group-flush w-75 mx-auto">
<ul class="list-group pt-3 list-group-flush w-90 mx-auto">
<li class="list-group-item">LoFi</li>
<li class="list-group-item">JPop, specifically <a href="https://www.youtube.com/@Ado1024">Ado</a></li>
<li class="list-group-item">Eurobeat, specifically <a href="https://www.youtube.com/@TurboA">Turbo</a></li>
@ -120,6 +120,12 @@
</div>
</div>
</div>
<script>
if (screen.width < 800) {
row = document.getElementById("desc-rows")
row.classList.add("row-cols-1");
};
</script>
</div>
</div>
{% endblock main %}