From 7a61f0bc4ec6a225924a956c8a1075b569ffbf13 Mon Sep 17 00:00:00 2001
From: Conrad Zelck <git@simpel.cc>
Date: Sun, 8 Oct 2023 00:23:11 +0200
Subject: [PATCH] style: place label below/above for small devices
The label took more space then needed. Put the label above or below the
the touch elements.
Signed-off-by: Conrad Zelck <git@simpel.cc>
---
style.css | 21 ++++++++++++++++-----
1 file changed, 16 insertions(+), 5 deletions(-)
diff --git a/style.css b/style.css
index 3019783..9f204b8 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,8 @@
:root {
--default-top-padding: 1.5em;
--default-body-bottom-margin: 2vmin;
- --default-min-font-size-px: 14px;
- --default-min-font-size: 14;
+ --default-min-font-size-px: 12px;
+ --default-min-font-size: 12;
--default-max-font-size-px: 18px;
--default-max-font-size: 18;
}
@@ -21,6 +21,7 @@ html {
body {
height: calc(100vh - 3vmin); /* minus margin-top - margin bottom is 0 */
+ font-size: inherit;
font-family: helvetica, Arial, sans-serif;
background-color: #555;
color: white;
@@ -488,11 +489,21 @@ main {
.two-column {
grid-template-columns: minmax(0, 1fr);
}
- #selects > label {
- display: block;
- }
div.download {
/* padding is only needed if it must align to file input when side by side */
padding-top: 0;
}
}
+
+@media (max-width: 600px) {
+ #checkboxes > label, #selects > label {
+ display: grid;
+ }
+}
+
+/* iPhone 13 mini portrait */
+@media (max-width: 375px) {
+ .left.label-w-select, .right.label-w-select {
+ flex-direction: column;
+ }
+}
--
GitLab