Add footer
Lonami Exo totufals@hotmail.com
Sun, 07 Feb 2021 00:06:58 +0100
3 files changed,
58 insertions(+),
13 deletions(-)
A
static/img/mail.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <rect fill="#c0f" width="24" height="24" /> + <g fill="#fff"> + <path d="M4,17 v-8 l8,4 l8,-4 v8 z" /> + <path d="M4,7 h16 l-8,4 z" /> + </g> +</svg>
M
static/style.css
→
static/style.css
@@ -1,10 +1,14 @@
/* main */ body { - background-color: #FFFFF0; + background-color: #000; margin: 0; } -nav, main { +article { + background-color: #fffff0; +} + +nav, main, footer div { max-width: 720px; margin: 0 auto; }@@ -18,7 +22,7 @@ }
/* navigation */ nav.sections { - margin-top: 40px; + padding-top: 20px; display: block; }@@ -45,6 +49,28 @@
nav.sections a.selected, nav.sections a:hover { color: #000000; border-bottom: solid 2px #444444; +} + +/* footer */ +footer { + margin-top: 32px; + min-height: 64px; + background: linear-gradient(#fffff0, #ccccc0); +} + +footer p { + font-style: italic; + color: #666; + font-family: serif; +} + +footer img { + display: inline-block; + vertical-align: middle; +} + +.abyss { + text-align: center; } /* headers */
M
templates/base.html
→
templates/base.html
@@ -24,15 +24,27 @@ <link rel="stylesheet" type="text/css" href="/style.css">
{% endblock %} </head> <body> - <nav class="sections"> - <ul> - <li><a href="/" class="{% if current_path == '/' %}selected{% endif %}">lonami's site</a></li> - <li><a href="/blog" class="{% if current_path is starting_with('/blog') %}selected{% endif %}">blog</a></li> - <li><a href="/golb" class="{% if current_path is starting_with('/golb') %}selected{% endif %}">golb</a></li> - </ul> - </nav> - <main> - {% block content %}{% endblock %} - </main> + <article> + <nav class="sections"> + <ul> + <li><a href="/" class="{% if current_path == '/' %}selected{% endif %}">lonami's site</a></li> + <li><a href="/blog" class="{% if current_path is starting_with('/blog') %}selected{% endif %}">blog</a></li> + <li><a href="/golb" class="{% if current_path is starting_with('/golb') %}selected{% endif %}">golb</a></li> + </ul> + </nav> + <main> + {% block content %}{% endblock %} + </main> + <footer> + <div> + <p> + Share your thoughts, or simply come hang with me + <a href="https://t.me/LonamiWebs"><img src="img/telegram.svg" alt="Telegram" /></a> + <a href="mailto:totufals@hotmail.com"><img src="img/mail.svg" alt="Mail" /></a> + </p> + </div> + </footer> + </article> + <p class="abyss">Glaze into the abyss… Oh hi there!</p> </body> </html>