txt.
+txt.
<%= desc %>
diff --git a/src/routes/get.ts b/src/routes/get.ts index b13251d..f2d19f8 100644 --- a/src/routes/get.ts +++ b/src/routes/get.ts @@ -27,7 +27,7 @@ export default async function getRoute(fastify: FastifyInstance) { return parsed.textContent; } else { reply.type("text/html; charset=utf-8"); - return reply.view("/templates/get.ejs", { parsed: parsed }); + return reply.view("/templates/get.ejs", { parsed, remoteUrl }); } } ); diff --git a/static/common.css b/static/common.css index 1f6e408..58f8e49 100644 --- a/static/common.css +++ b/static/common.css @@ -6,8 +6,11 @@ --bg: #fff; --fg: #111; - --link: hsl(207, 100%, 40%); - --link-hl: hsl(207, 100%, 20%); + --bg2: #bbb; + --fg2: #333; + + --accent: hsl(207, 100%, 40%); + --accent-hl: hsl(207, 100%, 20%); } @media (prefers-color-scheme: dark) { @@ -15,8 +18,11 @@ --bg: #222; --fg: #eee; - --link: hsl(207, 100%, 60%); - --link-hl: hsl(207, 100%, 80%); + --bg2: #444; + --fg2: #bbb; + + --accent: hsl(207, 100%, 60%); + --accent-hl: hsl(207, 100%, 80%); } } @@ -36,3 +42,23 @@ main { width: 100%; margin: auto; } + +.button { + padding: 0.25rem 0.75rem; + + border: 0.125rem solid var(--accent); + border-radius: 0.25rem; + + background: var(--bg); + color: var(--fg); + text-decoration: none; + + cursor: pointer; +} +.button.secondary { + border-color: var(--bg2); +} +.button:hover { + background: var(--bg2); + color: var(--fg); +} diff --git a/static/get.css b/static/get.css index 3b60923..0a03379 100644 --- a/static/get.css +++ b/static/get.css @@ -1,8 +1,19 @@ +.menu { + display: flex; + flex-direction: row; + column-gap: 0.25rem; + + font-size: 0.9rem; +} +.title { + font-weight: 500; +} + a { - color: var(--link); + color: var(--accent); } a:hover { - color: var(--link-hl); + color: var(--accent-hl); } pre { diff --git a/static/index.css b/static/index.css index 53a2af3..4c3fc3d 100644 --- a/static/index.css +++ b/static/index.css @@ -4,11 +4,22 @@ main { align-items: center; } +h1 { + width: fit-content; + margin: auto; +} +h1 > span { + color: var(--accent); +} + .input-grid { display: grid; /* 2 columns: auto width, min-content width */ grid-template-columns: auto min-content; + /* gap: row column */ + gap: 0.5rem 0.25rem; + width: fit-content; } @@ -16,8 +27,48 @@ main { display: flex; flex-direction: row; align-items: center; + gap: 0.75rem; +} + +.input { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.25rem; +} + +label { + font-size: 0.9rem; } #url { width: 100%; + height: 100%; /* shrink to #submit height */ + + outline: none; + border: 0; + border-bottom: 0.125rem solid var(--fg2); + + background: var(--bg); + color: var(--fg); + font-size: 1rem; +} +#url::placeholder { + color: var(--fg2); + opacity: 1; +} + +#submit { + font-size: 1rem; +} + +select { + border: 0; + border-bottom: 0.125rem solid var(--accent); + + background: var(--bg); + color: var(--fg); + + font-weight: 500; + font-size: 0.9rem; } diff --git a/templates/get.ejs b/templates/get.ejs index 7139bad..41490ef 100644 --- a/templates/get.ejs +++ b/templates/get.ejs @@ -11,6 +11,10 @@
<%= desc %>