Commit

Author:

Hash:

Timestamp:

+130 -140 +/-6 browse

Kevin Schoon [me@kevinschoon.com]

f396c95f5b02a5e7588a91cb060f54f870a859a3

Tue, 13 May 2025 10:50:08 +0000 (6 months ago)

another around of style updates
1diff --git a/ayllu/templates/index.html b/ayllu/templates/index.html
2index 5bf09ae..ee406da 100644
3--- a/ayllu/templates/index.html
4+++ b/ayllu/templates/index.html
5 @@ -1,19 +1,14 @@
6+ {% import "macros.html" as macros %}
7 {% extends "base.html" %}
8 {% block content %}
9 <section id="index" class="raised">
10- <section class="flex-group">
11+ <section class="info-bar flex-group single">
12 <section>
13- <h2>Collections</h2>
14+ Collections
15+ </section>
16+ <section>
17+ {% call macros::rss_links(base.feed_icon, "/rss/firehose.xml", "/rss/1d.xml", "/rss/1w.xml", "/rss/1m.xml") %}
18 </section>
19- <section id="rss-links">
20- {{ base.feed_icon | safe }}
21- <span>
22- [<a href="/rss/firehose.xml">*</a>,
23- <a href="/rss/1d.xml">1d</a>,
24- <a href="/rss/1w.xml">1w</a>,
25- <a href="/rss/1m.xml">1m</a>]
26- </span>
27- </section>
28 </section>
29 <section class="scrollable raised">
30 {% for collection in collections %}
31 diff --git a/ayllu/templates/macros.html b/ayllu/templates/macros.html
32index 4d07b8c..b319996 100644
33--- a/ayllu/templates/macros.html
34+++ b/ayllu/templates/macros.html
35 @@ -14,3 +14,21 @@
36 {% endmacro navigation %}
37 {% macro commit_badge(commit, extended=false) %}
38 {% endmacro commit_badge %}
39+
40+ {% macro selectable_text(proto, text) %}
41+ <section class="selectable-text">
42+ <span class="protocol-badge">{{proto}}</span><span class="selectable" aria-label="{{ proto }} {{text}}">{{ text }}</span>
43+ </section>
44+ {% endmacro %}
45+
46+ {% macro rss_links(feed_icon, all, day, week, month) %}
47+ <section id="rss-links">
48+ <section> {{ feed_icon | safe }} </section>
49+ <section id="rss-link-items">
50+ [<a href="{{ all }}">*</a>,
51+ <a href="{{ day }}">1d</a>,
52+ <a href="{{ week }}">1w</a>,
53+ <a href="{{ month }}">1m</a>]
54+ </section>
55+ </section>
56+ {% endmacro %}
57 diff --git a/ayllu/templates/repo.html b/ayllu/templates/repo.html
58index 7798b07..da237e6 100644
59--- a/ayllu/templates/repo.html
60+++ b/ayllu/templates/repo.html
61 @@ -1,4 +1,5 @@
62 {% extends "base.html" %}
63+ {% import "macros.html" as macros %}
64 {% block content %}
65
66 <section>
67 @@ -21,23 +22,11 @@
68 {% if let Some(description) = description %}
69 <p><span><b>Description: </b>{{description | truncate(45)}}</span></p>
70 {% endif %}
71- <section id="rss-links">
72- {{ base.feed_icon | safe }}
73- <span> [<a href="{{ rss_link_all }}">*</a>,
74- <a href="{{ rss_link_1d }}">1d</a>,
75- <a href="{{ rss_link_1w }}">1w</a>,
76- <a href="{{ rss_link_1m }}">1m</a>] </span>
77- </section>
78-
79 </section>
80- <section id="clone-links">
81- <section class="clone-link">
82- <span><b>HTTP</b>:&nbsp</span><span class="url" aria-label="Repository URL">{{ http_clone_url }}</span>
83- </section>
84+ <section>
85+ {% call macros::selectable_text("http", http_clone_url) %}
86 {% if let Some(clone_url) = git_clone_url %}
87- <section class="clone-link">
88- <span><b>SSH</b>:&nbsp</span><span class="url" aria-label="Repository URL">{{ clone_url }}</span>
89- </section>
90+ {% call macros::selectable_text("ssh", clone_url) %}
91 {% endif %}
92 </section>
93 </section>
94 @@ -45,7 +34,14 @@
95
96
97 <section id="tree" class="raised">
98- <section class="info-bar">Browse</section>
99+ <section class="info-bar flex-group">
100+ <section>
101+ Repository
102+ </section>
103+ <section>
104+ {% call macros::rss_links(base.feed_icon, rss_link_all, rss_link_1d, rss_link_1w, rss_link_1m) %}
105+ </section>
106+ </section>
107 <section id="repo-details-panel" class="flex-group lower-half">
108 <section id="commit-summary">
109 {% if let Some(latest_commit) = latest_commit %}
110 @@ -55,9 +51,7 @@
111 <pre>{{ latest_commit.message }} </pre>
112 {% endif %}
113 </section>
114- <section id="ref-badge">
115- <span id="ref-badge">{{ refname }}</span>
116- </section>
117+ {% call macros::selectable_text("ref", refname) %}
118 </section>
119 <table class="data-table">
120 <thead>
121 diff --git a/ayllu/themes/base.css b/ayllu/themes/base.css
122index 32b9ab5..bb9f8a1 100644
123--- a/ayllu/themes/base.css
124+++ b/ayllu/themes/base.css
125 @@ -2,6 +2,10 @@
126 font-size: 100%;
127 }
128
129+ p {
130+ margin: 5px;
131+ }
132+
133 main {
134 margin: 0;
135 min-height: 90vh;
136 @@ -21,8 +25,8 @@ main {
137 white-space: nowrap;
138 }
139
140- section#log > section >.data-table > tbody > tr > td:first-child {
141- text-align:center;
142+ section#log > section > .data-table > tbody > tr > td:first-child {
143+ text-align: center;
144 }
145
146 a:visited {
147 @@ -68,7 +72,6 @@ span.hint {
148 text-decoration: underline;
149 }
150
151-
152 header {
153 margin-bottom: 1em;
154 }
155 @@ -77,16 +80,25 @@ section.info-bar {
156 margin-top: 8px;
157 border-radius: revert;
158 border-top: solid 2px;
159- border-left: solid 2px;
160- border-right: solid 2px;
161- border-bottom: none;
162- padding: 5px;
163+ border-left: solid 2px;
164+ border-right: solid 2px;
165+ border-bottom: none;
166+ padding: 5px;
167 font-weight: bold;
168 font-size: large;
169 font-family: monospace;
170 text-decoration: underline;
171 }
172
173+ section.info-bar.single {
174+ border-bottom: solid 2px;
175+ }
176+
177+ section.info-bar > section {
178+ align-content: center;
179+ justify-content: center;
180+ }
181+
182 section#code-viewer {
183 padding: 1em;
184 }
185 @@ -117,12 +129,12 @@ span#ref-badge::before {
186
187 section#rss-links {
188 display: flex;
189- align-items: center;
190 }
191
192- section#rss-links > span {
193- text-align: center;
194- float: right;
195+ section#rss-links > section#rss-link-items {
196+ display: flex;
197+ justify-content: flex-start;
198+ align-items: center;
199 }
200
201 section#readme > header {
202 @@ -130,7 +142,6 @@ section#readme > header {
203 }
204
205 section#readme {
206-
207 :is(dd, dt, h1, h2, h3, h4, h5, h6, li, p) {
208 max-inline-size: 70ch;
209 }
210 @@ -139,7 +150,6 @@ section#readme {
211 margin: 5px;
212 }
213
214-
215 :where(img) {
216 display: revert;
217 }
218 @@ -182,14 +192,6 @@ section#readme {
219 }
220 }
221
222- .dense {
223- line-height: 5px;
224- }
225-
226- section {
227- border-radius: 5px;
228- }
229-
230 section#index {
231 padding: 1em;
232 }
233 @@ -210,8 +212,8 @@ section#config-panel {
234 max-width: 400px;
235 }
236
237- section#config-panel >section {
238- padding: 1em;
239+ section#config-panel > section {
240+ padding: 1em;
241 }
242
243 section#config-panel > form > button {
244 @@ -228,37 +230,28 @@ section.flex-group {
245 justify-content: space-between;
246 }
247
248- section.clone-link {
249- display: flex;
250+ section.selectable-text {
251+ display: inline;
252 align-items: center;
253- justify-content: space-between;
254 width: auto;
255- padding: 8px 12px;
256 font-size: 14px;
257- line-height: 1.5;
258- border: none;
259- border-radius: 3px;
260 cursor: pointer;
261 text-decoration: none;
262 }
263
264- section.clone-link > .url {
265+ section.selectable-text > span.protocol-badge {
266+ font-variant: all-petite-caps;
267+ border-style: solid;
268+ border-width: 3px 3px 3px 3px;
269 padding: 2px;
270+ user-select: none;
271 }
272
273- section.clone-link {
274- border: solid 2px;
275- }
276-
277- section#clone-links > .clone-link {
278- margin: 5px;
279- }
280-
281- section.clone-link > .url {
282- -webkit-user-select: text;
283- -moz-user-select: text;
284- -ms-user-select: text;
285+ section.selectable-text > span.selectable {
286+ border-style: solid;
287+ border-width: 3px 3px 3px 0;
288 user-select: text;
289+ padding: 2px;
290 }
291
292 footer {
293 @@ -306,17 +299,14 @@ section.lower-half {
294 border-radius: unset;
295 }
296
297- section#blame-left > table {
298- font-family: var(--font-mono);
299- }
300-
301 section#tree {
302 table {
303 border-collapse: collapse;
304 border: solid 2px;
305 background: none;
306 white-space: nowrap;
307- font-family: var(--tree-font);
308+ font-family: monospace;
309+ font-size: 120%;
310 }
311
312 table :is(td, th) {
313 @@ -359,7 +349,7 @@ code.highlighted {
314 }
315
316 svg#emoji {
317- max-width: 40px;
318+ width: 30px;
319 }
320
321 .card {
322 @@ -371,12 +361,6 @@ li.active {
323 text-decoration: underline;
324 }
325
326-
327-
328- img.rss-icon-feed {
329- height: 4em;
330- }
331-
332 :where(td, th) {
333 padding: 5px;
334 }
335 diff --git a/ayllu/themes/catppuccin.css b/ayllu/themes/catppuccin.css
336index 7e3ba30..9f8cc76 100644
337--- a/ayllu/themes/catppuccin.css
338+++ b/ayllu/themes/catppuccin.css
339 @@ -81,10 +81,6 @@ nav .subnav {
340 background-color: var(--ctp-latte-mantle);
341 }
342
343- section.raised {
344- background-color: var(--ctp-latte-crust);
345- }
346-
347 .data-table thead {
348 color: var(--ctp-latte-surface0);
349 background-color: var(--ctp-latte-lavender);
350 @@ -98,25 +94,21 @@ section.raised {
351 background-color: var(--ctp-latte-surface1);
352 }
353
354- section#clone-links > .clone-link {
355- color: var(--ctp-latte-base);
356- border-color: var(--ctp-latte-overlay2);
357- background-color: var(--ctp-latte-lavender);
358+ section.selectable-text > span.selectable {
359+ color: var(--ctp-latte-text);
360+ border-color: var(--ctp-latte-lavender);
361+ background-color: var(--ctp-latte-mantle);
362 }
363
364- section#readme-header {
365- color: var(--ctp-latte-base);
366- background-color: var(--ctp-latte-lavender);
367+ section.selectable-text > span.protocol-badge {
368+ color: var(--ctp-latte-mantle);
369+ border-color: var(--ctp-latte-lavender);
370+ background-color: var(--ctp-latte-text);
371 }
372
373- span#ref-badge {
374- background-color: var(--ctp-latte-lavender);
375+ section#readme-header {
376 color: var(--ctp-latte-base);
377- border-color: var(--ctp-latte-overlay2);
378- }
379-
380- span#ref-badge::before {
381- background-color: var(--ctp-latte-green);
382+ background-color: var(--ctp-latte-lavender);
383 }
384
385 .positive {
386 @@ -135,6 +127,10 @@ section.info-bar {
387 border-color: var(--ctp-latte-lavender);
388 }
389
390+ section.info-bar.single {
391+ border-color: var(--ctp-latte-lavender);
392+ }
393+
394 section.lower-half {
395 border-color: var(--ctp-latte-lavender);
396 }
397 @@ -216,21 +212,20 @@ span.ts_addition {
398
399 @media (prefers-color-scheme: dark) {
400 a {
401- color: var(--ctp-mocha-blue);
402+ color: var(--ctp-mocha-lavender);
403 }
404
405 nav {
406 a {
407- color: var(--ctp-mocha-blue);
408 font-weight: bold;
409 font-size: large;
410 }
411- color: var(--ctp-mocha-green);
412- background-color: var(--ctp-mocha-crust);
413+ color: var(--ctp-mocha-lavender);
414+ background-color: var(--ctp-mocha-surface0);
415 }
416
417 nav .subnav {
418- background-color: var(--ctp-latte-mantle);
419+ background-color: var(--ctp-mocha-surface1);
420 }
421
422 body {
423 @@ -238,21 +233,13 @@ span.ts_addition {
424 background-color: var(--ctp-mocha-base);
425 }
426
427- section#clone-links > .clone-link {
428+ section.selectable-text > .selectable {
429 color: var(--ctp-mocha-base);
430 background-color: var(--ctp-mocha-lavender);
431 }
432
433- section.raised {
434- background-color: var(--ctp-mocha-surface1);
435- }
436-
437- section#readme-header {
438- background-color: var(--ctp-mocha-blue);
439- }
440-
441 .data-table {
442- color: var(--ctp-mocha-mauve);
443+ color: var(--ctp-mocha-text);
444 a {
445 color: var(--ctp-mocha-blue);
446 }
447 @@ -277,8 +264,8 @@ span.ts_addition {
448 }
449
450 section.info-bar {
451- background-color: var(--ctp-mocha-mauve);
452- color: var(--ctp-mocha-crust);
453+ background-color: var(--ctp-mocha-surface1);
454+ color: var(--ctp-mocha-text);
455 border-color: var(--ctp-mocha-mauve);
456 }
457
458 diff --git a/ayllu/themes/nord.css b/ayllu/themes/nord.css
459index 835edb8..c7379b9 100644
460--- a/ayllu/themes/nord.css
461+++ b/ayllu/themes/nord.css
462 @@ -45,10 +45,6 @@ nav.subnav {
463 background-color: var(--nord2);
464 }
465
466- section.raised {
467- background-color: var(--nord4);
468- }
469-
470 .data-table tbody tr:nth-child(odd) {
471 background-color: var(--nord5);
472 }
473 @@ -62,31 +58,36 @@ section#tree > table > thead {
474 background-color: var(--nord10);
475 }
476
477- section#clone-links > .clone-link {
478- color: var(--nord6);
479- background-color: var(--nord10);
480- }
481-
482- section#readme-header {
483- background-color: var(--nord7);
484+ section.selectable-text > span.text {
485+ color: var(--nord0);
486+ border-color: var(--nord10);
487+ background-color: var(--nord5);
488 }
489
490- span#ref-badge {
491- background-color: var(--nord8);
492+ section.selectable-text > span.protocol-badge {
493 color: var(--nord6);
494 border-color: var(--nord10);
495+ background-color: var(--nord0);
496 }
497
498- span#ref-badge::before {
499+ section#readme-header {
500 background-color: var(--nord7);
501 }
502
503+ section > a {
504+ color: var(--nord5);
505+ }
506+
507 section.info-bar {
508 background-color: var(--nord2);
509 color: var(--nord6);
510 border-color: var(--nord2);
511 }
512
513+ section.info-bar.single {
514+ border-color: var(--nord2);
515+ }
516+
517 .positive {
518 color: var(--nord7);
519 border-bottom: 2px solid var(--nord7);
520 @@ -193,12 +194,14 @@ span.ts_addition {
521 background-color: var(--nord3);
522 }
523
524- section#clone-links > .clone-link {
525- background-color: var(--nord10);
526+ section.selectable-text > span.text {
527+ border-color: var(--nord6);
528 }
529
530- section.raised {
531- background-color: var(--nord1);
532+ section.selectable-text > span.protocol-badge {
533+ background-color: var(--nord4);
534+ color: var(--nord0);
535+ border-color: var(--nord6);
536 }
537
538 section#readme-header {
539 @@ -232,8 +235,17 @@ span.ts_addition {
540 }
541
542 section.info-bar {
543- background-color: var(--nord4);
544- color: var(--nord2);
545+ background-color: var(--nord9);
546+ color: var(--nord5);
547+ border-color: var(--nord5);
548+ }
549+
550+ section.info-bar.single {
551 border-color: var(--nord5);
552+ border-bottom-color: var(--nord5);
553+ }
554+
555+ section > a {
556+ color: var(--nord5);
557 }
558 }