From c4ece6384b87348ec00aa992c166de5c0d2ed5fb Mon Sep 17 00:00:00 2001
From: Alessandro Mauri <alemauri001@gmail.com>
Date: Wed, 28 Oct 2020 20:34:55 +0100
Subject: [PATCH] some mobile improvements

---
 src/_footer.html |  6 ++--
 src/styles.css   | 72 +++++++++++++++++++++++++-----------------------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/_footer.html b/src/_footer.html
index 05d9665..1f4cfa8 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,13 +1,11 @@
 <p>
 	Author: Alessandro Mauri 
 	<a href="mailto:alemauri001@gmail.com">alemauri001@gmail.com</a>
-</p>
-<p>
+<br>
 	The content of this site is licensed under the
 	<a href="https://creativecommons.org/publicdomain/zero/1.0/">
 	Creative Commons CC0 Public Domain Dedication</a>
-</p>
-<p>
+<br>
 	Special thanks to <a href="https://github.com/morhetz">Pavel Pertsev</a>
 	for creating <a href="https://github.com/morhetz/gruvbox">Gruvbox</a>
 </p>
diff --git a/src/styles.css b/src/styles.css
index 7e5fc31..a55d7ea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,9 +1,4 @@
 /* GLOBAL */
-* {
-	text-align: left;
-	font-family: sans-serif;
-}
-
 :root {
 	--bg: #282828;
 	--bg-code: #1d2021;
@@ -11,16 +6,20 @@
 	--fg: #ebdbb2;
 	--fg-code: #fbf1c7;
 	--fg-alt: #d5c4a1;
-	
 	--fg-link: #d79921;
 }
 
 body {
-	width: 50%;
-	margin: 0 auto;
 	background-color: var(--bg);
 	color: var(--fg);
-	padding: 10px;
+	margin: 0 auto;
+	width: 50%;
+}
+@media (max-width: 980px) {
+	body {
+		margin: 0 auto;
+		width: 100%;
+	}
 }
 
 html {
@@ -30,10 +29,10 @@ html {
 
 /* TABLES */
 table, th, td {
+	border-collapse: collapse;
 	margin-left: auto;
 	margin-right: auto;
 	text-align: left;
-	border-collapse: collapse;
 	width: 70%;
 }
 
@@ -56,10 +55,10 @@ tr:nth-child(odd) {
 pre {
 	background-color: var(--bg-code);
 	color: var(--fg-code);
-	padding: 4px;
-	font-size: 15;
+	font-size: medium;
 	font-family: monospace;
 	tab-size: 8;
+	padding: 4px;
 }
 /*
 :not(pre) > code {
@@ -70,12 +69,12 @@ pre {
 
 /* LISTS */
 li {
-	font-size: 14;
+	font-size: medium;
 }
 
 /* PARAGRAPHS */
 p {
-	font-size: 17;
+	font-size: medium;
 	padding-left: 20px;
 	padding-right: 20px;
 }
@@ -89,10 +88,13 @@ h2, h4, h6 {
 	background-color: var(--bg-alt);
 }
 
-h1 { font-size: 35; }
-h2 { font-size: 30; }
-h3 { font-size: 25; }
-h4, h5, h6 { font-size: 20; }
+h1 { font-size: xx-large; }
+h2 { font-size: x-large; }
+h3 { font-size: large; }
+h4, h5, h6 {
+	font-size: medium;
+	font-weight: bold;
+}
 
 /* LINKS */
 a {
@@ -105,50 +107,50 @@ footer {
 }
 
 footer p {
+	font-size: x-small;
+	margin: 0;
 	padding: 10px;
-	margin: 0px;
-	font-size: 12;
 }
 
 /* HEADER */
 #thumb {
-	position: absolute;
 	border-radius: 50%;
-	max-height: 80%;
-	max-width: 80%;
-	width: auto;
-	height: auto;
-	top: 0;
 	bottom: 0;
+	height: auto;
 	left: 0;
-	right: 0;
 	margin: auto;
+	max-width: 80%;
+	max-height: 80%;
+	right: 0;
+	top: 0;
+	position: absolute;
+	width: auto;
 }
 
 #thumb-container {
-	position: relative;
-	height: 80px;
-	width: 80px;
 	float: left;
+	height: 80px;
 	padding-right: 40px;
+	position: relative;
+	width: 80px;
 }
 
 #links {
 	float: left;
-	overflow: hidden;
+	overflow: auto;
 }
 
 #links a {
+	font-weight: bold;
 	letter-spacing: normal;
 	padding-right: 10px;
-	font-weight: bold;
 }
 
 .header {
+	border: 1px solid var(--fg);
+	font-size: medium;
 	height: 80px;
-	text-align: left;
 	line-height: 80px;
-	font-size: 17;
-	border: 1px solid var(--fg);
+	text-align: left;
 	overflow: hidden;
 }