.text { font-size: 94%; font-family: inherit; word-break: break-word; line-height: 140%; overflow-y: hidden; position: relative; max-height: 200vh; --grid-gap: 0.5rem; } .text :global(.footnotes) { font-size: smaller; color: #8b949e; border-top: 1px solid #30363d; } /* Hide the section label for visual users. */ .text :global(.sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); word-wrap: normal; border: 0; } /* Place `[` and `]` around footnote references. */ .text :global([data-footnote-ref])::before { content: '['; } .text :global([data-footnote-ref])::after { content: ']'; } .textUncontained { max-height: none; } .textContained::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50vh; pointer-events: none; z-index: 1; background: linear-gradient(rgba(255, 255, 255, 0), var(--bs-body-bg) 200%); } .textShowFull { position: absolute; bottom: 0; left: 0; border-radius: 0; z-index: 2; } @media screen and (min-width: 767px) { .text { line-height: 130%; } .text img { min-width: 30% !important; } } .heading { position: relative; margin-left: -22px; padding-left: 22px; display: block; } .headingLink { display: none; position: absolute; left: 0px; top: 0px; height: 100%; width: 44px; } .headingLink.copied { display: flex; } .headingLink svg { align-self: center; } .heading:hover>.headingLink { display: flex; } .text hr { border-top: 3px solid var(--theme-quoteBar); } .text.topLevel { --grid-gap: 0.75rem; } .text .p { display: block; white-space: pre-wrap; word-break: break-word; padding-top: .25rem; padding-bottom: .25rem; } .text.topLevel .p { padding-top: .375rem; padding-bottom: .375rem; } .text>*:not(.heading) { padding-top: .25rem; padding-bottom: .25rem; } .text.topLevel>*:not(.heading) { padding-top: .375rem; padding-bottom: .375rem; } .text pre, .text blockquote { margin-top: .25rem; margin-bottom: .25rem; } .text.topLevel pre, .text.topLevel blockquote { margin-top: .375rem; margin-bottom: .375rem; } .text pre>div { margin: 0 !important; } .text>*:last-child:not(.textShowFull) { padding-bottom: 0 !important; margin-bottom: 0 !important; } .text>*:first-child { padding-top: 0 !important; margin-top: 0 !important; } .text blockquote, .text.topLevel blockquote { padding-top: 0 !important; padding-bottom: 0 !important; } .text blockquote *:first-child, .text.topLevel blockquote *:first-child { padding-top: 0; } .text blockquote *:last-child, .text.topLevel blockquote *:last-child { padding-bottom: 0; } .mediaContainer { display: block; width: calc(100% - var(--grid-gap)); max-width: calc(100% - var(--grid-gap)); height: auto; overflow: hidden; max-height: 25vh; aspect-ratio: var(--aspect-ratio); } .p:has(> .mediaContainer) { white-space: normal; padding: 0 !important; } .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child), .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) { display: inline-block; width: min-content; max-width: calc(100% - var(--grid-gap)); } .mediaContainer ~ .mediaContainer, .mediaContainer:has(+ .mediaContainer) { display: inline-block; width: min-content; margin-right: var(--grid-gap); } .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child, .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child, .mediaContainer:first-child:has(+ .mediaContainer) { margin-right: var(--grid-gap); } .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child img, .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child img, .mediaContainer ~ .mediaContainer img, .mediaContainer:has(+ .mediaContainer) img { block-size: revert-layer; max-width: stretch; } .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child video, .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child video, .mediaContainer ~ .mediaContainer video, .mediaContainer:has(+ .mediaContainer) video { block-size: stretch; } .mediaContainer img, .mediaContainer video { display: block; object-fit: contain; width: auto; max-height: inherit; height: 100%; aspect-ratio: var(--aspect-ratio); } .mediaContainer img { cursor: zoom-in; min-width: 30%; object-position: left top; } .topLevel .mediaContainer, :global(.topLevel) .mediaContainer { max-height: 35vh; } img.fullScreen { cursor: zoom-out !important; max-height: 100%; max-width: 100vw; min-width: 0; min-height: 0; align-self: center; justify-self: center; } .fullScreenContainer { --bs-columns: 1; --bs-rows: 1; display: grid; width: 100%; height: 100%; align-content: center; justify-content: center; } .text table { width: auto; } .text blockquote { border-left: 3px solid var(--theme-quoteBar); padding-left: .75rem; } .text li { margin-top: .25rem; } .text ul, .text ol { margin-top: 0; margin-bottom: 0rem; padding-left: 2rem; } .text ol ol, .text ul ol { list-style-type: lower-roman; } .text ul ul ol, .text ul ol ol, .text ol ul ol, .text ol ol ol { list-style-type: lower-alpha; } .text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { margin-top: 0.75rem; margin-bottom: 0.5rem; } .text h1 { font-size: 1.6rem; } .text h2 { font-size: 1.45rem; } .text h3 { font-size: 1.3rem; } .text h4 { font-size: 1.15rem; } .text h5 { font-size: 1rem; } .text h6 { font-size: .85rem; } /* Utility classes used in rehype plugins in md.js */ .subscript { vertical-align: sub; font-size: smaller; } .superscript { vertical-align: super; font-size: smaller; } .twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper, .mediaContainer { margin-top: 0.25rem; margin-bottom: 0.25rem; } .topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper, .topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer, :global(.topLevel) .twitterContainer, :global(.topLevel) .nostrContainer, :global(.topLevel) .videoWrapper, :global(.topLevel) .wavlakeWrapper, :global(.topLevel) .spotifyWrapper, :global(.topLevel) .mediaContainer { margin-top: 0.375rem; margin-bottom: 0.375rem; } .videoWrapper { max-width: 320px; } .topLevel .videoWrapper, :global(.topLevel) .videoWrapper { max-width: 640px; margin: 0.75rem 0; } .videoContainer { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .videoContainer iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .twitterContainer, .nostrContainer { position: relative; overflow: hidden; } .twitterContainer iframe, .nostrContainer iframe { border-radius: 13px; } .nostrContainer { margin-right: 15px; } .videoWrapper:not(:first-child) { margin-top: .75rem; } .twitterContained { height: 150px; overflow: hidden; } .topLevel .twitterContained, :global(.topLevel) .twitterContained { height: 200px; } .twitterShowFull { position: absolute; bottom: 0; left: 0; border-radius: 0; line-height: 1.2; padding: .75rem 1rem; } .tweetsSkeleton { display: flex; flex-flow: row wrap; max-width: 350px; width: 100%; padding-right: 12px; } .topLevel .tweetsSkeleton, :global(.topLevel) .tweetsSkeleton { max-width: 550px; } .tweetSkeleton { width: 100%; } .tweetSkeleton { border: 0.05rem solid var(--theme-borderColor); border-radius: 12px; height: 150px; padding: 1.5rem; } .topLevel .tweetSkeleton, :global(.topLevel) .tweetSkeleton { height: 200px; } .tweetSkeleton .img { height: 48px; width: 48px; border-radius: 50%; } .tweetSkeleton .content1, .tweetSkeleton .content2 { height: 50%; margin-top: 1rem; } .tweetSkeleton .line { height: 25%; margin: 0.5rem 0; width: 100%; border-radius: .4rem; } .tweetSkeleton .line:last-child { width: 75%; } .wavlakeWrapper { width: 100%; height: 380px; max-width: 480px; border-radius: 1.65rem; overflow: hidden; } .spotifyWrapper { width: 100%; height: 152px; max-width: 480px; border-radius: 13px; overflow: hidden; }