More mobile friendliness

1 files changed, 116 insertions, 16 deletions

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 {