From 7975fa0cf96458045478b0c3cb793a6b9565c280 Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Wed, 16 Aug 2023 15:22:01 +0400 Subject: [PATCH] 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 %>