Make footer sticky

This commit is contained in:
jultty 2024-11-17 14:56:22 -03:00
commit b5764ba7d9
2 changed files with 54 additions and 38 deletions

View file

@ -5,6 +5,11 @@
html { html {
font-family: 'Mononoki', monospace; font-family: 'Mononoki', monospace;
height: 100%;
}
body {
height: 100%;
} }
#theme { #theme {
@ -12,7 +17,10 @@ html {
color: #222; color: #222;
} }
* { margin: 0px; } * {
margin: 0px;
box-sizing: inherit;
}
.header-art { .header-art {
display: grid; display: grid;
@ -90,6 +98,12 @@ ul {
list-style: none; list-style: none;
} }
#container {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.post-date, .link-date { .post-date, .link-date {
color: #777; color: #777;
font-size: 14px; font-size: 14px;

View file

@ -59,48 +59,50 @@
</head> </head>
<body> <body>
{%- if lang == "pt" %} <div id="container">
<a id="skip-to-main" href="#main">Saltar para o conteúdo</a> {%- if lang == "pt" %}
{%- else %} <a id="skip-to-main" href="#main">Saltar para o conteúdo</a>
<a id="skip-to-main" href="#main">Skip to content</a> {%- else %}
{% endif -%} <a id="skip-to-main" href="#main">Skip to content</a>
{% endif -%}
{% block header %}{% endblock %} {% block header %}{% endblock %}
<div id="user-controls" class="{% if current_path and (current_path == "/" or current_path == "pt/" ) %}index-user-controls{% else %}subpage-user-controls{% endif %}"> <div id="user-controls" class="{% if current_path and (current_path == "/" or current_path == "pt/" ) %}index-user-controls{% else %}subpage-user-controls{% endif %}">
<nav id="nav-menu"> <nav id="nav-menu">
<ul> <ul>
{%- if lang == "pt" %} {%- if lang == "pt" %}
<li><a id="home" href="{{ get_url(path="/pt") }}">Início</a></li> <li><a id="home" href="{{ get_url(path="/pt") }}">Início</a></li>
{%- else %} {%- else %}
<li><a id="home" href="{{ get_url(path="/") }}">Home</a></li> <li><a id="home" href="{{ get_url(path="/") }}">Home</a></li>
{%- endif %}
<li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li>
<li><a href="{{ get_url(path="notes", lang=lang) }}">{% if lang == "pt" %}Notas{% else %}Notes{% endif %}</a></li>
<li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
<li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
<li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
</ul>
</nav>
{% if current_path and translation_count > 1 %}
{%- set slashless_current_path = current_path | regex_replace(pattern="^\/", rep="") %}
{%- set english_path = current_path | regex_replace(pattern="pt\/", rep="") %}
<div id="language-selector">
<figure id="language-icon">
<img src="{{ get_url(path="assets/img/icons/language.svg") }}"
alt="{% if lang == "pt" %}Ícone de idioma{% else %}Language icon{% endif %}"/>
</figure>
{%- if lang == "pt" %}<a href="{{ get_url(path=english_path) }}">EN</a>{% else %}<a href="{{ get_url(path=slashless_current_path, lang="pt") }}">PT</a>
{%- endif %} {%- endif %}
<li><a href="{{ get_url(path="posts", lang=lang) }}">Posts</a></li> </div>
<li><a href="{{ get_url(path="notes", lang=lang) }}">{% if lang == "pt" %}Notas{% else %}Notes{% endif %}</a></li>
<li><a href="{{ get_url(path="links", lang=lang) }}">Links</a></li>
<li><a href="{{ get_url(path="feeds", lang=lang) }}">RSS</a></li>
<li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
</ul>
</nav>
{% if current_path and translation_count > 1 %}
{%- set slashless_current_path = current_path | regex_replace(pattern="^\/", rep="") %}
{%- set english_path = current_path | regex_replace(pattern="pt\/", rep="") %}
<div id="language-selector">
<figure id="language-icon">
<img src="{{ get_url(path="assets/img/icons/language.svg") }}"
alt="{% if lang == "pt" %}Ícone de idioma{% else %}Language icon{% endif %}"/>
</figure>
{%- if lang == "pt" %}<a href="{{ get_url(path=english_path) }}">EN</a>{% else %}<a href="{{ get_url(path=slashless_current_path, lang="pt") }}">PT</a>
{%- endif %} {%- endif %}
</div> </div>
{%- endif %}
<main id="main">
{%- block content %}{% endblock %}
</main>
<footer>
{%- block footer %}{% endblock -%}
</footer>
</div> </div>
<main id="main">
{%- block content %}{% endblock %}
</main>
<footer>
{%- block footer %}{% endblock -%}
</footer>
</body> </body>
</html> </html>