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 %} {% block nav %}
{% include 'nav.html' %} {% include 'nav.html' %}
{% endblock nav %} {% endblock nav %}
<main class="m-5" style="min-height: 80vh;"> <main class="m-5" style="min-height: 80vh;" id="main">
{% block main %} {% block main %}
{% endblock main %} {% endblock main %}
</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"> <footer class="text-center text-lg-start bg-dark-subtle text-muted">
<div class="container overflow-hidden text-center"> <div class="container overflow-hidden text-center">
<div class="row gy-5"> <div class="row gy-5">

View File

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

View File

@ -8,14 +8,14 @@
{% translate "cscherr.de" %} - {% translate "startpage" %} {% translate "cscherr.de" %} - {% translate "startpage" %}
{% endblock title %} {% endblock title %}
{% block main %} {% block main %}
<div class="container-xl"> <div class="container">
<div class="jumbotron text-center"> <div class="jumbotron text-center">
{# TODO: add a fancy graphic here #} {# TODO: add a fancy graphic here #}
<h1>{% translate "cscherr.de" %}</h1> <h1 class="display-1">{% translate "cscherr.de" %}</h1>
<p>{% trans "Personal Website" %}</p> <p>{% trans "Personal Website" %}</p>
</div> </div>
<div class="container overflow-hidden text-center mt-5"> <div class="container-fluid overflow-hidden text-center mt-5 mx-0">
<div class="row gx-1 row-cols-2"> <div class="row gx-5" id="desc-rows">
<div class="col"> <div class="col">
<div class="container overflow-hidden text-center mt-5"> <div class="container overflow-hidden text-center mt-5">
<div class="row gy-3 row-cols-1"> <div class="row gy-3 row-cols-1">
@ -28,7 +28,7 @@
<div class="col"> <div class="col">
{% blocktranslate %} {% blocktranslate %}
I am <em>Christoph J. Scherr</em>, studying Cybersecurity at <a href="https://mannheim.dhbw.de"> I am <em>Christoph J. Scherr</em>, studying Cybersecurity at <a href="https://mannheim.dhbw.de">
<abbr title="Duale Hochschule Baden-Württemberg">DHBW</abbr>Mannheim, Germany</a> and passionate about computers. <abbr title="Duale Hochschule Baden-Württemberg">DHBW</abbr> Mannheim, Germany</a> and passionate about computers.
{% endblocktranslate %} {% endblocktranslate %}
</div> </div>
<div class="col"> <div class="col">
@ -89,7 +89,7 @@
{% blocktranslate %} {% blocktranslate %}
Music is amazing. I don't find a lot of time lately, but sometimes I feel like making music. Usually, 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: 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">LoFi</li>
<li class="list-group-item">JPop, specifically <a href="https://www.youtube.com/@Ado1024">Ado</a></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> <li class="list-group-item">Eurobeat, specifically <a href="https://www.youtube.com/@TurboA">Turbo</a></li>
@ -120,6 +120,12 @@
</div> </div>
</div> </div>
</div> </div>
<script>
if (screen.width < 800) {
row = document.getElementById("desc-rows")
row.classList.add("row-cols-1");
};
</script>
</div> </div>
</div> </div>
{% endblock main %} {% endblock main %}