Skip to content

Commit a8b2d2d

Browse files
everlosteeverloste
committed
update css and the like
1 parent a58823e commit a8b2d2d

3 files changed

Lines changed: 104 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@
1212
<link rel="stylesheet" href="./widgets.css" />
1313
</head>
1414
<body>
15-
<h3>Search Curseforge and Modrinth... (indev)</h3>
16-
<p>
17-
You can use this tool to search both CurseForge and Modrinth for Minecraft projects at once.
18-
It can fail to pair CurseForge and Modrinth projects if their links don't match.
19-
</p>
15+
<header>
16+
<h2>
17+
Search Curseforge and Modrinth (beta)
18+
</h2>
19+
<p>
20+
You can use this tool to search both CurseForge and Modrinth for Minecraft projects at once.
21+
It can fail to pair CurseForge and Modrinth projects if their links don't match.
22+
</p>
23+
</header>
24+
2025
<div class="search-tool">
2126
<div class="search-filters">
2227
<div>
@@ -56,8 +61,8 @@ <h3>Search Curseforge and Modrinth... (indev)</h3>
5661
<input id="search-number-input" type="number" value="30" min="5" max="100"/>
5762
</div>
5863
<div>
59-
<label for="pair-search-toggle">Pair search</label>
6064
<input id="pair-search-toggle" type="checkbox" />
65+
<label for="pair-search-toggle">Pair search</label>
6166
<span style="font-size: small;"><br>Try harder to get project links to both CurseForge and Modrinth (slows search down significantly, but gives more useful results)</span>
6267
</div>
6368
<button id="search-button">

‎main.css‎

Lines changed: 55 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,95 @@
11
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
22

3-
*,
4-
*::before,
5-
*::after {
6-
box-sizing: border-box;
7-
}
8-
93
:root {
104
--background: #181825;
115
--background-below: #11111b;
126
--background-above: #1e1e2e;
137
--background-above-above: #363a4f;
148

159
--accent-color: #beabee;
16-
--accent-color-faded: #a18ed1;
10+
--accent-color-darker: lch(from var(--accent-color) calc(l - 15) c calc(h - 5));
11+
--accent-color-lighter: lch(from var(--accent-color) calc(l + 15) c calc(h + 5));
1712

1813
--text-color: whitesmoke;
19-
--darker-text-color: rgb(179, 178, 178);
14+
--text-color-title: hsl(from var(--accent-color) calc(h + 5) calc(s - 5) calc(l + 10));
15+
--text-color-dark: hsl(from var(--accent-color) calc(h - 5) calc(s - 50) calc(l - 25));
2016

2117
--border-width: 2px;
2218

2319
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
2420
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
21+
}
22+
23+
*,
24+
*::before,
25+
*::after {
26+
box-sizing: border-box;
27+
}
2528

29+
html,
30+
body {
31+
/* text */
2632
font-family: "Inter", sans-serif;
27-
color: whitesmoke;
28-
background-color: var(--background);
2933
font-size: 16px;
3034
line-height: 1.5;
35+
36+
/* colours */
37+
color: var(--text-color);
38+
background-color: var(--background-below);
39+
40+
/* screen */
41+
width: 100%;
42+
height: 100%;
43+
margin: 0;
44+
padding: 0;
3145
}
3246

3347
body {
34-
height: 97vh;
35-
3648
display: flex;
3749
flex-direction: column;
3850
}
3951

52+
header {
53+
text-align: left;
54+
padding: 0.5rem 1rem;
55+
}
56+
57+
footer {
58+
text-align: right;
59+
padding: 0.5rem 1rem;
60+
}
61+
62+
dialog {
63+
background-color: var(--background);
64+
border: var(--border-width) solid var(--background-above);
65+
color: inherit;
66+
max-width: 25vw;
67+
}
68+
4069
p, h1, h2, h3, h4, h5 {
41-
margin: 0.5rem;
70+
margin: 0.5rem 0;
71+
}
72+
73+
h1, h2, h3, h4, h5 {
74+
font-weight: 800;
75+
color: var(--text-color-title);
4276
}
4377

4478
a {
79+
color: inherit;
4580
text-decoration: underline transparent var(--border-width);
4681
font-weight: bolder;
47-
transition: all var(--ease-out-circ) 0.5s;
4882

49-
&:hover {
50-
text-decoration: underline var(--accent-color-faded) var(--border-width);
51-
}
83+
transition: all var(--ease-out-circ) 0.75s;
84+
5285
&:link {
5386
color: var(--accent-color);
5487
}
5588
&:visited {
56-
color: var(--accent-color-faded);
89+
color: var(--accent-color);
90+
}
91+
&:hover {
92+
color: var(--accent-color-lighter);
93+
text-decoration: underline var(--accent-color-lighter) var(--border-width);
5794
}
5895
}
59-
60-
footer {
61-
text-align: center;
62-
}
63-
64-
dialog {
65-
background-color: var(--background);
66-
border: var(--border-width) solid var(--background-above);
67-
color: inherit;
68-
max-width: 25vw;
69-
}

‎widgets.css‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
flex-grow: 1;
1010
gap: 1rem;
1111
padding: 1rem;
12+
background: var(--background);
1213

1314
.search-filters {
1415
width: 25%;
@@ -23,6 +24,10 @@
2324
display: flex;
2425
flex-direction: column;
2526
gap: 1rem;
27+
28+
/* scrolling */
29+
overflow-y: auto;
30+
scrollbar-color: var(--background-above-above) var(--background-below);
2631
}
2732

2833
.search-result-list {
@@ -71,7 +76,7 @@
7176
color: var(--accent-color);
7277
}
7378
.-stats-text {
74-
color: var(--darker-text-color);
79+
color: var(--text-color-dark);
7580
font-size: smaller;
7681
}
7782
.-by {
@@ -158,4 +163,36 @@ button {
158163
border-bottom-color: var(--accent-color);
159164
margin-top: calc(var(--button-height) - var(--border-width));
160165
}
166+
}
167+
168+
input[type="checkbox"] {
169+
appearance: none;
170+
margin: 0;
171+
vertical-align: bottom;
172+
width: 1em;
173+
height: 1em;
174+
border: var(--border-width) solid var(--background-above);
175+
background-color: var(--background-below);
176+
box-sizing: content-box;
177+
display: inline-block;
178+
cursor: pointer;
179+
position: relative;
180+
bottom: -0.1em;
181+
182+
padding: calc(var(--border-width) * 2.5);
183+
184+
&:before {
185+
content: "";
186+
display: block;
187+
position: absolute;
188+
width: 1em;
189+
height: 1em;
190+
background: transparent;
191+
overflow: hidden;
192+
transition: all var(--ease-out-circ) 0.25s;
193+
}
194+
195+
&:checked:before {
196+
background: var(--accent-color);
197+
}
161198
}

0 commit comments

Comments
 (0)