From 071987d4357946f89a1ffb6212bcd6e1733e1692 Mon Sep 17 00:00:00 2001
From: 0o-de-lally <1364012+0o-de-lally@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:25:08 -0400
Subject: [PATCH] more css monkey
---
docs/index.html | 64 ++++++++++++++++++++++++++++++++++++++-----------
1 file changed, 50 insertions(+), 14 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 93f9d01..5fe1b66 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,33 +31,69 @@
background-color: black;
}
- #container {
- padding-top: 10%;
- /* max-width: 90% */
- }
-
#content {
- max-width: 50vw;
+ padding-top: 10%;
min-width: 55ch;
- font-size: 1.5vw;
+ max-width: 80vw;
+ font-size: 2.5vw;
overflow-wrap: break-word;
}
- @media only screen and (max-width: 600px) {
+ /* Smartphones (portrait and landscape) ----------- */
+ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ #content {
+ max-width: 95vw;
+ font-size: 2.8vw;
+ }
+ }
+
+ /* Smartphones (landscape) ----------- */
+ @media only screen and (min-device-width : 320px) {
+ /* Todo */
+ }
+
+ /* Smartphones (portrait) ----------- */
+ @media only screen and (max-width : 430px) {
+ /* Todo */
+ }
+
+ /* Desktops and laptops ----------- */
+ /* new ipads are often wider than some laptops */
+ @media only screen and (min-width : 800px) {
#content {
- /* for the section underline */
- font-size: 2.5vw;
+ max-width: 50vw;
min-width: 55ch;
- max-width: 55ch;
+ font-size: 1.5vw;
overflow-wrap: break-word;
}
}
+
+ /* iPads (portrait and landscape) ----------- */
+ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+ /* Todo */
+ }
+
+ /* iPads (landscape) ----------- */
+ @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) {
+ #content {
+ max-width: 50vw;
+ font-size: 2vw;
+ }
+ }
+
+ /* iPads (portrait) ----------- */
+ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
+ /* Todo */
+ }
+
+ /* Large screens ----------- */
+ @media only screen and (min-width : 1824px) {
+ /* Todo */
+ }
-
+ ...