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

Merge pull request #18 from TxtDot/styling2

Browse Source 
Completed styling
This commit is contained in:
Artemy Egorov 2023-08-16 14:33:08 +03:00 committed by GitHub
commit 0750485e4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/get.ts
View File

@ -27,7 +27,7 @@ export default async function getRoute(fastify: FastifyInstance) {
return parsed.textContent; return parsed.textContent;
} else { } else {
reply.type("text/html; charset=utf-8"); reply.type("text/html; charset=utf-8");
return reply.view("/templates/get.ejs", { parsed: parsed }); return reply.view("/templates/get.ejs", { parsed, remoteUrl });
} }
} }
); );

34
static/common.css
View File

@ -6,8 +6,11 @@
--bg: #fff; --bg: #fff;
--fg: #111; --fg: #111;
--link: hsl(207, 100%, 40%); --bg2: #bbb;
--link-hl: hsl(207, 100%, 20%); --fg2: #333;
--accent: hsl(207, 100%, 40%);
--accent-hl: hsl(207, 100%, 20%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -15,8 +18,11 @@
--bg: #222; --bg: #222;
--fg: #eee; --fg: #eee;
--link: hsl(207, 100%, 60%); --bg2: #444;
--link-hl: hsl(207, 100%, 80%); --fg2: #bbb;
--accent: hsl(207, 100%, 60%);
--accent-hl: hsl(207, 100%, 80%);
} }
} }
@ -36,3 +42,23 @@ main {
width: 100%; width: 100%;
margin: auto; 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);
}

15
static/get.css
View File

@ -1,8 +1,19 @@
.menu {
display: flex;
flex-direction: row;
column-gap: 0.25rem;
font-size: 0.9rem;
}
.title {
font-weight: 500;
}
a { a {
color: var(--link); color: var(--accent);
} }
a:hover { a:hover {
color: var(--link-hl); color: var(--accent-hl);
} }
pre { pre {

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

4
templates/get.ejs
View File

@ -11,6 +11,10 @@
</head> </head>
<body> <body>
<main> <main>
<div class="menu">
<a class="button secondary" href="/">Home</a>
<a class="button secondary" href="<%= remoteUrl %>">Original page</a>
</div>
<div class="title"> <div class="title">
<%= parsed.title %> <%= parsed.title %>
</div> </div>

4
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">
@ -21,7 +21,7 @@
<input type="text" name="url" id="url" placeholder="URL"> <input type="text" name="url" id="url" placeholder="URL">
</div> </div>
<div class="input"> <div class="input">
<input type="submit" id="submit" value="Parse"> <input type="submit" id="submit" class="button" value="Parse">
</div> </div>
<div class="input-row"> <div class="input-row">
<div class="input"> <div class="input">