mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-29 17:02:28 +00:00
Merge pull request #467 from PR0M3TH3AN/codex/remove-legacy-styling-and-enforce-central-system
Centralize styling and remove inline CSS
This commit is contained in:
6 files changed
+887
-904
No files matched your search
@@ -40,6 +40,7 @@
|
||||
<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;
|
||||
@@ -20288,7 +20289,7 @@ svg {
|
||||
const QA = He("<div class=ztr-thread>"),
|
||||
eS = He("<li class=ztr-comment-action-reply><span>"),
|
||||
tS = He(
|
||||
"<div class=ztr-comment><div class=ztr-comment-body><div class=ztr-comment-info-wrapper><div class=ztr-comment-info><div class=ztr-comment-info-picture><img></div><ul class=ztr-comment-info-items><li class=ztr-comment-info-author><a target=_blank></a><span style=white-space:nowrap;><strong> <!>ed</strong> </span></li><li><a class=ztr-comment-info-dots></a></li></ul></div><ul class=ztr-comment-info-items></ul></div><div class=ztr-comment-text></div><div class=ztr-comment-text></div><ul class=ztr-comment-actions>"
|
||||
"<div class=ztr-comment><div class=ztr-comment-body><div class=ztr-comment-info-wrapper><div class=ztr-comment-info><div class=ztr-comment-info-picture><img></div><ul class=ztr-comment-info-items><li class=ztr-comment-info-author><a target=_blank></a><span class="ztr-nowrap"><strong> <!>ed</strong> </span></li><li><a class=ztr-comment-info-dots></a></li></ul></div><ul class=ztr-comment-info-items></ul></div><div class=ztr-comment-text></div><div class=ztr-comment-text></div><ul class=ztr-comment-actions>"
|
||||
),
|
||||
nS = He("<li>●"),
|
||||
rS = He("<li> repl"),
|
||||
@@ -29635,807 +29636,6 @@ svg {
|
||||
})();
|
||||
const i$ = wv({ __proto__: null, default: dg }, [dg]);
|
||||
</script>
|
||||
<style rel="stylesheet" crossorigin>
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
+804
@@ -0,0 +1,804 @@
|
||||
@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;
|
||||
}
|
||||
@@ -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
|
||||
+27
-5
@@ -423,11 +423,11 @@
|
||||
@apply translate-x-5;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-control,
|
||||
.checkbox,
|
||||
.checkbox::after,
|
||||
.switch,
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-control,
|
||||
.checkbox,
|
||||
.checkbox::after,
|
||||
.switch,
|
||||
.switch::before,
|
||||
.popover__panel,
|
||||
.menu__item {
|
||||
@@ -2028,3 +2028,25 @@
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.ui-grid-row {
|
||||
border-bottom: 1px solid var(--color-border-subtle, rgb(209 213 219));
|
||||
}
|
||||
|
||||
.status-line {
|
||||
@apply my-1 text-sm leading-snug text-text;
|
||||
}
|
||||
|
||||
.status-line.error {
|
||||
color: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
.status-line.success {
|
||||
color: var(--color-blog-green-500);
|
||||
}
|
||||
|
||||
.status-line.warn {
|
||||
color: var(--color-warning-strong);
|
||||
}
|
||||
}
|
||||
@@ -1,65 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Nostr Ephemeral DM Tester (Using finalizeEvent)</title>
|
||||
<script src="../js/tracking.js" defer></script>
|
||||
<link rel="stylesheet" href="../css/tokens.css" />
|
||||
<style>
|
||||
/* Basic styling for the demo page */
|
||||
body {
|
||||
background: var(--color-surface, rgb(15 23 42));
|
||||
color: var(--color-text, rgb(248 250 252));
|
||||
font-family: var(--font-family-sans, sans-serif);
|
||||
margin: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background: var(--color-panel, rgb(31 41 55));
|
||||
color: var(--color-text, rgb(248 250 252));
|
||||
border: 1px solid var(--color-border, rgb(55 65 81));
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: var(--color-info, rgb(96 165 250));
|
||||
color: var(--color-white, rgb(255 255 255));
|
||||
border: none;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
cursor: pointer;
|
||||
}
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: var(--color-card, rgb(30 41 59));
|
||||
color: var(--color-text, rgb(248 250 252));
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-critical-strong, rgb(153 27 27));
|
||||
}
|
||||
.success {
|
||||
color: var(--color-blog-green-500, rgb(34 197 94));
|
||||
}
|
||||
.warn {
|
||||
color: var(--color-warning, rgb(250 204 21));
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../css/tailwind.generated.css" />
|
||||
|
||||
<!--
|
||||
Nostr Ephemeral DM Tester (Using finalizeEvent)
|
||||
@@ -91,34 +36,57 @@
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Nostr Ephemeral DM Tester (Using finalizeEvent)</h1>
|
||||
<p>
|
||||
Generates a random ephemeral key, encrypts your message (NIP‑04),
|
||||
finalizes the event (computes event.id and signs it), then publishes it.
|
||||
It also subscribes to each relay using the Relay API.
|
||||
</p>
|
||||
<body class="bg-surface font-sans text-text">
|
||||
<main class="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-6">
|
||||
<header class="space-y-2">
|
||||
<h1 class="text-3xl font-semibold text-text">
|
||||
Nostr Ephemeral DM Tester (Using finalizeEvent)
|
||||
</h1>
|
||||
<p class="text-base leading-relaxed text-text">
|
||||
Generates a random ephemeral key, encrypts your message (NIP‑04),
|
||||
finalizes the event (computes event.id and signs it), then publishes
|
||||
it. It also subscribes to each relay using the Relay API.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form id="dm-form">
|
||||
<label for="npubInput">Target npub:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="npubInput"
|
||||
placeholder="npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
|
||||
required
|
||||
/>
|
||||
<form id="dm-form" class="space-y-4 rounded-xl bg-panel p-6 shadow-lg">
|
||||
<div class="space-y-2">
|
||||
<label for="npubInput" class="block text-sm font-semibold text-text"
|
||||
>Target npub:</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="npubInput"
|
||||
class="form-control"
|
||||
placeholder="npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label for="msgInput">Message:</label>
|
||||
<textarea
|
||||
id="msgInput"
|
||||
rows="3"
|
||||
placeholder="Hello from ephemeral DM!"
|
||||
></textarea>
|
||||
<div class="space-y-2">
|
||||
<label for="msgInput" class="block text-sm font-semibold text-text"
|
||||
>Message:</label
|
||||
>
|
||||
<textarea
|
||||
id="msgInput"
|
||||
rows="3"
|
||||
class="textarea"
|
||||
placeholder="Hello from ephemeral DM!"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit">Send DM</button>
|
||||
</form>
|
||||
<div class="flex justify-end">
|
||||
<button type="submit" class="btn">Send DM</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="status"></div>
|
||||
<div
|
||||
id="status"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
class="min-h-[5rem] space-y-2 rounded-xl bg-card p-4 text-text shadow-md"
|
||||
></div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
@@ -152,14 +120,14 @@
|
||||
nip19,
|
||||
SimplePool,
|
||||
utils,
|
||||
Relay, // Relay API for subscriptions.
|
||||
Relay // Relay API for subscriptions.
|
||||
} = window.NostrTools;
|
||||
|
||||
// Define relay URLs.
|
||||
const RELAYS = [
|
||||
"wss://relay.snort.social",
|
||||
"wss://relay.damus.io",
|
||||
"wss://relay.primal.net",
|
||||
"wss://relay.primal.net"
|
||||
];
|
||||
|
||||
// Create a SimplePool instance for publishing events.
|
||||
@@ -214,7 +182,7 @@
|
||||
kind: 4,
|
||||
created_at: now,
|
||||
tags: [["p", targetPubHex]],
|
||||
content: ciphertext,
|
||||
content: ciphertext
|
||||
};
|
||||
log(
|
||||
`[DEBUG] Event template before finalizing: ${JSON.stringify(
|
||||
@@ -250,7 +218,7 @@
|
||||
},
|
||||
onEose() {
|
||||
relay.close();
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -30,17 +30,6 @@ const app = angular.module("BTorrent", [
|
||||
"ngNotify",
|
||||
]);
|
||||
|
||||
/**
|
||||
* Optional: inline CSS for row lines in the grid.
|
||||
*/
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.textContent = `
|
||||
.ui-grid-row {
|
||||
border-bottom: 1px solid var(--color-border-subtle, rgb(209 213 219));
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleEl);
|
||||
|
||||
// Configure Angular routes.
|
||||
app.config([
|
||||
"$compileProvider",
|
||||
|
||||
Reference in new issue
Block a user