Make the website minimalistic

1 files changed, 27 insertions, 135 deletions

diff --git a/css/responsivity.css b/css/responsivity.css
index 58fc1f3..75d4ec7 100644
--- a/css/responsivity.css
+++ b/css/responsivity.css
@@ -1,8 +1,4 @@
-@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){
-	div.inner_page {
-		width: 95%;
-	}
-
+@media (max-width: 1199px) and (min-width: 401px) {
 	body {
 		font-size: 32pt;
 	}
@@ -46,148 +42,44 @@
 		padding-right: 10px;
 		white-space: nowrap;
 	}
-}
 
-/* iframe */
-@media (width: 400px) and (height: 250px) {
-	div.inner_page {
-		width: 95%;
+	iframe {
+		width: 100%;
+		aspect-ratio: 1/1!important;
 	}
+}
 
+@media only screen and (orientation: landscape)
+and (min-width: 992px)
+and (max-width: 1199px) {
 	body {
-		font-size: 11pt;
-	}
-
-	div.content_section_text p::first-letter,div.content::first-letter {
-		font-size: 15pt;
-	}
-
-	/*
-	 * Force table to not be like tables anymore
-	 */
-	table, thead, tbody, th, td, tr {
-		display: block;
-	}
-
-	/*
-	 * Hide table headers (but not display: none;, for accessibility)
-	 */
-	thead tr {
-		position: absolute;
-		top: -9999%;
-		left: -9999%;
-	}
-
-	td {
-		/* Behave  like a "row" */
-		border: none;
-		position: relative;
-		padding-left: 50%;
-	}
-
-	td::before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
+		font-size: 14pt;
 	}
 }
-
-@media (max-width: 400px) and (orientation: portrait){
-	div.inner_page {
-		width: 100%;
-		margin: 0;
-	}
-
+@media only screen and (orientation: landscape)
+and (min-width: 768px)
+and (max-width: 991px) {
 	body {
-		font-size: 24pt;
+		font-size: 14pt;
 	}
 }
 @media only screen and (orientation: landscape)
-	  and (min-width: 992px)
-	  and (max-width: 1199px) {
-	    body { font-size: 14pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-width: 768px)
-	  and (max-width: 991px) {
-            body { font-size: 14pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-width: 480px)
-	  and (max-width: 767px) {
-            body { font-size: 11pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (max-width: 479px) {
-            body { font-size: 8pt; }
-        }
-	@media only screen and (orientation: landscape)
-	  and (min-device-width : 375px)
-	  and (max-device-width : 667px) {
-            body { font-size: 9.5pt; }
-        }
-
-/* https://css-tricks.com/responsive-data-tables/ */
-/*
-Max width before this PARTICULAR table gets nasty
-This query will take effect for any screen smaller than 760px
-and also iPads specifically.
-*/
-/*@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px)  {*/
-@media (max-width: 1024px) and (min-width: 401px) {
-	div.inner_page {
-		width: 95%;
-	}
-
+and (min-width: 480px)
+and (max-width: 767px) {
 	body {
-		font-size: 32pt;
-	}
-
-	div.content_section_text p::first-letter,div.content::first-letter {
-		font-size: 37pt;
-	}
-
-	/*
-	 * Force table to not be like tables anymore
-	 */
-	table, thead, tbody, th, td, tr {
-		display: block;
-	}
-
-	/*
-	 * Hide table headers (but not display: none;, for accessibility)
-	 */
-	thead tr {
-		position: absolute;
-		top: -9999%;
-		left: -9999%;
-	}
-
-	tbody tr {
-		border-top: 5px solid var(--gray-color);
-		border-bottom: 5px solid var(--gray-color);
+		font-size: 11pt;
 	}
-
-	td {
-		/* Behave  like a "row" */
-		border: none;
-		position: relative;
-		padding-left: 50%;
+}
+@media only screen and (orientation: landscape)
+and (max-width: 479px) {
+	body {
+		font-size: 8pt;
 	}
-
-	td::before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
+}
+@media only screen and (orientation: landscape)
+and (min-device-width : 375px)
+and (max-device-width : 667px) {
+	body {
+		font-size: 9.5pt;
 	}
 }