CSS and templates revamp

Had been thinking for a long while (prob about 2y now) that I wanted for
there to be no distractions while reading the content (i.e. no sidebar).
Didn't know how to handle navigation, though. Have made a lot of changes
and am actually pretty satisfied with the results.

Looks much cleaner now, and for those who know how to use browsers is
actually more comfortable, since you can just press the end key and you
are taken to the footer where all the navigation is. Of course, where it
is relevant there are some navigation links at the top of the page.
Phone users have it a little more uncomfortable, but phone usage overall
has and always will be uncomfy. Such is the nature of small touch
screens.

1 files changed, 49 insertions, 114 deletions

diff --git a/templates/base.html b/templates/base.html
index 9cad805..9156a8c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -28,125 +28,60 @@
 				{% block content %}
 				{% endblock %}
 			</div>
-			<div class="sidebar-container">
-				<div class="sticky-wrapper">
-					<h3>{{ trans(key="whats_here", lang=lang) }}</h3>
-					<ul class="navigation-list">
-						<li>
-							{% if lang == "ru" %}
-							<a href="/ru/">Главная</a>
-							{% elif lang == "es" %}
-							<a href="/es/">Inicio</a>
-							{% else %}
-							<a href="/">Home</a>
-							{% endif %}
-							<span class="extra-link">[
-								{% if lang != "en" %}
-								<a href="/">en</a>
-								{% endif %}
-								{% if lang != "ru" %}
-								<a href="/ru/">ru</a>
-								{% endif %}
-								{% if lang != "es" %}
-								<a href="/es/">es</a>
-								{% endif %}
-							]</span>
-						</li>
-						<li>
-							{% if lang == "ru" %}
-							<a href="/ru/weblog/">Веб-журнал</a>
-							{% elif lang == "es" %}
-							<a href="/es/weblog/">Weblog</a>
-							{% else %}
-							<a href="/weblog/">Weblog</a>
-							{% endif %}
-							<span class="extra-link">[
-								{% if lang != "en" %}
-								<a href="/weblog">en</a>
-								{% endif %}
-								{% if lang != "ru" %}
-								<a href="/ru/weblog">ru</a>
-								{% endif %}
-								{% if lang != "es" %}
-								<a href="/es/weblog">es</a>
-								{% endif %}
-							]</span>
-						<ul>
-							<li>
-								{% if lang == "ru" %}
-								<a href="/ru/weblog/archive/">Архив</a>
-								{% elif lang == "es" %}
-								<a href="/es/weblog/archive/">Archivo</a>
-								{% else %}
-								<a href="/weblog/archive/">Archive</a>
-								{% endif %}
-							</li>
-						</ul>
-						</li>
-						<li>
-							{% if lang == "ru" %}
-							<a href="/ru/food/">Книга рецептов</a>
-							{% elif lang == "es" %}
-							<a href="/es/food/">Recetario</a>
-							{% else %}
-							<a href="/food/">Recipe book</a>
-							{% endif %}
-							<span class="extra-link">[
-								{% if lang != "en" %}
-								<a href="/food">en</a>
-								{% endif %}
-								{% if lang != "ru" %}
-								<a href="/ru/food">ru</a>
-								{% endif %}
-								{% if lang != "es" %}
-								<a href="/es/food">es</a>
-								{% endif %}
-							]</span>
-						<ul>
-							<li>
-								{% if lang == "ru" %}
-								<a href="/ru/food/archive/">Архив</a>
-								{% elif lang == "es" %}
-								<a href="/es/food/archive/">Archivo</a>
-								{% else %}
-								<a href="/food/archive/">Archive</a>
-								{% endif %}
-							</li>
-						</ul>
-						</li>
-					</ul>
-					<h3>Email</h3>
-					<a href="mailto:yps@yaroslavps.com">yps@yaroslavps.com</a>
-					<h3>PGP</h3>
-					<a href="https://www.yaroslavps.com/files/yaroslavpub.gpg">
-						BD900E5D624046DC
-					</a>
-					{% if lang == "ru" %}
-					<p>
-						Это русскоязычная версия сайта. Если вам интересно
-						прочитать больше, взгляньте на 
-						<a href="/">англоязычную версию сайта</a>.
-					</p>
-					{% elif lang == "es" %}
-					<p>
-						Ésta es la versión en español de mi sitio. Si les
-						interesa leer más, denle un vistazo al sitio 
-						<a href="/">en inglés</a>.
-					</p>
-					{% endif %}
-				</div>
-			</div>
 			{% endblock %}
 			<div class="foot-container">
-				<p>
-				The text content in this site is
-				<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>,
-				the photos are under
-				<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
-				</p>
+				<ul class="nav-container" id="foot-nav">
+					<li>
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/">
+							{{ trans(key="homepage", lang=lang) }}
+						</a>
+					</li>
+					<li>
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/weblog/">
+							{{ trans(key="weblog", lang=lang) }}
+						</a>
+						(<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/weblog/archive">{{ trans(key="archive", lang=lang) }}</a>)
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/weblog/feed.xml"><span class="icon"><img alt="rss-icon" src="/svg/icons/rss.svg"/></span></a>
+					</li>
+					<li>
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/food/">
+							{{ trans(key="recipes", lang=lang) }}
+						</a>
+						(<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/food/archive">{{ trans(key="archive", lang=lang) }}</a>)
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/food/feed.xml"><span class="icon"><img alt="rss-icon" src="/svg/icons/rss.svg"/></span></a>
+					</li>
+					<li>
+						<a href="/photos/">
+							{{ trans(key="photos", lang=lang) }}
+						</a>
+					</li>
+				</ul>
+				<ul class="nav-container">
+					<li>
+						<a href="{% if lang != "en" %}/{{ lang }}{% endif %}/donate" title="{{ trans(key="leave_tip", lang=lang) }}"><span class="icon"><img alt="btc-icon" src="/svg/icons/btc.svg"/></span> {{ trans(key="leave_tip", lang=lang) }}</a>
+					</li>
+					<li>
+						<a href="https://git.yaroslavps.com/" title="Git server"><span class="icon"><img alt="git-icon" src="/svg/icons/git.svg"/></span> Git server</a>
+					</li>
+					<li>
+						<a href="https://github.com/Yaroslav-95" title="GitHub"><span class="icon"><img alt="github-icon" src="/svg/icons/github.svg"/></span> Github</a>
+					</li>
+					<li>
+						<a href="https://sr.ht/~yaroslav/" title="sourcehut"><span class="icon"><img alt="srht-icon" src="/svg/icons/srht.svg"/></span> sourcehut</a>
+					</li>
+				</ul>
+				<!-- <p> -->
+				<!-- The text content in this site is -->
+				<!-- <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>, -->
+				<!-- the photos are under -->
+				<!-- <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>. -->
+				<!-- </p> -->
 				<p>
 				© 2018—2022 Yaroslav de la Peña Smirnov.
 				</p>
+				<!-- <br> -->
+				<!-- <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"></a> -->
+				<!-- <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"></a> -->
 			</div>
 		</div>
 	</body>