Skip to content

Commit 2fed9c2

Browse files
piratepirate
committed
ui tweaks
1 parent 9808e97 commit 2fed9c2

File tree

2 files changed

+233
-1
lines changed

2 files changed

+233
-1
lines changed

‎docs/index.html‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
--warm: #c96f2d;
2929
--shadow: 0 20px 60px rgba(33, 36, 29, 0.12);
3030
--radius: 28px;
31+
--hero-badge-height: 64px;
3132
}
3233

3334
* {
@@ -96,6 +97,12 @@
9697
flex-wrap: wrap;
9798
}
9899

100+
.hero-actions {
101+
display: flex;
102+
justify-content: flex-end;
103+
flex: 1 1 220px;
104+
}
105+
99106
.eyebrow {
100107
display: inline-flex;
101108
align-items: center;
@@ -138,6 +145,7 @@
138145

139146
.stat {
140147
min-width: 140px;
148+
min-height: var(--hero-badge-height);
141149
padding: 14px 16px;
142150
border: 1px solid var(--line);
143151
border-radius: 20px;
@@ -155,6 +163,97 @@
155163
color: var(--muted);
156164
}
157165

166+
.stat-link {
167+
display: block;
168+
min-width: 140px;
169+
text-decoration: none;
170+
color: inherit;
171+
}
172+
173+
.stat-link:hover {
174+
transform: translateY(-1px);
175+
}
176+
177+
.stat-link--cta {
178+
position: relative;
179+
overflow: hidden;
180+
background:
181+
linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)),
182+
rgba(255, 253, 248, 0.9);
183+
box-shadow:
184+
0 0 0 1px rgba(201, 111, 45, 0.14),
185+
0 10px 28px rgba(22, 35, 31, 0.08),
186+
0 0 24px rgba(201, 111, 45, 0.12);
187+
animation: cta-glow-pulse 2.8s ease-in-out infinite;
188+
}
189+
190+
.stat-link--cta::before {
191+
content: "";
192+
position: absolute;
193+
top: -35%;
194+
bottom: -35%;
195+
left: -40%;
196+
width: 38%;
197+
border-radius: 24px;
198+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
199+
transform: translateX(-180%) rotate(18deg);
200+
animation: cta-sheen 3.4s ease-in-out infinite;
201+
pointer-events: none;
202+
}
203+
204+
.stat-link--cta strong,
205+
.stat-link--cta span {
206+
position: relative;
207+
z-index: 1;
208+
}
209+
210+
.stat-link--cta strong {
211+
display: flex;
212+
align-items: center;
213+
gap: 8px;
214+
}
215+
216+
.cta-plus {
217+
display: inline-grid;
218+
place-items: center;
219+
width: 20px;
220+
height: 20px;
221+
border-radius: 999px;
222+
background: rgba(201, 111, 45, 0.14);
223+
color: var(--warm);
224+
font-family: "IBM Plex Mono", monospace;
225+
font-size: 0.95rem;
226+
line-height: 1;
227+
}
228+
229+
@keyframes cta-sheen {
230+
0% {
231+
transform: translateX(-180%) rotate(18deg);
232+
}
233+
55% {
234+
transform: translateX(430%) rotate(18deg);
235+
}
236+
100% {
237+
transform: translateX(430%) rotate(18deg);
238+
}
239+
}
240+
241+
@keyframes cta-glow-pulse {
242+
0%,
243+
100% {
244+
box-shadow:
245+
0 0 0 1px rgba(201, 111, 45, 0.14),
246+
0 10px 28px rgba(22, 35, 31, 0.08),
247+
0 0 24px rgba(201, 111, 45, 0.12);
248+
}
249+
50% {
250+
box-shadow:
251+
0 0 0 1px rgba(201, 111, 45, 0.2),
252+
0 14px 34px rgba(22, 35, 31, 0.1),
253+
0 0 34px rgba(201, 111, 45, 0.2);
254+
}
255+
}
256+
158257
.toolbar {
159258
display: grid;
160259
grid-template-columns: minmax(0, 1fr) auto;
@@ -423,6 +522,12 @@
423522
font-size: 0.9rem;
424523
}
425524

525+
.button-link--hero {
526+
border-color: var(--line);
527+
background: rgba(255, 253, 248, 0.9);
528+
box-shadow: none;
529+
}
530+
426531
.section-title {
427532
margin: 20px 0 10px;
428533
font-size: 0.82rem;
@@ -626,6 +731,17 @@ <h1>ArchiveBox Plugin Gallery</h1>
626731
Browse the plugins that ArchiveBox, abx-dl, and other tools in the abx-ecosystem provide to extract content from websites.
627732
</p>
628733
</div>
734+
<div class="hero-actions">
735+
<a
736+
class="stat stat-link stat-link--cta button-link--hero"
737+
href="https://github.com/ArchiveBox/abx-plugins/pulls"
738+
target="_blank"
739+
rel="noreferrer"
740+
>
741+
<strong><span class="cta-plus">+</span> Submit</strong>
742+
<span>a new plugin</span>
743+
</a>
744+
</div>
629745
<div class="hero-meta">
630746
<div class="stat">
631747
<strong>52</strong>
@@ -8080,7 +8196,7 @@ <h3 class="section-title">Config Options</h3>
80808196

80818197
<footer class="page-footer">
80828198
<span>Generated from <a href="https://github.com/ArchiveBox/abx-plugins" target="_blank" rel="noreferrer">ArchiveBox/abx-plugins</a> at ref <code>main</code>.</span>
8083-
<span>Updated 2026-03-15 08:12 UTC</span>
8199+
<span>Updated 2026-03-15 08:21 UTC</span>
80848200
</footer>
80858201
</div>
80868202

‎docs/index.html.j2‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
--warm: #c96f2d;
2929
--shadow: 0 20px 60px rgba(33, 36, 29, 0.12);
3030
--radius: 28px;
31+
--hero-badge-height: 64px;
3132
}
3233
3334
* {
@@ -96,6 +97,12 @@
9697
flex-wrap: wrap;
9798
}
9899
100+
.hero-actions {
101+
display: flex;
102+
justify-content: flex-end;
103+
flex: 1 1 220px;
104+
}
105+
99106
.eyebrow {
100107
display: inline-flex;
101108
align-items: center;
@@ -138,6 +145,7 @@
138145
139146
.stat {
140147
min-width: 140px;
148+
min-height: var(--hero-badge-height);
141149
padding: 14px 16px;
142150
border: 1px solid var(--line);
143151
border-radius: 20px;
@@ -155,6 +163,97 @@
155163
color: var(--muted);
156164
}
157165
166+
.stat-link {
167+
display: block;
168+
min-width: 140px;
169+
text-decoration: none;
170+
color: inherit;
171+
}
172+
173+
.stat-link:hover {
174+
transform: translateY(-1px);
175+
}
176+
177+
.stat-link--cta {
178+
position: relative;
179+
overflow: hidden;
180+
background:
181+
linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(244, 251, 250, 0.92)),
182+
rgba(255, 253, 248, 0.9);
183+
box-shadow:
184+
0 0 0 1px rgba(201, 111, 45, 0.14),
185+
0 10px 28px rgba(22, 35, 31, 0.08),
186+
0 0 24px rgba(201, 111, 45, 0.12);
187+
animation: cta-glow-pulse 2.8s ease-in-out infinite;
188+
}
189+
190+
.stat-link--cta::before {
191+
content: "";
192+
position: absolute;
193+
top: -35%;
194+
bottom: -35%;
195+
left: -40%;
196+
width: 38%;
197+
border-radius: 24px;
198+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
199+
transform: translateX(-180%) rotate(18deg);
200+
animation: cta-sheen 3.4s ease-in-out infinite;
201+
pointer-events: none;
202+
}
203+
204+
.stat-link--cta strong,
205+
.stat-link--cta span {
206+
position: relative;
207+
z-index: 1;
208+
}
209+
210+
.stat-link--cta strong {
211+
display: flex;
212+
align-items: center;
213+
gap: 8px;
214+
}
215+
216+
.cta-plus {
217+
display: inline-grid;
218+
place-items: center;
219+
width: 20px;
220+
height: 20px;
221+
border-radius: 999px;
222+
background: rgba(201, 111, 45, 0.14);
223+
color: var(--warm);
224+
font-family: "IBM Plex Mono", monospace;
225+
font-size: 0.95rem;
226+
line-height: 1;
227+
}
228+
229+
@keyframes cta-sheen {
230+
0% {
231+
transform: translateX(-180%) rotate(18deg);
232+
}
233+
55% {
234+
transform: translateX(430%) rotate(18deg);
235+
}
236+
100% {
237+
transform: translateX(430%) rotate(18deg);
238+
}
239+
}
240+
241+
@keyframes cta-glow-pulse {
242+
0%,
243+
100% {
244+
box-shadow:
245+
0 0 0 1px rgba(201, 111, 45, 0.14),
246+
0 10px 28px rgba(22, 35, 31, 0.08),
247+
0 0 24px rgba(201, 111, 45, 0.12);
248+
}
249+
50% {
250+
box-shadow:
251+
0 0 0 1px rgba(201, 111, 45, 0.2),
252+
0 14px 34px rgba(22, 35, 31, 0.1),
253+
0 0 34px rgba(201, 111, 45, 0.2);
254+
}
255+
}
256+
158257
.toolbar {
159258
display: grid;
160259
grid-template-columns: minmax(0, 1fr) auto;
@@ -423,6 +522,12 @@
423522
font-size: 0.9rem;
424523
}
425524
525+
.button-link--hero {
526+
border-color: var(--line);
527+
background: rgba(255, 253, 248, 0.9);
528+
box-shadow: none;
529+
}
530+
426531
.section-title {
427532
margin: 20px 0 10px;
428533
font-size: 0.82rem;
@@ -626,6 +731,17 @@
626731
Browse the plugins that ArchiveBox, abx-dl, and other tools in the abx-ecosystem provide to extract content from websites.
627732
</p>
628733
</div>
734+
<div class="hero-actions">
735+
<a
736+
class="stat stat-link stat-link--cta button-link--hero"
737+
href="https://github.com/ArchiveBox/abx-plugins/pulls"
738+
target="_blank"
739+
rel="noreferrer"
740+
>
741+
<strong><span class="cta-plus">+</span> Submit</strong>
742+
<span>a new plugin</span>
743+
</a>
744+
</div>
629745
<div class="hero-meta">
630746
<div class="stat">
631747
<strong>{{ site.plugin_count }}</strong>

0 commit comments

Comments
 (0)