Merge branch 'unstable' into codex/refactor-svg-logos-to-use-currentcolor

This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-10-12 20:32:19 -04:00
commit 987911d9d6
20 files changed
+1565 -1098

No files matched your search

+6 -13
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="blog-html">
<head>
<!-- Configure with your npub/nprofile -->
<meta
@@ -40,7 +40,6 @@
<meta name="robots" content="index,follow" />
<title>bitvid Blog</title>
<link rel="stylesheet" href="./css/tailwind.generated.css" />
<link rel="stylesheet" href="./css/blog.css" />
<script src="./js/tracking.js" defer></script>
<script type="module" crossorigin>
var pv = Object.defineProperty;
@@ -29604,7 +29603,7 @@ svg {
}, 1);
};
const wu = document.createElement("div");
(wu.style.zIndex = "90000"), document.body.appendChild(wu);
wu.classList.add("blog-widget-shadow-host"), document.body.appendChild(wu);
const mu = document.createElement("div");
mu.id = "wnj";
const $h = document.createElement("style");
@@ -29624,21 +29623,15 @@ svg {
},
});
if (!((o = Ko.wnjParams) != null && o.disableOverflowFix)) {
var Th = document.createElement("style"),
D1 = `
html, body {
overflow: auto;
height: 100%;
}
`;
(Th.innerHTML = D1), document.head.appendChild(Th);
document.documentElement.classList.add("blog-widget-overflow-fix");
document.body.classList.add("blog-widget-overflow-fix");
}
})();
const i$ = wv({ __proto__: null, default: dg }, [dg]);
</script>
</head>
<body>
<div id="app"></div>
<body class="blog-body">
<div id="app" class="blog-app-root"></div>
<script>
window.wnjParams = {
position: "bottom",
-804
View File
@@ -1,804 +0,0 @@
@import "./tokens.css";
html {
font-size: 20px;
}
@media only screen and (max-width: 768px) {
html {
font-size: 18px;
}
}
body {
margin: 0;
padding: 0;
}
html.dark body {
background-color: var(--color-text-strong);
color: var(--color-blog-gray-220);
}
#app {
box-sizing: border-box;
width: 80%;
max-width: 760px;
margin: 2rem auto;
font-family: Arial, Helvetica, sans-serif;
color: var(--color-text-strong);
}
@media only screen and (max-width: 768px) {
#app {
width: 100%;
padding: 0 1rem;
max-width: unset;
}
}
html.dark #app {
background-color: var(--color-text-strong);
color: var(--color-blog-gray-170);
}
a,
a:visited {
color: var(--color-text-strong);
}
html.dark a,
html.dark a:visited {
color: var(--color-blog-neutral-100);
}
ol,
ul {
padding-left: 1rem;
margin: 0;
}
ol li,
ul li {
margin-bottom: 1rem;
}
blockquote {
margin: 0;
padding-left: 1rem;
border-left: 8px solid var(--color-blog-gray-170);
}
code {
font-size: 0.9rem;
background-color: var(--color-blog-neutral-120);
}
pre code {
overflow: scroll;
display: block;
padding: 1rem 0.5rem;
}
.unfinished-setup {
width: 80%;
margin: 0 auto;
text-align: center;
}
.header.home h1 {
font-size: 3rem;
}
.header .external-link {
text-align: right;
margin-top: -1rem;
font-size: 0.8em;
color: var(--color-blog-gray-220);
}
@media only screen and (max-width: 768px) {
.header .external-link {
margin-bottom: 1rem;
margin-right: 2.5rem;
}
}
.header .external-link a {
text-decoration: underline;
color: var(--color-blog-gray-220);
}
.header .picture-container {
position: relative;
display: inline-block;
width: 2.5rem;
height: 2.5rem;
overflow: hidden;
border-radius: 50%;
margin-bottom: -0.25rem;
}
.header .picture-container img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
clip-path: circle(50%);
}
.header.note .picture-container {
width: 1.5rem;
height: 1.5rem;
margin-bottom: -0.4rem;
}
.header a {
text-decoration: none;
}
.header a span {
text-decoration: underline;
}
html.dark .header a:visited {
color: var(--color-blog-gray-220);
}
html.dark .header .external-link,
html.dark .header .external-link a {
color: var(--color-blog-gray-440);
}
.topic-wrapper {
margin-bottom: 1.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
row-gap: 1rem;
}
.topic-wrapper div {
display: inline-grid;
margin-right: 1rem;
}
.topic-wrapper div a {
padding: 0.4rem 1rem;
background-color: var(--color-blog-gray-190);
text-decoration: none;
border-radius: 4px;
}
.topic-wrapper div a:hover {
background-color: var(--color-blog-gray-170);
}
.topic-wrapper div a.selected {
background-color: var(--color-text-strong);
color: var(--color-blog-neutral-100);
}
html.dark .topic-wrapper div a {
background-color: var(--color-blog-gray-440);
color: var(--color-text-strong);
}
html.dark .topic-wrapper div a:hover {
background-color: var(--color-blog-neutral-100);
}
html.dark .topic-wrapper div a.selected {
background-color: var(--color-blog-gray-220);
}
.externalLink {
display: block;
text-align: right;
margin-top: -1rem;
font-size: 0.8em;
color: var(--color-blog-gray-220);
}
.externalLink a {
color: var(--color-blog-gray-220);
}
.about {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 8px solid var(--color-blog-gray-170);
}
html.dark .about {
border-bottom: 8px solid var(--color-card);
}
.separator {
margin-bottom: 2rem;
border-bottom: 8px solid var(--color-blog-gray-170);
}
html.dark .separator {
border-bottom: 8px solid var(--color-card);
}
.top-notes {
display: flex;
color: var(--color-blog-gray-440);
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
width: 100%;
margin-bottom: 1rem;
padding-bottom: 2rem;
border-bottom: 8px solid var(--color-blog-neutral-100);
}
@media only screen and (max-width: 768px) {
.top-notes {
display: block;
}
}
@media only screen and (max-width: 768px) {
.top-notes {
padding-bottom: 0rem;
}
}
.top-notes .note {
flex: 1 1 calc(50% - 2rem);
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.top-notes .note {
margin-bottom: 2rem;
}
}
.top-notes .note a {
text-decoration: none;
}
.top-notes .note img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 0.5rem;
border-radius: 4px;
}
.top-notes .note .title {
display: block;
margin-bottom: 0.4rem;
font-size: 1.1rem;
font-weight: bolder;
}
.top-notes .note .summary {
margin-bottom: 0.4rem;
font-size: 0.9rem;
}
.top-notes .note .date {
font-size: 0.8rem;
color: var(--color-blog-gray-275);
}
html.dark .top-notes {
color: var(--color-blog-gray-220);
border-bottom: 8px solid var(--color-card);
}
.short-notes {
border-bottom: 8px solid var(--color-blog-neutral-100);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.short-notes .splide__slide {
font-size: 0.9rem;
overflow-wrap: break-word;
}
.short-notes .splide__slide a {
text-decoration: none;
}
.short-notes .splide__slide .date {
font-size: 0.8rem;
color: var(--color-blog-gray-275);
margin-bottom: 0.3rem;
}
.short-notes .splide__arrow--prev {
left: -3em;
}
.short-notes .splide__arrow--next {
right: -3em;
}
@media only screen and (max-width: 768px) {
.short-notes .splide__arrow--prev,
.short-notes .splide__arrow--next {
display: none;
}
}
.short-notes .splide__arrow {
background: none;
}
.short-notes .splide__arrow svg {
fill: var(--color-blog-gray-275);
}
html.dark .short-notes {
border-bottom: 8px solid var(--color-card);
}
html.dark .short-notes a {
color: var(--color-blog-gray-220);
}
.listing-notes {
margin-top: 1rem;
color: var(--color-blog-gray-440);
}
.listing-notes.short-feed-full li {
margin-bottom: 2rem;
}
.listing-notes.short-feed-full .summary {
color: var(--color-text-strong);
}
.listing-notes ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.listing-notes ul li {
margin-bottom: 1rem;
}
.listing-notes ul li h2 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.listing-notes ul li h2 a {
display: block;
font-size: 1.1rem;
}
.listing-notes ul li .summary {
margin-bottom: 0.4rem;
overflow-wrap: break-word;
}
.listing-notes ul li .summary p {
margin: 0;
}
.listing-notes ul li .summary img {
display: block;
margin: 2rem auto;
max-width: 100%;
border-radius: 4px;
}
.listing-notes ul li .summary video {
width: 100%;
margin: 2rem auto;
}
.listing-notes ul li .summary audio {
width: 100%;
margin: 2rem auto;
}
.listing-notes ul li .date {
font-size: 0.8rem;
color: var(--color-blog-gray-275);
}
html.dark .listing-notes {
color: var(--color-blog-gray-220);
}
html.dark .listing-notes.short-feed-full .summary {
color: var(--color-white);
}
h1 {
font-size: 2rem;
line-height: 0.9;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
h1 {
font-size: 1.6rem;
}
}
.note-wrapper {
position: relative;
margin-top: 2rem;
overflow-wrap: break-word;
}
.note-wrapper h1,
.note-wrapper h2,
.note-wrapper h3 {
margin-top: 1.4rem;
margin-bottom: 0.6rem;
}
.note-wrapper h1:first-of-type {
margin-top: 0rem;
}
.note-wrapper .content {
margin-top: 1.5rem;
}
.note-wrapper p {
line-height: 1.3rem;
margin-top: 0rem;
}
.note-wrapper .date {
display: block;
margin-bottom: 0.5rem;
font-size: 0.8rem;
color: var(--color-blog-gray-275);
}
.note-wrapper img {
display: block;
margin: 2rem auto;
max-width: 100%;
border-radius: 4px;
}
.note-wrapper img.note-banner {
margin: 2.5rem auto 3.5rem;
transform: scale(1.1);
}
.note-wrapper video {
width: 100%;
margin: 2rem auto;
}
.note-wrapper audio {
width: 100%;
margin: 2rem auto;
}
.footer {
margin-top: 4rem;
padding-top: 2rem;
margin-bottom: 2rem;
border-top: 8px solid var(--color-blog-gray-170);
font-size: 0.8rem;
text-align: center;
color: var(--color-blog-gray-220);
}
.footer a {
color: var(--color-blog-gray-220);
}
html.dark .footer {
border-top: 8px solid var(--color-card);
color: var(--color-blog-gray-440);
}
html.dark .footer a,
html.dark .footer a:visited {
color: var(--color-blog-gray-440);
}
zap-threads {
font-size: 0.9rem;
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid var(--color-blog-gray-300);
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
@keyframes splide-loading {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb > .splide__list {
display: block;
}
.splide__arrow {
-ms-flex-align: center;
align-items: center;
background: var(--color-blog-gray-210);
border: 0;
border-radius: 50%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
height: 2em;
-ms-flex-pack: center;
justify-content: center;
opacity: 0.7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1;
}
.splide__arrow svg {
fill: var(--color-black);
height: 1.2em;
width: 1.2em;
}
.splide__arrow:hover:not(:disabled) {
opacity: 0.9;
}
.splide__arrow:disabled {
opacity: 0.3;
}
.splide__arrow:focus-visible {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide__arrow--prev {
left: 1em;
}
.splide__arrow--prev svg {
transform: scaleX(-1);
}
.splide__arrow--next {
right: 1em;
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide__pagination {
bottom: 0.5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1;
}
.splide__pagination__page {
background: var(--color-blog-gray-210);
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: 0.7;
padding: 0;
position: relative;
transition: transform 0.2s linear;
width: 8px;
}
.splide__pagination__page.is-active {
background: var(--color-white);
transform: scale(1.4);
z-index: 1;
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: 0.9;
}
.splide__pagination__page:focus-visible {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide__progress__bar {
background: var(--color-blog-gray-210);
height: 3px;
}
.splide__slide {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.splide__slide:focus {
outline: 0;
}
@supports (outline-offset: -3px) {
.splide__slide:focus-visible {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide__slide:focus-visible {
border: 3px solid var(--color-blog-sky-500);
}
}
@supports (outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide.is-focus-in .splide__slide:focus {
border: 3px solid var(--color-blog-sky-500);
}
.splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
border-color: var(--color-blog-sky-500);
}
}
.splide__toggle {
cursor: pointer;
}
.splide__toggle:focus-visible {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid var(--color-blog-sky-500);
outline-offset: 3px;
}
.splide__track--nav > .splide__list > .splide__slide {
border: 3px solid transparent;
cursor: pointer;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid var(--color-black);
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em;
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1);
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto;
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1);
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%);
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em;
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg);
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto;
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg);
}
.splide__pagination--ttb {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
left: auto;
padding: 1em 0;
right: 0.5em;
top: 0;
}
.loader-container.svelte-181fgen {
display: flex;
align-items: center;
justify-content: center;
}
.loader.svelte-181fgen {
display: inline-block;
width: 92px;
height: 92px;
opacity: 0;
animation:
svelte-181fgen-fade-in 0.5s 0.4s forwards,
svelte-181fgen-loader-animation 2s linear infinite 0.4s;
}
.loader.svelte-181fgen:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid var(--color-blog-gray-275);
border-color: var(--color-blog-gray-275) transparent
var(--color-blog-gray-275) transparent;
animation: svelte-181fgen-loader-animation 2s linear infinite;
}
@keyframes svelte-181fgen-loader-animation {
0% {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes svelte-181fgen-fade-in {
to {
opacity: 1;
}
}
html.dark .loader.svelte-181fgen:after {
border: 6px solid var(--color-card);
border-color: var(--color-card) transparent var(--color-card) transparent;
}
#theme-toggle.svelte-bxrhh.svelte-bxrhh {
display: none;
}
#theme-toggle.svelte-bxrhh + label.svelte-bxrhh {
display: inline-block;
cursor: pointer;
height: 1rem;
width: 1rem;
position: absolute;
top: 1rem;
right: 3rem;
border-radius: 9px;
transition-duration: 0.3s;
content: "";
}
@media only screen and (max-width: 768px) {
#theme-toggle.svelte-bxrhh + label.svelte-bxrhh {
right: 1rem;
}
}
#theme-toggle.svelte-bxrhh:not(:checked) + label.svelte-bxrhh {
background-color: var(--color-blog-gray-180);
}
#theme-toggle.svelte-bxrhh:checked + label.svelte-bxrhh {
background-color: transparent;
box-shadow: inset -6px -6px 1px 1px var(--color-card);
}
.ztr-nowrap {
white-space: nowrap;
}
-111
View File
@@ -1,111 +0,0 @@
/* markdown.css */
/*
Give the markdown container a standard text color
that is easy to read on a white background
*/
#markdown-container {
color: var(--color-text-strong);
line-height: 1.6;
/* Padding & border radius come from your inline Tailwind classes */
}
/* Headings */
#markdown-container h1 {
font-size: 1.875rem; /* ~ text-2xl in Tailwind */
font-weight: 700;
margin-bottom: 1rem;
margin-top: 0.5rem;
color: var(--color-text-strong);
}
#markdown-container h2 {
font-size: 1.5rem; /* ~ text-xl */
font-weight: 700;
margin-bottom: 0.75rem;
margin-top: 1.25rem;
color: var(--color-text-strong);
}
#markdown-container h3 {
font-size: 1.25rem; /* ~ text-lg */
font-weight: 600;
margin-bottom: 0.75rem;
margin-top: 1rem;
}
#markdown-container h4,
#markdown-container h5,
#markdown-container h6 {
font-weight: 600;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
/* Paragraphs */
#markdown-container p {
margin-bottom: 1rem;
}
/* Lists */
#markdown-container ul,
#markdown-container ol {
margin-left: 1.25rem;
margin-bottom: 1rem;
}
#markdown-container li {
margin-bottom: 0.5rem;
}
/* Blockquotes */
#markdown-container blockquote {
border-left: 4px solid var(--color-border-subtle);
padding-left: 1rem;
margin: 1rem 0;
color: var(--color-muted);
}
/* Inline code */
#markdown-container code {
background-color: var(--color-page-alt);
color: var(--color-secondary);
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 0.875rem;
}
/* Code blocks */
#markdown-container pre {
background-color: var(--color-page-alt);
color: var(--color-text-strong);
padding: 1rem;
border-radius: 0.25rem;
overflow-x: auto;
margin-bottom: 1rem;
}
/* Links */
#markdown-container a {
color: var(--color-primary);
text-decoration: none;
}
#markdown-container a:hover {
text-decoration: underline;
}
/* Horizontal Rule */
#markdown-container hr {
border: 0;
border-top: 1px solid var(--color-border-subtle);
margin: 2rem 0;
}
/* Images */
#markdown-container img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
+1 -1
View File
@@ -1,3 +1,3 @@
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--blog-embed-height:100rem;--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--colLine truncated
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}header{margin-bottom:2rem;padding:1rem 0;display:flex;justify-content:flex-start}header img{height:6rem;width:auto;max-width:none}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--Line truncated
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}header{margin-bottom:2rem;padding:1rem 0;display:flex;justify-content:flex-start}header img{height:6rem;width:auto;max-width:none}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--Line truncated
File diff suppressed because it is too large. Load diff
+1 -1
View File
@@ -323,7 +323,7 @@ Angular templates under `torrent/views/` should follow the refreshed structure:
- Wrap primary sections in `.card` and layer Tailwind utilities for layout (`grid`, `gap-xl`, `overflow-auto`).
- Use `.input`, `.select`, `.btn`, and `.btn-ghost` (with `data-variant="critical"` for destructive actions) instead of legacy `.u-full-width`, `.button`, or `.button-danger` classes.
- Prefer token-backed utilities for spacing and typography (`px-6`, `py-6`, `text-muted`) over ad-hoc CSS.
- Reuse the `.spinner-overlay` markup for async states so overlays stay consistent with the new palette.
- Reuse the fixed overlay spinner pattern (`fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md` plus an `animate-spin text-info-strong` SVG) for async states so overlays stay consistent with the new palette.
When adding new torrent affordances, mirror the existing markup: inline 24×24 SVG strokes at 2px, `.focus-ring` on interactive anchors, and `.bv-stack` for vertical rhythm. This keeps the beacon aligned with the design system without reintroducing the deprecated Skeleton grid.
-1
View File
@@ -56,7 +56,6 @@
-->
<script src="js/tracking.js?v=2024.10.29" defer></script>
<link href="css/tailwind.generated.css?v=2024.10.29" rel="stylesheet" />
<link href="css/markdown.css?v=2024.10.29" rel="stylesheet" />
</head>
<body class="sidebar-collapsed" data-ds="new">
<!--
+28
View File
@@ -10,6 +10,7 @@
"license": "GPL-3.0-or-later",
"devDependencies": {
"@playwright/test": "^1.56.0",
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.19",
"cross-env": "^7.0.3",
"jsdom": "^24.0.0",
@@ -506,6 +507,33 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.19",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/agent-base": {
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+1
View File
@@ -15,6 +15,7 @@
"test:unit": "node scripts/run-unit-tests.mjs"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.15",
"@playwright/test": "^1.56.0",
"autoprefixer": "^10.4.19",
"cross-env": "^7.0.3",
+174 -4
View File
@@ -1,10 +1,14 @@
const typography = require("@tailwindcss/typography");
module.exports = {
content: [
"./index.html",
"./blog.html",
"./components/**/*.html",
"./views/**/*.html",
"./js/**/*.js"
"./js/**/*.js",
"./torrent/**/*.html",
"./torrent/**/*.js"
],
theme: {
extend: {
@@ -43,6 +47,7 @@ module.exports = {
translucent: "var(--color-border-translucent)",
"translucent-strong": "var(--color-border-translucent-strong)",
"translucent-bright": "var(--color-border-translucent-bright)",
"translucent-medium": "var(--color-border-translucent-medium)",
"translucent-stronger": "var(--color-border-translucent-stronger)",
"translucent-strongest": "var(--color-border-translucent-strongest)",
"translucent-glow": "var(--color-border-translucent-glow)",
@@ -82,7 +87,53 @@ module.exports = {
700: "var(--color-neutral-700)"
},
white: "var(--color-white)",
black: "var(--color-black)"
black: "var(--color-black)",
blog: {
transparent: "var(--color-blog-transparent)",
"cyan-500": "var(--color-blog-cyan-500)",
"sky-500": "var(--color-blog-sky-500)",
"teal-600": "var(--color-blog-teal-600)",
"green-800": "var(--color-blog-green-800)",
"green-700": "var(--color-blog-green-700)",
"teal-700": "var(--color-blog-teal-700)",
"gray-900": "var(--color-blog-gray-900)",
"coffee-900": "var(--color-blog-coffee-900)",
"green-500": "var(--color-blog-green-500)",
"gray-800": "var(--color-blog-gray-800)",
"gray-700": "var(--color-blog-gray-700)",
"teal-accent": "var(--color-blog-teal-accent)",
"gray-650": "var(--color-blog-gray-650)",
"brown-700": "var(--color-blog-brown-700)",
"purple-900": "var(--color-blog-purple-900)",
"gray-500": "var(--color-blog-gray-500)",
"gray-450": "var(--color-blog-gray-450)",
"gray-440": "var(--color-blog-gray-440)",
"brown-500": "var(--color-blog-brown-500)",
"rust-700": "var(--color-blog-rust-700)",
"purple-700": "var(--color-blog-purple-700)",
"purple-accent": "var(--color-blog-purple-accent)",
"purple-muted": "var(--color-blog-purple-muted)",
"gray-300": "var(--color-blog-gray-300)",
"purple-500": "var(--color-blog-purple-500)",
"gray-275": "var(--color-blog-gray-275)",
"red-600": "var(--color-blog-red-600)",
"rust-600": "var(--color-blog-rust-600)",
error: "var(--color-blog-error)",
"gray-220": "var(--color-blog-gray-220)",
"gray-210": "var(--color-blog-gray-210)",
"gray-200": "var(--color-blog-gray-200)",
"amber-500": "var(--color-blog-amber-500)",
"gray-190": "var(--color-blog-gray-190)",
"orange-600": "var(--color-blog-orange-600)",
"gray-180": "var(--color-blog-gray-180)",
"gray-170": "var(--color-blog-gray-170)",
"red-500": "var(--color-blog-red-500)",
"amber-400": "var(--color-blog-amber-400)",
"neutral-100": "var(--color-blog-neutral-100)",
"neutral-120": "var(--color-blog-neutral-120)",
"orange-500": "var(--color-blog-orange-500)",
"neutral-50": "var(--color-blog-neutral-50)"
}
},
borderRadius: {
sm: "var(--radius-sm)",
@@ -135,8 +186,127 @@ module.exports = {
transitionTimingFunction: {
"ease-out": "var(--motion-ease-out)",
"ease-in-out": "var(--motion-ease-in-out)"
}
},
typography: (theme) => ({
DEFAULT: {
css: {
"--tw-prose-body": "var(--color-text-strong)",
"--tw-prose-headings": "var(--color-text-strong)",
"--tw-prose-links": "var(--color-primary)",
"--tw-prose-bold": "var(--color-text-strong)",
"--tw-prose-hr": "var(--color-border-subtle)",
"--tw-prose-quotes": "var(--color-muted)",
"--tw-prose-counters": "var(--color-text-strong)",
"--tw-prose-bullets": "var(--color-border-subtle)",
"--tw-prose-code": "var(--color-secondary)",
"--tw-prose-th-borders": "var(--color-border-subtle)",
"--tw-prose-td-borders": "var(--color-border-subtle)",
color: "var(--color-text-strong)",
lineHeight: "1.6",
maxWidth: "none",
fontFamily: theme("fontFamily.sans").join(", "),
"h1": {
fontWeight: theme("fontWeight.bold"),
marginTop: "0.5rem",
marginBottom: "1rem",
fontSize: theme("fontSize.2xl")[0]
},
"h2": {
fontWeight: theme("fontWeight.bold"),
marginTop: "1.25rem",
marginBottom: "0.75rem",
fontSize: theme("fontSize.xl")[0]
},
"h3": {
fontWeight: theme("fontWeight.semibold"),
marginTop: "1rem",
marginBottom: "0.75rem",
fontSize: theme("fontSize.lg")[0]
},
"h4, h5, h6": {
fontWeight: theme("fontWeight.semibold"),
marginTop: "0.75rem",
marginBottom: "0.5rem"
},
"p": {
marginTop: "0",
marginBottom: "1rem"
},
"ul, ol": {
marginTop: "0",
marginBottom: "1rem",
paddingLeft: "1.25rem"
},
"li": {
marginTop: "0.5rem",
marginBottom: "0.5rem"
},
"blockquote": {
borderLeftWidth: "4px",
borderLeftColor: "var(--color-border-subtle)",
paddingLeft: "1rem",
marginTop: "1rem",
marginBottom: "1rem",
color: "var(--color-muted)"
},
"code": {
backgroundColor: "var(--color-page-alt)",
color: "var(--color-secondary)",
padding: "0.2rem 0.4rem",
borderRadius: theme("borderRadius.md"),
fontFamily: theme("fontFamily.mono").join(", "),
fontSize: theme("fontSize.sm")[0],
fontWeight: theme("fontWeight.medium")
},
"code::before": {
content: "none"
},
"code::after": {
content: "none"
},
"pre": {
backgroundColor: "var(--color-page-alt)",
color: "var(--color-text-strong)",
padding: "1rem",
borderRadius: theme("borderRadius.md"),
overflowX: "auto",
marginTop: "0",
marginBottom: "1rem",
fontFamily: theme("fontFamily.mono").join(", "),
fontSize: theme("fontSize.sm")[0]
},
"pre code": {
backgroundColor: "transparent",
padding: "0",
borderRadius: "0",
fontWeight: "inherit",
color: "inherit"
},
"a": {
color: "var(--color-primary)",
textDecoration: "none",
fontWeight: theme("fontWeight.medium")
},
"a:hover": {
textDecoration: "underline"
},
"hr": {
borderColor: "var(--color-border-subtle)",
borderTopWidth: "1px",
marginTop: "2rem",
marginBottom: "2rem"
},
"img": {
marginTop: "0",
marginBottom: "1rem",
borderRadius: theme("borderRadius.md"),
maxWidth: "100%",
height: "auto"
}
}
}
})
}
},
plugins: []
plugins: [typography]
};
+42 -4
View File
@@ -12,6 +12,34 @@ const trackers = [
const torrentOpts = { announce: trackers };
const trackerOpts = { announce: trackers };
const applyDynamicStylesPromise = import("../js/ui/styleSystem.js")
.then((module) => module.applyDynamicStyles)
.catch((error) => {
console.warn("Failed to load style system utilities", error);
return null;
});
const dynamicStyleFallbackClasses = {
hiddenDownload: "torrent-download-anchor",
clipboard: "torrent-clipboard-textarea",
};
function applyElementStyles(element, styleObject, slotKey) {
if (!element) {
return;
}
if (slotKey && dynamicStyleFallbackClasses[slotKey]) {
element.classList.add(dynamicStyleFallbackClasses[slotKey]);
}
applyDynamicStylesPromise.then((applyStyles) => {
if (typeof applyStyles === "function") {
applyStyles(element, styleObject, { slot: slotKey });
}
});
}
// Simple debug logger.
function dbg(msg) {
console.log("[DEBUG]", msg);
@@ -193,7 +221,7 @@ app.controller("BTorrentCtrl", [
// Create an anchor to trigger the download.
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
applyElementStyles(a, { display: "none" }, "hiddenDownload");
a.href = blobUrl;
a.download = file.name;
// Append, click, remove, revoke.
@@ -225,8 +253,18 @@ app.controller("BTorrentCtrl", [
try {
const textarea = document.createElement("textarea");
textarea.value = magnetURI;
textarea.style.position = "fixed";
textarea.style.left = "-9999px";
applyElementStyles(
textarea,
{
position: "fixed",
top: "0",
left: "-9999px",
width: "0",
height: "0",
opacity: "0",
},
"clipboard",
);
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
@@ -247,7 +285,7 @@ app.controller("BTorrentCtrl", [
const fileName = torrent.fileName || `${torrent.name}.torrent`;
// Create a hidden <a> to force download of the .torrent file.
const a = document.createElement("a");
a.style.display = "none";
applyElementStyles(a, { display: "none" }, "hiddenDownload");
a.href = torrent.torrentFileBlobURL;
a.download = fileName;
document.body.appendChild(a);
+10 -16
View File
@@ -23,23 +23,14 @@
<!-- Local styles -->
<link rel="stylesheet" href="../css/tailwind.generated.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/matowens/ng-notify/dist/ng-notify.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/angular.ui-grid/3/ui-grid.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body class="bg-surface font-sans text-text" ng-controller="BTorrentCtrl" ng-cloak="">
<!-- Header with container -->
<header class="header-torrent">
<div class="header-torrent__inner">
<header class="border-b border-border-translucent-medium bg-surface">
<div class="mx-auto flex max-w-5xl items-center px-4 py-6 sm:px-6 lg:px-8">
<a
class="header-torrent__logo focus-ring"
class="focus-ring inline-flex items-center gap-3 rounded-full px-2 py-1.5 text-text transition-colors duration-fast ease-out hover:bg-panel-hover hover:text-text"
href="../index.html"
aria-label="Return to the bitvid home page"
>
@@ -86,15 +77,18 @@
<div id="view" ng-view></div>
<!-- Processing Spinner -->
<div class="spinner-overlay" ng-show="client.processing">
<div
class="fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md"
ng-show="client.processing"
>
<svg
class="spinner-overlay__icon"
class="h-12 w-12 animate-spin text-info-strong"
viewBox="0 0 24 24"
role="img"
aria-hidden="true"
>
<circle
class="spinner-overlay__track"
class="stroke-border-translucent opacity-40"
cx="12"
cy="12"
r="9"
@@ -102,7 +96,7 @@
stroke-width="2"
></circle>
<path
class="spinner-overlay__indicator"
class="stroke-current"
d="M21 12a9 9 0 0 0-9-9"
fill="none"
stroke-width="2"
-133
View File
@@ -1,133 +0,0 @@
@import "../css/tokens.css";
html,
body {
min-height: 100%;
}
body {
margin: 0;
font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
background-color: var(--color-surface);
color: var(--color-text);
line-height: var(--line-height-base, 1.5);
}
.header-torrent {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border-translucent-medium);
}
.header-torrent__inner {
margin: 0 auto;
max-width: 72rem;
padding: var(--space-lg) var(--space-md);
display: flex;
align-items: center;
}
.header-torrent__logo {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs);
border-radius: var(--radius-full);
color: var(--color-text);
text-decoration: none;
transition: color var(--motion-duration-fast, 120ms)
var(--motion-ease-out, ease-out),
background-color var(--motion-duration-fast, 120ms)
var(--motion-ease-out, ease-out);
}
.header-torrent__logo:hover,
.header-torrent__logo:focus-visible {
background-color: var(--color-panel-hover);
color: var(--color-text-strong);
}
.header-torrent__logo-image {
height: 3.5rem;
width: auto;
}
.spinner-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 60;
background-color: var(--color-overlay-muted, rgba(15, 23, 42, 0.35));
backdrop-filter: blur(6px);
}
.spinner-overlay__icon {
height: 3rem;
width: 3rem;
stroke: var(--color-info-strong);
animation: spinner-rotate
calc(var(--motion-duration-base, 160ms) * 6)
linear
infinite;
}
.spinner-overlay__track {
stroke: var(--color-border-translucent);
opacity: 0.35;
}
.spinner-overlay__indicator {
stroke: currentColor;
}
/* UI Grid overrides migrated from inline strings */
.ui-grid-measure {
font-size: 14px;
width: 1px;
height: 1px;
position: absolute;
top: -1000px;
overflow: scroll;
}
.ui-grid-pinned-placeholder {
width: 0;
}
.ui-grid-expandable-spacing {
float: left;
margin-top: 1px;
margin-bottom: 1px;
}
@keyframes spinner-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
display: none !important;
}
ng\:form {
display: block;
}
.ng-animate-shim {
visibility: hidden;
}
.ng-anchor {
position: absolute;
}
+7 -4
View File
@@ -261,15 +261,18 @@
</div>
<!-- Processing Spinner -->
<div class="spinner-overlay" ng-show="client.processing">
<div
class="fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md"
ng-show="client.processing"
>
<svg
class="spinner-overlay__icon"
class="h-12 w-12 animate-spin text-info-strong"
viewBox="0 0 24 24"
role="img"
aria-hidden="true"
>
<circle
class="spinner-overlay__track"
class="stroke-border-translucent opacity-40"
cx="12"
cy="12"
r="9"
@@ -277,7 +280,7 @@
stroke-width="2"
></circle>
<path
class="spinner-overlay__indicator"
class="stroke-current"
d="M21 12a9 9 0 0 0-9-9"
fill="none"
stroke-width="2"
+1 -1
View File
@@ -5,7 +5,7 @@
<h2 id="aboutHeading" class="text-2xl font-semibold text-text-strong">
About bitvid
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>
+1 -1
View File
@@ -8,7 +8,7 @@
>
Community Guidelines
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>
+1 -1
View File
@@ -8,7 +8,7 @@
>
Getting Started
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>
+1 -1
View File
@@ -5,7 +5,7 @@
<h2 id="ipnsHeading" class="text-2xl font-semibold text-text-strong">
IPNS Gateways
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>
+1 -1
View File
@@ -5,7 +5,7 @@
<h2 id="linksHeading" class="text-2xl font-semibold text-text-strong">
bitvid Links
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>
+1 -1
View File
@@ -5,7 +5,7 @@
<h2 id="roadmapHeading" class="text-2xl font-semibold text-text-strong">
Roadmap
</h2>
<div id="markdown-container" class="markdown-body">
<div id="markdown-container" class="markdown-prose">
<p class="text-muted-strong">Loading content...</p>
</div>
</div>