summaryrefslogtreecommitdiff
path: root/xP/public/xP.css
diff options
context:
space:
mode:
authorPřemysl Eric Janouch <p@janouch.name>2022-09-08 15:53:29 +0200
committerPřemysl Eric Janouch <p@janouch.name>2022-09-08 17:11:10 +0200
commit8c8e06b0157c97ee1771f848ed363c6a0ed398be (patch)
treebad11bb1b3d1b6b315b97256feeb51e79574779c /xP/public/xP.css
parentd7b6967b6f16d9d953c2627232ca194ec08da942 (diff)
downloadxK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.tar.gz
xK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.tar.xz
xK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.zip
xP: enhance mobile experience
The left column used to jump around, and phones were near-unusable.
Diffstat (limited to 'xP/public/xP.css')
-rw-r--r--xP/public/xP.css26
1 files changed, 15 insertions, 11 deletions
diff --git a/xP/public/xP.css b/xP/public/xP.css
index 81025c9..2e9d4b5 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -2,16 +2,19 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
+ font-size: clamp(0.5rem, 2vw, 1rem);
}
.xP {
- height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
+ height: 100vh;
+ /* https://caniuse.com/viewport-unit-variants */
+ height: 100dvh;
}
.title, .status {
- padding: .05rem .3rem;
+ padding: .05em .3em;
background: #eee;
position: relative;
@@ -52,10 +55,11 @@ body {
.list {
overflow-y: auto;
border-right: 1px solid #ccc;
- min-width: 10rem;
+ min-width: 10em;
+ flex-shrink: 0;
}
.item {
- padding: .05rem .3rem;
+ padding: .05em .3em;
cursor: default;
}
.item.highlighted {
@@ -89,7 +93,7 @@ body {
overflow-y: auto;
}
.log {
- padding: .1rem .3rem;
+ padding: .1em .3em;
font-family: monospace;
white-space: pre-wrap;
overflow-y: auto;
@@ -99,7 +103,7 @@ body {
opacity: 50%;
}
.date {
- padding: .3rem;
+ padding: .3em;
grid-column: span 2;
font-weight: bold;
}
@@ -109,16 +113,16 @@ body {
background: #ff5f00;
}
.time {
- padding: .1rem .3rem;
+ padding: .1em .3em;
background: #f8f8f8;
color: #bbb;
border-right: 1px solid #ccc;
}
.mark {
- padding-right: .3rem;
+ padding-right: .3em;
text-align: center;
display: inline-block;
- min-width: 2rem;
+ min-width: 2em;
}
.mark.error {
color: red;
@@ -133,7 +137,7 @@ body {
color: darkred;
}
.content {
- padding: .1rem .3rem;
+ padding: .1em .3em;
white-space: pre-wrap;
}
.content .b {
@@ -154,7 +158,7 @@ body {
textarea {
font: inherit;
- padding: .05rem .3rem;
+ padding: .05em .3em;
margin: 0;
border: 2px inset #eee;
flex-shrink: 0;