More mobile friendliness

7 files changed, 149 insertions, 22 deletions

diff --git a/src/de/euro/coins.template.html b/src/de/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/de/euro/coins.template.html
+++ b/src/de/euro/coins.template.html
@@ -89,7 +89,17 @@
 							<tr>
 								<th colspan=8>Standard Issues</th>
 							</tr>
-							<tr>
+							<tr class=mobile>
+								<th>1c</th>
+								<th>2c</th>
+								<th>5c</th>
+								<th>10c</th>
+								<th>20c</th>
+								<th>50c</th>
+								<th>€1</th>
+								<th>€2</th>
+							</tr>
+							<tr class=not-mobile>
 								<th>1 Cent</th>
 								<th>2 Cent</th>
 								<th>5 Cent</th>
diff --git a/src/de/nav-bar.html b/src/de/nav-bar.html
index a427cca..1636e0e 100644
--- a/src/de/nav-bar.html
+++ b/src/de/nav-bar.html
@@ -1,5 +1,4 @@
 <ul>
-	<!--<li><div class=selected>Home</div></li>-->
 	<li><a href=/XX>Home</a></li>
 	<li><a href=/XX/changelog>Changelog</a></li>
 	<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/en/euro/coins.template.html b/src/en/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/en/euro/coins.template.html
+++ b/src/en/euro/coins.template.html
@@ -89,7 +89,17 @@
 							<tr>
 								<th colspan=8>Standard Issues</th>
 							</tr>
-							<tr>
+							<tr class=mobile>
+								<th>1c</th>
+								<th>2c</th>
+								<th>5c</th>
+								<th>10c</th>
+								<th>20c</th>
+								<th>50c</th>
+								<th>€1</th>
+								<th>€2</th>
+							</tr>
+							<tr class=not-mobile>
 								<th>1 Cent</th>
 								<th>2 Cent</th>
 								<th>5 Cent</th>
diff --git a/src/en/nav-bar.html b/src/en/nav-bar.html
index 21e15ad..726f309 100644
--- a/src/en/nav-bar.html
+++ b/src/en/nav-bar.html
@@ -1,5 +1,4 @@
 <ul>
-	<!--<li><div class=selected>Home</div></li>-->
 	<li><a href=/XX>Home</a></li>
 	<li><a href=/XX/changelog>Changelog</a></li>
 	<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/pt/euro/coins.template.html b/src/pt/euro/coins.template.html
index 1f57a55..f4a4210 100644
--- a/src/pt/euro/coins.template.html
+++ b/src/pt/euro/coins.template.html
@@ -89,7 +89,17 @@
 							<tr>
 								<th colspan=8>Standard Issues</th>
 							</tr>
-							<tr>
+							<tr class=mobile>
+								<th>1c</th>
+								<th>2c</th>
+								<th>5c</th>
+								<th>10c</th>
+								<th>20c</th>
+								<th>50c</th>
+								<th>€1</th>
+								<th>€2</th>
+							</tr>
+							<tr class=not-mobile>
 								<th>1 Cent</th>
 								<th>2 Cent</th>
 								<th>5 Cent</th>
diff --git a/src/pt/nav-bar.html b/src/pt/nav-bar.html
index 1f8cbea..e17627a 100644
--- a/src/pt/nav-bar.html
+++ b/src/pt/nav-bar.html
@@ -1,5 +1,4 @@
 <ul>
-	<!--<li><div class=selected>Home</div></li>-->
 	<li><a href=/XX>Home</a></li>
 	<li><a href=/XX/changelog>Changelog</a></li>
 	<li><a href=/XX/euro>Euro-Coins & -Banknotes</a></li>
diff --git a/src/style.css b/src/style.css
index f9581f2..979ea04 100644
--- a/src/style.css
+++ b/src/style.css
@@ -40,7 +40,49 @@
 
 	--background-image-opacity: 30%;
 
-	--slant-delta: 120px;
+	--slant-delta: 40px;
+}
+
+@media only screen and (min-width: 800px) {
+	:root {
+		--slant-delta: 60px;
+	}
+}
+
+@media only screen and (min-width: 1000px) {
+	:root {
+		--slant-delta: 80px;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	:root {
+		--slant-delta: 100px;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	:root {
+		--slant-delta: 120px;
+	}
+}
+
+.not-mobile {
+	display: none;
+}
+
+@media only screen and (min-width: 600px) {
+	.mobile {
+		display: none;
+	}
+
+	.not-mobile {
+		display: unset;
+	}
+
+	tr.not-mobile {
+		display: table-row;
+	}
 }
 
 * {
@@ -74,16 +116,19 @@ nav a:link, nav a:visited {
 }
 
 nav ul {
-	background-color: var(--secondary-color);
-	border-bottom: 1px solid white;
 	display: flex;
-	font-size: 1.2rem;
+	font-size: 1rem;
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	z-index: 69;
 }
 
+nav > ul {
+	white-space: nowrap;
+	overflow-x: scroll;
+}
+
 @media only screen and (min-width: 1000px) {
 	nav ul {
 		font-size: 1.2rem;
@@ -131,6 +176,11 @@ nav li a, #lang-selected {
 
 nav li {
 	position: relative;
+	background-color: var(--secondary-color);
+}
+
+nav > ul > li, nav > ul > li li:last-child {
+	border-bottom: 1px solid white;
 }
 
 nav li a, nav li div, nav li label {
@@ -161,7 +211,7 @@ nav ul > * {
 }
 
 header h1 {
-	font-size: 2rem;
+	font-size: 1.5rem;
 	margin-bottom: 0;
 }
 
@@ -185,19 +235,31 @@ header h1 {
 
 header h6 {
 	font-style: italic;
-	font-size: 1.1rem;
+	font-size: 1rem;
 	text-align: right;
 	opacity: var(--font-secondary-opacity);
 	margin-top: 0;
 }
 
+@media only screen and (min-width: 1400px) {
+	header h6 {
+		font-size: 1.1rem;
+	}
+}
+
 p {
 	text-align: justify;
-	font-size: 1.3rem;
-	line-height: 2.5rem;
+	font-size: 1rem;
+	line-height: 2rem;
 	width: 95%;
 }
 
+@media only screen and (min-width: 800px) {
+	p {
+		font-size: 1.3rem;
+	}
+}
+
 @media only screen and (min-width: 1000px) {
 	p {
 		font-size: 1.4rem;
@@ -286,7 +348,13 @@ main section {
 }
 
 .cl-section h2 {
-	font-size: 2rem;
+	font-size: 1.5rem;
+}
+
+@media only screen and (min-width: 1000px) {
+	.cl-section h2 {
+		font-size: 2rem;
+	}
 }
 
 .c-section > * {
@@ -303,10 +371,6 @@ main section {
 	background-color: var(--secondary-hover-color);
 }
 
-.c-section:hover h2 {
-	font-size: 2.2rem;
-}
-
 .c-section:hover img {
 	height: 500px;
 }
@@ -318,15 +382,25 @@ main section {
 }
 
 .c-section h2 {
-	font-size: 2rem;
+	font-size: 1.5rem;
 	width: 95%;
 	text-align: left;
 }
 
+.c-section:hover h2 {
+	font-size: 1.7rem;
+}
+
+
 @media only screen and (min-width: 1000px) {
 	.c-section h2 {
+		font-size: 2rem;
 		width: 75%;
 	}
+
+	.c-section:hover h2 {
+		font-size: 2.2rem;
+	}
 }
 
 @media only screen and (min-width: 1400px) {
@@ -375,6 +449,10 @@ main section {
 
 #table-key tr td:last-child {
 	padding: 0 25px;
+	font-size: 1rem;
+}
+
+@media only screen and (min-width: 1000px) {
 	font-size: 1.2rem;
 }
 
@@ -417,11 +495,15 @@ main section {
 }
 
 .country-table td {
-	font-size: 1.25rem;
+	font-size: 1rem;
 	text-align: center;
 	width: 25%;
 }
 
+@media only screen and (min-width: 1000px) {
+	font-size: 1.25rem;
+}
+
 .country-table td:hover {
 	background-color: var(--tertiary-hover-color);
 }
@@ -535,7 +617,25 @@ main section {
 }
 
 .coin-table thead tr:first-child th {
-	font-size: 2rem;
+	font-size: 1.2rem;
+}
+
+@media only screen and (min-width: 1000px) {
+	.coin-table thead tr:first-child th {
+		font-size: 1.5rem;
+	}
+}
+
+@media only screen and (min-width: 1400px) {
+	.coin-table thead tr:first-child th {
+		font-size: 1.8rem;
+	}
+}
+
+@media only screen and (min-width: 1800px) {
+	.coin-table thead tr:first-child th {
+		font-size: 2rem;
+	}
 }
 
 .coin-table th {