Skip to content

Commit 3cf8aa7

Browse files
abduscoabdusco
committed
feat: add mobile viewport and dark mode support
Both pages get a proper viewport meta tag, a horizontally-scrollable table wrapper and stacked import form on narrow screens, and prefers-color-scheme: dark styling matching the logo's existing dark-mode handling.
1 parent 0c7a1db commit 3cf8aa7

2 files changed

Lines changed: 39 additions & 4 deletions

File tree

‎static/templates/index.html‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,43 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>ReadOne</title>
67
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
78
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
89
<style>
10+
* { box-sizing: border-box; }
911
body { font-family: -apple-system, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; color: #1a1a1a; }
1012
h1 { display: flex; align-items: center; gap: 10px; }
1113
h1 img { width: 32px; height: 32px; }
1214
.import { display: flex; gap: 8px; margin-bottom: 12px; }
13-
.import input[type=url] { flex: 1; padding: 8px; font-size: 14px; }
14-
.actions { display: flex; gap: 10px; align-items: center; margin: 16px 0; }
15+
.import input[type=url] { flex: 1; min-width: 0; padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #1a1a1a; }
16+
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
1517
a.button, button { padding: 8px 14px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; color: inherit; }
1618
a.button:hover, button:hover { background: #eee; }
1719
button:disabled { opacity: .5; cursor: not-allowed; }
18-
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
20+
.table-wrap { overflow-x: auto; margin-top: 16px; }
21+
table { width: 100%; border-collapse: collapse; }
1922
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: top; }
20-
td.meta { color: #666; font-size: 12px; }
23+
td.meta { color: #666; font-size: 12px; white-space: nowrap; }
2124
td a { color: #06c; }
2225
.error { color: #b00020; font-size: 14px; margin: 8px 0; }
26+
27+
@media (max-width: 480px) {
28+
body { margin: 20px auto; }
29+
.import { flex-direction: column; }
30+
}
31+
32+
@media (prefers-color-scheme: dark) {
33+
body { background: #1a1a1a; color: #eee; }
34+
.import input[type=url] { background: #2a2a2a; border-color: #444; color: #eee; }
35+
a.button, button { background: #2a2a2a; border-color: #444; color: #eee; }
36+
a.button:hover, button:hover { background: #333; }
37+
th, td { border-bottom-color: #333; }
38+
td.meta { color: #999; }
39+
td a { color: #6cb2ff; }
40+
.error { color: #ff6b6b; }
41+
}
2342
</style>
2443
</head>
2544
<body x-data="app()" x-init="init()">
@@ -39,6 +58,7 @@ <h1><img src="/assets/logo.svg" alt=""> ReadOne</h1>
3958
</button>
4059
</div>
4160

61+
<div class="table-wrap">
4262
<table>
4363
<thead>
4464
<tr>
@@ -62,6 +82,7 @@ <h1><img src="/assets/logo.svg" alt=""> ReadOne</h1>
6282
</template>
6383
</tbody>
6484
</table>
85+
</div>
6586

6687
<script>
6788
function app() {

‎static/templates/reader.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,30 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>{{.Title}}</title>
67
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
78
<style>
9+
* { box-sizing: border-box; }
810
body { font-family: Georgia, serif; max-width: 700px; margin: 0 auto; padding: 30px 20px 80px; line-height: 1.6; font-size: 18px; color: #1a1a1a; }
911
.back { display: inline-block; margin-bottom: 20px; font-family: -apple-system, sans-serif; font-size: 14px; color: #06c; text-decoration: none; }
1012
h1 { font-size: 32px; margin-bottom: 4px; }
1113
#meta { color: #666; font-size: 14px; margin-bottom: 24px; font-family: -apple-system, sans-serif; }
1214
#meta a { color: #666; }
1315
#content img { max-width: 100%; height: auto; display: block; margin: 12px 0; }
1416
#content pre { background: #f5f5f5; padding: 12px; overflow-x: auto; }
17+
18+
@media (max-width: 480px) {
19+
body { padding: 20px 16px 60px; font-size: 17px; }
20+
h1 { font-size: 26px; }
21+
}
22+
23+
@media (prefers-color-scheme: dark) {
24+
body { background: #1a1a1a; color: #ddd; }
25+
.back, #meta a { color: #6cb2ff; }
26+
#meta { color: #999; }
27+
#content pre { background: #2a2a2a; }
28+
}
1529
</style>
1630
</head>
1731
<body>

0 commit comments

Comments
 (0)