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,16 +1,27 @@
-div.home {
+div.homeContainer {
-	margin-top: 35%;
+	width: 100%;
-	margin-bottom: 15%;
+	height: 100%;
-	text-align: center;
+	display: flex;
 
-	h1 {
+	div.home {
-		margin: 0;
+		margin: 35% auto;	
-		font-size: 4rem;
+		text-align: center;
-		color: var(--fgColor);
-		background-color: var(--bgColor);
 
-		&::before {
+		h1 {
-			content: none;
+			margin: 0;
+			font-size: 4rem;
+			color: var(--fgColor);
+			background-color: var(--bgColor);
+
+			&::before {
+				content: none;
+			}
+		}
+	}
+
+	@media (max-width: 650px) {
+		div.home {
+			margin: auto auto;
 		}
 	}
 }
@@ -19,3 +30,4 @@ a.socialIcon {
 	padding: .2em .3em 0 .3em;
 	font-size: 32px;
 }
+

sass/_logo.scss

@@ -1,44 +1,44 @@
 .logo {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  text-decoration: none;
+	text-decoration: none;
-  font-weight: bold;
+	font-weight: bold;
-  font-display: auto;
+	font-display: auto;
-  font-family: monospace, monospace;
+	font-family: monospace, monospace;
 
-  img {
+	img {
-    height: 44px;
+		height: 44px;
-  }
+	}
 
-  &__mark {
+	&__mark {
-    margin-right: 5px;
+		margin-right: 5px;
-  }
+	}
 
-  &__text {
+	&__text {
-    white-space: nowrap;
+		white-space: nowrap;
-  }
+	}
 
-  &__cursor {
+	&__cursor {
-    display: inline-block;
+		display: inline-block;
-    width: 10px;
+		width: 10px;
-    height: 1.5rem;
+		height: 1.5rem;
-    background: var(--fgColor);
+		background: var(--fgColor);
-    margin-left: 5px;
+		margin-left: 5px;
-    border-radius: 1px;
+		border-radius: 1px;
-    animation: cursor 1s infinite;
+		animation: cursor 1s infinite;
-  }
+	}
 
-  @media (prefers-reduced-motion: reduce) {
+	@media (prefers-reduced-motion: reduce) {
-    &__cursor {
+		&__cursor {
-        animation: none;
+				animation: none;
-    }
+		}
-  }
+	}
 
 }
 
 @keyframes cursor {
-  0% { opacity: 0; }
+	0% { opacity: 0; }
-  50% { opacity: 1; }
+	50% { opacity: 1; }
-  100% { opacity: 0; }
+	100% { opacity: 0; }
 }
 

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 {
@@ -244,6 +216,14 @@ div.toc {
 	body {
 		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">
+  <div class="themeButton">
-    {% 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;
     {% 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 %}