Make the website minimalistic

1 files changed, 193 insertions, 0 deletions

diff --git a/archive/css/responsivity.css b/archive/css/responsivity.css
new file mode 100644
index 0000000..58fc1f3
--- /dev/null
+++ b/archive/css/responsivity.css
@@ -0,0 +1,193 @@
+@media (max-width: 1024px) and (min-width: 401px) and (orientation: portrait){
+	div.inner_page {
+		width: 95%;
+	}
+
+	body {
+		font-size: 32pt;
+	}
+
+	div.content_section_text p::first-letter,div.content::first-letter {
+		font-size: 37pt;
+	}
+
+	/* https://css-tricks.com/responsive-data-tables/ */
+
+	/*
+	 * 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 */
+		top: 6px;
+		left: 6px;
+		width: 45%;
+		padding-right: 10px;
+		white-space: nowrap;
+	}
+}
+
+/* iframe */
+@media (width: 400px) and (height: 250px) {
+	div.inner_page {
+		width: 95%;
+	}
+
+	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;
+	}
+}
+
+@media (max-width: 400px) and (orientation: portrait){
+	div.inner_page {
+		width: 100%;
+		margin: 0;
+	}
+
+	body {
+		font-size: 24pt;
+	}
+}
+@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%;
+	}
+
+	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);
+	}
+
+	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;
+	}
+}