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

Buttons styling

Browse Source
This commit is contained in:
DarkCat09 2023-08-16 14:35:03 +04:00
parent 22b8af4012
commit 6a3d541fb4
No known key found for this signature in database
GPG Key ID: 4785B6FB1C50A540
4 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/common.css
View File

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

8
static/get.css
View File

@ -1,17 +1,19 @@
.menu { .menu {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
column-gap: 1rem; column-gap: 0.25rem;
font-size: 0.9rem;
} }
.title { .title {
font-weight: 500; 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 {

4
templates/get.ejs
View File

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

2
templates/index.ejs
View File

@ -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">