From 22b8af4012de9a6273b9e8cb6db5a3d4b46c54ba Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Wed, 16 Aug 2023 14:08:53 +0400 Subject: [PATCH 1/3] Menu in /get --- src/routes/get.ts | 2 +- static/get.css | 9 +++++++++ templates/get.ejs | 4 ++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/routes/get.ts b/src/routes/get.ts index 8fd4f2e..57089d3 100644 --- a/src/routes/get.ts +++ b/src/routes/get.ts @@ -38,7 +38,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/get.css b/static/get.css index 3b60923..fc3c161 100644 --- a/static/get.css +++ b/static/get.css @@ -1,3 +1,12 @@ +.menu { + display: flex; + flex-direction: row; + column-gap: 1rem; +} +.title { + font-weight: 500; +} + a { color: var(--link); } diff --git a/templates/get.ejs b/templates/get.ejs index 7139bad..e51e288 100644 --- a/templates/get.ejs +++ b/templates/get.ejs @@ -11,6 +11,10 @@
+
+ Home + Original page +
<%= parsed.title %>
From 6a3d541fb436b0f0207ef5206c4f7ab18c719f3d Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Wed, 16 Aug 2023 14:35:03 +0400 Subject: [PATCH 2/3] Buttons styling --- static/common.css | 32 ++++++++++++++++++++++++++++---- static/get.css | 8 +++++--- templates/get.ejs | 4 ++-- templates/index.ejs | 2 +- 4 files changed, 36 insertions(+), 10 deletions(-) diff --git a/static/common.css b/static/common.css index 1f6e408..dc03afd 100644 --- a/static/common.css +++ b/static/common.css @@ -6,8 +6,10 @@ --bg: #fff; --fg: #111; - --link: hsl(207, 100%, 40%); - --link-hl: hsl(207, 100%, 20%); + --bg2: #bbb; + + --accent: hsl(207, 100%, 40%); + --accent-hl: hsl(207, 100%, 20%); } @media (prefers-color-scheme: dark) { @@ -15,8 +17,10 @@ --bg: #222; --fg: #eee; - --link: hsl(207, 100%, 60%); - --link-hl: hsl(207, 100%, 80%); + --bg2: #444; + + --accent: hsl(207, 100%, 60%); + --accent-hl: hsl(207, 100%, 80%); } } @@ -36,3 +40,23 @@ main { width: 100%; margin: auto; } + +.button { + padding: 0.25rem 0.5rem; + + 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 fc3c161..0a03379 100644 --- a/static/get.css +++ b/static/get.css @@ -1,17 +1,19 @@ .menu { display: flex; flex-direction: row; - column-gap: 1rem; + 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/templates/get.ejs b/templates/get.ejs index e51e288..41490ef 100644 --- a/templates/get.ejs +++ b/templates/get.ejs @@ -12,8 +12,8 @@
- Home - Original page + Home + Original page
<%= parsed.title %> diff --git a/templates/index.ejs b/templates/index.ejs index d996086..d4fc118 100644 --- a/templates/index.ejs +++ b/templates/index.ejs @@ -21,7 +21,7 @@
- +
From 7975fa0cf96458045478b0c3cb793a6b9565c280 Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Wed, 16 Aug 2023 15:22:01 +0400 Subject: [PATCH 3/3] Completed styling for main page --- static/common.css | 4 +++- static/index.css | 51 +++++++++++++++++++++++++++++++++++++++++++++ templates/index.ejs | 2 +- 3 files changed, 55 insertions(+), 2 deletions(-) diff --git a/static/common.css b/static/common.css index dc03afd..58f8e49 100644 --- a/static/common.css +++ b/static/common.css @@ -7,6 +7,7 @@ --fg: #111; --bg2: #bbb; + --fg2: #333; --accent: hsl(207, 100%, 40%); --accent-hl: hsl(207, 100%, 20%); @@ -18,6 +19,7 @@ --fg: #eee; --bg2: #444; + --fg2: #bbb; --accent: hsl(207, 100%, 60%); --accent-hl: hsl(207, 100%, 80%); @@ -42,7 +44,7 @@ main { } .button { - padding: 0.25rem 0.5rem; + padding: 0.25rem 0.75rem; border: 0.125rem solid var(--accent); border-radius: 0.25rem; 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/index.ejs b/templates/index.ejs index d4fc118..70e1c72 100644 --- a/templates/index.ejs +++ b/templates/index.ejs @@ -13,7 +13,7 @@
-

txt.

+

txt.

<%= desc %>