feat: responsive website

sass/_code.scss

@@ -5,7 +5,7 @@ pre {
 	padding: 1rem;
 	font-style: monospace;
 	text-align: left;
-	white-space: pre-wrap;
+	overflow-x: scroll;
 }
 
 p code,

sass/_header.scss

@@ -0,0 +1,50 @@
+.navBar {
+	padding: 1rem 0 0 0;
+	gap: .4rem;
+	flex-wrap: wrap;
+
+	.navBarRight {
+		float: right;
+
+		a {
+			padding: 0;
+		}
+	}
+
+	div.themeButton {
+			float: right;
+			padding: 0 0 0 1em;
+
+			button {
+				cursor: pointer;
+				border: none;
+				background: transparent;
+			}
+	}
+}
+
+.dark .themeButton.dark,
+.themeButton.light {
+	display: none
+}
+
+.dark .themeButton.light {
+	display: block
+}
+
+@media (max-width: 650px) {
+	.navBar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+
+		.navBarRight {
+			float: center;
+		}
+
+		.themeButton {
+			float: center;
+		}
+	}
+}

sass/_home.scss

@@ -1,6 +1,10 @@
+div.homeContainer {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
 	div.home {
-	margin-top: 35%;
-	margin-bottom: 15%;
+		margin: 35% auto;	
 		text-align: center;
 
 		h1 {
@@ -15,7 +19,15 @@ div.home {
 		}
 	}
 
+	@media (max-width: 650px) {
+		div.home {
+			margin: auto auto;
+		}
+	}
+}
+
 a.socialIcon {
 	padding: .2em .3em 0 .3em;
 	font-size: 32px;
 }
+

sass/_main.scss

@@ -54,10 +54,6 @@ a {
 		background-color: var(--linkColor);
 		color: var(--bgColor);
 	}
-
-	span.contentDate {
-		color: var(--dateLinkColor);
-	}
 }
 
 ul {
@@ -131,6 +127,7 @@ footer {
 	min-height: 100vh;
 	display: grid;
 	grid-template-rows: auto 1fr auto;
+	grid-template-columns: minmax(180px, 1fr);
 	gap: 2rem;
 }
 
@@ -149,36 +146,6 @@ footer {
 	}
 }
 
-.navBar {
-	padding: 1rem 0 0 0;
-	gap: .4rem;
-	flex-wrap: wrap;
-
-	.navBarRight {
-		float: right;
-
-		a {
-			padding: 0;
-		}
-
-		.themeButton {
-			float: right;
-			cursor: pointer;
-			border: none;
-			background: transparent;
-		}
-	}
-}
-
-.dark .themeButton.dark,
-.themeButton.light {
-	display: none
-}
-
-.dark .themeButton.light {
-	display: block
-}
-
 .tagsData {
 	display: flex;
 	flex-direction: column;
@@ -190,6 +157,11 @@ footer {
 
 .titleList li {
 	margin-bottom: .75rem;
+	text-align: left;
+	
+	span.contentDate {
+		color: var(--dateLinkColor);
+	}
 }
 
 .footnote-definition {
@@ -245,6 +217,14 @@ div.toc {
 		max-width: 100%;
 	}
 	
+	footer {
+		text-align: center;
+	}
+
+	 a span.contentDate {
+		display: none;
+	}
+
 	.wrapper {
 		margin: 1rem;
 	}

sass/style.scss

@@ -1,4 +1,5 @@
 @import 'main';
+@import 'header';
 @import 'home';
 @import 'code';
 @import 'table';

templates/header.html

@@ -7,11 +7,7 @@
 {% if config.extra.header_nav %}
 <nav class="navBar">
   {% include "logo.html" %}
-  <div class="navBarRight">
-    {% for nav_item in config.extra.header_nav %}
-      <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">{% set language_key = 'name_' ~ current_lang %}{{ nav_item[language_key] }}</a>
-    {% endfor %}
-    &nbsp;
+  <div class="themeButton">
     {% if not config.extra.default_theme %}
       <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
       <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
@@ -22,5 +18,11 @@
       <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
       <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
     {% endif %}
+  </div>
+  <div class="navBarRight">
+    {% for nav_item in config.extra.header_nav %}
+      <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">{% set language_key = 'name_' ~ current_lang %}{{ nav_item[language_key] }}</a>
+    {% endfor %}
+  </div>
 </nav>
 {% endif %}

templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="home">
+<div class="homeContainer"><div class="home">
     {% if config.extra.home_title %}
     <h1>{{ config.extra.home_title }}</h1>
     {% else %}
@@ -13,7 +13,7 @@
         <p>{{ config.description }}<span id="subtitleRand"></span></p>
     {% endif %}
     {% include "svg.html" %}
-</div>
+</div></div>
 {% if config.extra.home_subtitle_suffixes %}
 
 <script>

templates/section.html

@@ -20,6 +20,6 @@
 </ul>
 
 {% if paginator %}
-<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
+<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> &nbsp; <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp; {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp; {% if paginator.next %}<a href="{{ paginator.next }}"></a> &nbsp; <a href="{{ paginator.last }}"></a>{% endif %}</div>
 {% endif %}
 {% endblock content %}