diff --git a/components/media-or-link.js b/components/media-or-link.js index c84d11cf..139b0aaf 100644 --- a/components/media-or-link.js +++ b/components/media-or-link.js @@ -93,8 +93,7 @@ export default function MediaOrLink ({ linkFallback = true, ...props }) { if (media.embed) { return ( ) } @@ -187,7 +186,6 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) => style, width, height, - className: classNames(topLevel && styles.topLevel), image: (!me?.privates?.imgproxyOnly || trusted) && showMedia && isImage && !isVideo && !embed, video: !me?.privates?.imgproxyOnly && showMedia && isVideo && !embed, embed: !me?.privates?.imgproxyOnly && showMedia && embed diff --git a/components/text.module.css b/components/text.module.css index b0167271..c9268a35 100644 --- a/components/text.module.css +++ b/components/text.module.css @@ -6,6 +6,7 @@ overflow-y: hidden; position: relative; max-height: 200vh; + --grid-gap: 0.5rem; } @@ -98,24 +99,44 @@ } .text hr { - border-top: 1px solid var(--theme-clickToContextColor); + border-top: 3px solid var(--theme-quoteBar); +} + +.text.topLevel { + --grid-gap: 0.75rem; } .text .p { display: block; - margin-bottom: .5rem; white-space: pre-wrap; word-break: break-word; - --grid-gap: 0.5rem; + padding-top: .25rem; + padding-bottom: .25rem; } .text.topLevel .p { - margin-bottom: 0.75rem; - --grid-gap: 0.75rem; + padding-top: .375rem; + padding-bottom: .375rem; } -.text pre { - margin-bottom: .5rem; +.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 { @@ -123,20 +144,30 @@ } .text>*:last-child { + padding-bottom: 0 !important; margin-bottom: 0 !important; } -.text blockquote:last-child { - margin-bottom: 0 !important; +.text>*:first-child { + padding-top: 0 !important; + margin-top: 0 !important; } -.text blockquote:has(+ :not(blockquote)) { - margin-bottom: .5rem; +.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; - margin-bottom: .5rem; width: calc(100% - var(--grid-gap)); max-width: calc(100% - var(--grid-gap)); height: auto; @@ -147,6 +178,7 @@ .p:has(> .mediaContainer) { white-space: normal; + padding: 0 !important; } .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child), @@ -154,7 +186,6 @@ display: inline-block; width: min-content; max-width: calc(100% - var(--grid-gap)); - margin-bottom: 0; } .mediaContainer ~ .mediaContainer, .mediaContainer:has(+ .mediaContainer) { @@ -195,8 +226,7 @@ object-position: left top; } -.mediaContainer.topLevel { - margin-bottom: .75rem; +.topLevel .mediaContainer { max-height: 35vh; } @@ -225,9 +255,8 @@ img.fullScreen { } .text blockquote { - border-left: 2px solid var(--theme-quoteBar); + border-left: 3px solid var(--theme-quoteBar); padding-left: .75rem; - margin-bottom: 0; } .text li { @@ -237,19 +266,10 @@ img.fullScreen { .text ul, .text ol { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 0rem; padding-left: 2rem; } -.text ul:last-child, .text ol:last-child { - margin-bottom: 0; -} - -.text li > .p { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .text ol ol, .text ul ol { list-style-type: lower-roman; @@ -262,6 +282,11 @@ img.fullScreen { 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; } @@ -298,12 +323,21 @@ img.fullScreen { font-size: smaller; } -.videoWrapper { - max-width: 320px; - margin: 0.5rem 0; +.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper, .mediaContainer { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } -.videoWrapper.topLevel { +.topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper, .topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer { + margin-top: 0.375rem; + margin-bottom: 0.375rem; +} + +.videoWrapper { + max-width: 320px; +} + +.topLevel .videoWrapper { max-width: 640px; margin: 0.75rem 0; } @@ -325,15 +359,10 @@ img.fullScreen { } .twitterContainer, .nostrContainer { - margin-top: .25rem; position: relative; overflow: hidden; } -.twitterContainer:not(:first-child), .nostrContainer:not(:first-child) { - margin-top: .75rem; -} - .twitterContainer iframe, .nostrContainer iframe { border-radius: 13px; } @@ -351,7 +380,7 @@ img.fullScreen { overflow: hidden; } -.twitterContained.topLevel { +.topLevel .twitterContained { height: 200px; } @@ -372,7 +401,7 @@ img.fullScreen { padding-right: 12px; } -.tweetsSkeleton.topLevel { +.topLevel .tweetsSkeleton { max-width: 550px; }