Skip to content

Commit 94799f8

Browse files
semanticdatasemanticdata
committed
new options
1 parent de7f9b1 commit 94799f8

2 files changed

Lines changed: 108 additions & 115 deletions

File tree

‎src/options/options.css‎

Lines changed: 76 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,98 @@
11
:root {
2-
--input-bg: #f8f9fa;
3-
--input-border: #dee2e6;
4-
--button-primary: #7048e8;
5-
--button-hover: #845ef7;
6-
--selection-bg: #7048e8;
7-
--selection-color: #ffffff;
8-
}
2+
--bg: #ffffff;
3+
--fg: #1a1a1a;
4+
--border: #e0e0e0;
5+
--subtle: #666;
6+
--accent: #27ae60;
7+
--shadow: rgba(0, 0, 0, 0.1);
98

10-
* {
11-
box-sizing: border-box;
12-
text-align: center;
9+
--font-ui: ui-monospace, SFMono-Regular, Menlo, monospace;
10+
--font-body: "Georgia", serif;
11+
--measure: 65ch;
12+
--note-size: 1.125rem;
1313
}
1414

15-
body {
16-
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
17-
line-height: 1.6;
18-
max-width: 600px;
19-
margin: 0 auto;
20-
padding: 1rem;
15+
[data-theme="dark"] {
16+
--bg: #111111;
17+
--fg: #f0f0f0;
18+
--border: #333333;
19+
--subtle: #888;
20+
--shadow: rgba(0, 0, 0, 0.5);
2121
}
2222

23-
::selection {
24-
background: rebeccapurple;
25-
color: #ffffff;
23+
*,
24+
*::before,
25+
*::after {
26+
box-sizing: border-box;
2627
}
2728

28-
h1 {
29-
margin-bottom: 2rem;
30-
text-align: center;
31-
display: flex;
32-
align-items: center;
33-
justify-content: center;
34-
gap: 0.75rem;
29+
body {
30+
margin: 0;
31+
line-height: 1.5;
32+
background-color: var(--bg);
33+
color: var(--fg);
34+
font-family: var(--font-ui);
35+
transition: background-color 0.2s;
36+
display: flex;
37+
flex-direction: column;
38+
max-inline-size: 65ch;
39+
margin-inline: auto;
40+
align-items: center;
41+
justify-content: center;
42+
height: 100dvh;
43+
}
44+
header {
45+
margin-block-end: 3rem;
46+
/* font-size: 1.75rem; */
47+
}
48+
header span {
49+
font-weight: 600;
3550
}
36-
37-
form {
38-
margin-bottom: 1.5rem;
51+
footer {
52+
margin-block-start: 2.5rem;
3953
}
4054

41-
label {
42-
display: block;
43-
font-weight: 500;
55+
.stack {
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: flex-start;
4459
}
45-
46-
button {
47-
padding: 0.75rem 1.5rem;
48-
border: none;
49-
border-radius: 6px;
50-
background: var(--button-primary);
51-
color: white;
52-
font-size: 1rem;
53-
font-weight: 500;
54-
cursor: pointer;
55-
transition: background-color 0.3s ease;
56-
margin-right: 0.5rem;
60+
.stack > * {
61+
margin-block: 0;
5762
}
58-
59-
button:hover {
60-
background: var(--button-hover);
63+
.stack > * + * {
64+
margin-block-start: 1.5rem;
6165
}
62-
63-
button#reset {
64-
background: transparent;
65-
border: 1px solid var(--button-primary);
66-
color: var(--button-primary);
66+
.center {
67+
box-sizing: content-box;
68+
margin-inline: auto;
69+
max-inline-size: var(--measure);
6770
}
68-
69-
button#reset:hover {
70-
background: var(--input-bg);
71+
.icon {
72+
width: 1em;
73+
width: 1.5cap;
74+
height: 1em;
75+
height: 1.5cap;
76+
/* width: 2em; */
77+
/* height: 2em; */
7178
}
72-
73-
input {
74-
width: 100%;
75-
padding: 0.75rem;
76-
border: 1px solid var(--input-border);
77-
border-radius: 6px;
78-
background: var(--input-bg);
79-
margin-bottom: 1rem;
80-
font-size: 1rem;
79+
.with-icon {
80+
display: inline-flex;
81+
align-items: baseline;
82+
align-items: center;
8183
}
82-
83-
input,
84-
button {
85-
border-radius: 5px !important;
84+
.with-icon .icon {
85+
margin-inline-end: 0.5rem;
8686
}
8787

88-
footer {
89-
margin-top: 3rem;
90-
text-align: center;
91-
font-size: 0.875rem;
92-
opacity: 0.8;
88+
::selection {
89+
background: rebeccapurple;
90+
color: #ffffff;
9391
}
94-
95-
footer p a {
96-
text-decoration: none;
92+
.heart {
93+
text-decoration: none;
94+
color: inherit;
9795
}
98-
99-
footer p a:hover {
100-
color: red;
96+
.heart:hover {
97+
color: #e00;
10198
}
102-
103-
#status {
104-
margin-top: 1rem;
105-
}

‎src/options/options.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
11
<!DOCTYPE html>
2-
32
<html lang="en-US">
43

54
<head>
6-
<meta charset="UTF-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Notekeeper's Options</title>
9-
<meta name="description"
10-
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
11-
<link rel="icon" type="image/png" sizes="48x48" href="../icons/icon48.png" />
12-
<link rel="stylesheet" href="options.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Notekeeper's Options</title>
8+
<meta name="description" content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
9+
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
10+
<link rel="stylesheet" href="options.css" />
1311
</head>
1412

1513
<body>
16-
<header>
17-
<h1 class="nav-title">
18-
<img src="../icons/icon32.png" alt="icon" height="32px" width="32px" />
19-
NoteKeeper
20-
</h1>
21-
</header>
14+
<header>
15+
<h1 class="with-icon">
16+
<img class="icon" src="../icon.svg" alt="icon" />
17+
NoteKeeper
18+
</h1>
19+
</header>
2220

23-
<main>
24-
<form>
25-
<label for="shortcut">Keyboard Shortcut</label>
26-
<br />
27-
<input class="input is-small is-dark" type="text" id="shortcut" />
28-
</form>
29-
<button id="update">Update</button>
30-
<button id="reset">Reset</button>
31-
<div id="status"></div>
32-
</main>
21+
<main class="stack">
22+
<form>
23+
<label for="shortcut">Keyboard Shortcut</label>
24+
<br />
25+
<input class="input is-small is-dark" type="text" id="shortcut" />
26+
</form>
27+
<div class="center">
28+
<button id="update">Update</button>
29+
<button id="reset">Reset</button>
30+
</div>
31+
<div id="status"></div>
32+
</main>
3333

34-
<footer>
35-
<p>
36-
Made with
37-
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
38-
in Minneapolis.
39-
</p>
40-
</footer>
34+
<footer>
35+
<p>
36+
Made with
37+
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
38+
in Minneapolis.
39+
</p>
40+
</footer>
4141

42-
<script src="options.js"></script>
42+
<script src="options.js"></script>
4343
</body>
4444

4545
</html>

0 commit comments

Comments
 (0)