inkch/txtdot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed styling for main page

Browse Source
This commit is contained in:
DarkCat09 2023-08-16 15:22:01 +04:00
parent 6a3d541fb4
commit 7975fa0cf9
No known key found for this signature in database
GPG Key ID: 4785B6FB1C50A540
3 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/common.css
View File

@ -7,6 +7,7 @@
--fg: #111; --fg: #111;
--bg2: #bbb; --bg2: #bbb;
--fg2: #333;
--accent: hsl(207, 100%, 40%); --accent: hsl(207, 100%, 40%);
--accent-hl: hsl(207, 100%, 20%); --accent-hl: hsl(207, 100%, 20%);
@ -18,6 +19,7 @@
--fg: #eee; --fg: #eee;
--bg2: #444; --bg2: #444;
--fg2: #bbb;
--accent: hsl(207, 100%, 60%); --accent: hsl(207, 100%, 60%);
--accent-hl: hsl(207, 100%, 80%); --accent-hl: hsl(207, 100%, 80%);
@ -42,7 +44,7 @@ main {
} }
.button { .button {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.75rem;
border: 0.125rem solid var(--accent); border: 0.125rem solid var(--accent);
border-radius: 0.25rem; border-radius: 0.25rem;

51
static/index.css
View File

@ -4,11 +4,22 @@ main {
align-items: center; align-items: center;
} }
h1 {
width: fit-content;
margin: auto;
}
h1 > span {
color: var(--accent);
}
.input-grid { .input-grid {
display: grid; display: grid;
/* 2 columns: auto width, min-content width */ /* 2 columns: auto width, min-content width */
grid-template-columns: auto min-content; grid-template-columns: auto min-content;
/* gap: row column */
gap: 0.5rem 0.25rem;
width: fit-content; width: fit-content;
} }
@ -16,8 +27,48 @@ main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.75rem;
}
.input {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.25rem;
}
label {
font-size: 0.9rem;
} }
#url { #url {
width: 100%; 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;
} }

2
templates/index.ejs
View File

@ -13,7 +13,7 @@
<body> <body>
<main> <main>
<header> <header>
<h1>txt.</h1> <h1>txt<span>.</span></h1>
<p><%= desc %></p> <p><%= desc %></p>
</header> </header>
<form action="/get" method="get" class="input-grid"> <form action="/get" method="get" class="input-grid">