aboutsummaryrefslogtreecommitdiff
path: root/xP
diff options
context:
space:
mode:
Diffstat (limited to 'xP')
-rw-r--r--xP/public/xP.css26
-rw-r--r--xP/xP.go1
2 files changed, 16 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;
diff --git a/xP/xP.go b/xP/xP.go
index 9428501..bc7ebc2 100644
--- a/xP/xP.go
+++ b/xP/xP.go
@@ -145,6 +145,7 @@ var page = template.Must(template.New("/").Parse(`<!DOCTYPE html>
<head>
<title>xP</title>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="xP.css" />
</head>
<body>