mirrors/txtdot
3
0
Fork 0
mirror of https://github.com/txtdot/txtdot synced 2024-10-18 14:40:19 +03:00
Code Issues 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;
--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;

51
static/index.css
View File

@ -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;
}

2
templates/index.ejs
View File

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