Skip to content

Commit db6723a

Browse files
Robot-InventorRobot-Inventor
authored
feat: redesign privacy policy and open source license pages (#1195)
1 parent 5ac21d6 commit db6723a

File tree

6 files changed

+94
-76
lines changed

6 files changed

+94
-76
lines changed

‎src/css/browserAction.css‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,10 @@
1+
@import url("./theme.css");
2+
13
:root {
24
font-size: 16px;
35

46
--window-padding: 1.75rem;
57
--container-outside-text-padding-left: 0.25rem;
6-
7-
--md-surface-container: #f2f3f6;
8-
--md-surface: white;
9-
--md-surface-variant: #fafafc;
10-
--md-on-surface: rgb(51, 51, 51);
11-
--md-on-surface-variant: rgb(51, 51, 51, 0.7);
12-
13-
--md-sys-color-primary: rgb(73, 113, 214);
14-
--md-sys-color-on-primary: var(--md-surface);
15-
--md-sys-color-on-surface-variant: #888;
16-
--md-sys-color-on-surface: #aaa;
17-
}
18-
19-
@media (prefers-color-scheme: dark) {
20-
:root {
21-
--md-surface-container: #0d0e14;
22-
--md-surface: #1f2029;
23-
--md-surface-variant: #2a2b37;
24-
--md-on-surface: #ebedf2;
25-
--md-on-surface-variant: #a8b2c7;
26-
27-
--md-sys-color-primary: rgb(98, 125, 194);
28-
--md-sys-color-on-primary: var(--md-surface);
29-
--md-sys-color-on-surface-variant: #aaa;
30-
--md-sys-color-on-surface: #888;
31-
}
328
}
339

3410
* {

‎src/css/ossLicenses.css‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,70 @@
1-
:root {
2-
--theme-font-color: #333;
3-
--theme-background-color: #fff;
4-
}
5-
6-
@media (prefers-color-scheme: dark) {
7-
:root {
8-
--theme-font-color: #fff;
9-
--theme-background-color: #121212;
10-
}
11-
}
1+
@import url("./theme.css");
122

133
* {
144
box-sizing: border-box;
155
margin: 0;
166
padding: 0;
177
}
188

19-
html,
20-
body {
9+
:root {
2110
font-family: sans-serif;
2211
width: 100%;
23-
font-size: 100%;
24-
color: var(--theme-font-color);
25-
background: var(--theme-background-color);
12+
background: var(--md-surface-container);
13+
color: var(--md-on-surface);
14+
line-height: 175%;
2615
}
2716

2817
body {
29-
padding: 2rem 0;
18+
display: flex;
19+
justify-content: center;
20+
font-size: 100%;
3021
}
3122

3223
main {
3324
margin: 0 auto;
34-
max-width: 50rem;
25+
max-width: min(50rem, calc(100% - 4rem));
26+
margin: 2rem;
3527
}
3628

37-
a {
38-
color: inherit;
29+
section {
30+
background: var(--md-surface);
31+
border-radius: 0.25rem;
32+
padding: 2rem;
33+
margin: 0.15rem 0;
34+
transition: background 0.2s;
3935
}
4036

41-
section {
42-
margin-top: 2rem;
37+
section:hover {
38+
background: var(--md-surface-variant);
39+
}
40+
41+
section:first-of-type {
42+
border-top-left-radius: 1.5rem;
43+
border-top-right-radius: 1.5rem;
44+
}
45+
46+
section:last-of-type {
47+
border-bottom-left-radius: 1.5rem;
48+
border-bottom-right-radius: 1.5rem;
4349
}
4450

45-
.license-item-outer {
46-
padding: 1rem 0;
47-
margin: 1rem 0;
48-
border-top: 0.1rem solid var(--theme-font-color);
51+
h1 {
52+
font-size: 1.5rem;
53+
margin-bottom: 1rem;
4954
}
5055

51-
.license-item-outer h2 {
56+
h2 {
57+
font-size: 1.2rem;
5258
margin-bottom: 1rem;
5359
}
5460

61+
a {
62+
color: inherit;
63+
}
64+
5565
pre {
5666
font-family: inherit;
5767
font-size: inherit;
68+
white-space: pre-wrap;
69+
word-wrap: break-word;
5870
}

‎src/css/privacyPolicy.css‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
1-
:root {
2-
--theme-font-color: #333;
3-
--theme-background-color: #fff;
4-
}
5-
6-
@media (prefers-color-scheme: dark) {
7-
:root {
8-
--theme-font-color: #fff;
9-
--theme-background-color: #121212;
10-
}
11-
}
1+
@import url("./theme.css");
122

133
* {
144
box-sizing: border-box;
155
margin: 0;
166
padding: 0;
177
}
188

19-
html,
20-
body {
9+
:root {
2110
font-family: sans-serif;
2211
width: 100%;
23-
font-size: 100%;
24-
color: var(--theme-font-color);
25-
background: var(--theme-background-color);
12+
background: var(--md-surface-container);
13+
color: var(--md-on-surface);
14+
line-height: 175%;
2615
}
2716

2817
body {
29-
padding: 2rem 0;
18+
display: flex;
19+
justify-content: center;
20+
font-size: 100%;
21+
}
22+
23+
h1 {
24+
font-size: 1.5rem;
25+
margin-bottom: 1rem;
3026
}
3127

3228
main {
3329
margin: 0 auto;
34-
max-width: 50rem;
30+
max-width: min(50rem, calc(100% - 4rem));
31+
background: var(--md-surface);
32+
border-radius: 1rem;
33+
padding: 2rem;
34+
margin: 2rem;
35+
transition: background 0.2s;
36+
}
37+
38+
main:hover {
39+
background: var(--md-surface-variant);
3540
}

‎src/css/theme.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:root {
2+
--md-surface-container: #f2f3f6;
3+
--md-surface: white;
4+
--md-surface-variant: #fafafc;
5+
--md-on-surface: #36373a;
6+
--md-on-surface-variant: #768098;
7+
8+
--md-sys-color-primary: rgb(73, 113, 214);
9+
--md-sys-color-on-primary: var(--md-surface);
10+
--md-sys-color-on-surface-variant: #888;
11+
--md-sys-color-on-surface: #aaa;
12+
}
13+
14+
@media (prefers-color-scheme: dark) {
15+
:root {
16+
--md-surface-container: #0d0e14;
17+
--md-surface: #1f2029;
18+
--md-surface-variant: #2a2b37;
19+
--md-on-surface: #ebedf2;
20+
--md-on-surface-variant: #a8b2c7;
21+
22+
--md-sys-color-primary: rgb(98, 125, 194);
23+
--md-sys-color-on-primary: var(--md-surface);
24+
--md-sys-color-on-surface-variant: #aaa;
25+
--md-sys-color-on-surface: #888;
26+
}
27+
}

‎src/html/ossLicenses.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,15 @@
99
</head>
1010
<body>
1111
<main>
12-
<h1>Open Source Licenses</h1>
1312
<section>
13+
<h1>Open Source Licenses</h1>
1414
<p>
1515
Shadowban Scanner is provided under the
1616
<a href="https://github.com/Robot-Inventor/shadowban-scanner/blob/main/LICENSE" target="_blank"
1717
>MIT License</a
1818
>. Shadowban Scanner is powered by the open source software listed below.
1919
</p>
2020
</section>
21-
<section id="third-party-licenses"></section>
2221
</main>
2322
<script src="../js/ossLicenses.js"></script>
2423
</body>

‎src/ts/ossLicenses.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const normalizeRepositoryLink = (repository: string): string => {
1515

1616
// eslint-disable-next-line max-statements
1717
const main = async (): Promise<void> => {
18-
const target = document.getElementById("third-party-licenses");
18+
const target = document.querySelector("main");
1919
if (!target) {
2020
throw new Error("Missing target element");
2121
}
@@ -27,8 +27,7 @@ const main = async (): Promise<void> => {
2727
const fragment = document.createDocumentFragment();
2828

2929
for (const license of [...OSSLicenses, ...additionalLicenses]) {
30-
const itemOuter = document.createElement("div");
31-
itemOuter.className = "license-item-outer";
30+
const itemOuter = document.createElement("section");
3231
fragment.appendChild(itemOuter);
3332

3433
const h2 = document.createElement("h2");

0 commit comments

Comments
 (0)