Веб-сайт самохостера Lotigara

summaryrefslogtreecommitdiff
path: root/archive/css/responsivity.css
diff options
context:
space:
mode:
Diffstat (limited to 'archive/css/responsivity.css')
-rw-r--r--archive/css/responsivity.css193
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;
+ }
+}