diff --git a/media-grid-snippet.css b/media-grid-snippet.css index 9ae3a41..5d4a137 100644 --- a/media-grid-snippet.css +++ b/media-grid-snippet.css @@ -10,24 +10,24 @@ /* ----------------------------------------- */ /* Wrapper with padding keeps content from bumping the edges */ -.markdown-preview-view.is-readable-line-width { +.markdown-preview-view { padding-inline: 30px; } /* Container controlling overall max content width */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section { +.markdown-preview-view .markdown-preview-section { width: 100%; max-width: var(--content-max-width, 45rem); /* Second value is fallback in case user isn't using Style settings */ } /* All children of overall container are divs */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section > div { +.markdown-preview-view .markdown-preview-section > div { margin-inline: auto; width: min(var(--content-base-width), 100%); } /* Specific children of overall container that contain media */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] { +.markdown-preview-view .markdown-preview-section div[data-is-embed] { width: 100%; } @@ -36,7 +36,7 @@ /* ----------------------------------------- */ /* p tags wrap each row */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p { +.markdown-preview-view .markdown-preview-section div[data-is-embed] > p { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); grid-gap: var(--media-grid-gap, 7px); @@ -44,18 +44,18 @@ } /* Remove breaks from the document flow */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p br { +.markdown-preview-view .markdown-preview-section div[data-is-embed] > p br { display: none; } /* Media items sourced from your vault are wrapped in a span – media linked from the web is not wrapped */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p > span { +.markdown-preview-view .markdown-preview-section div[data-is-embed] > p > span { display: flex; } /* Apply this to all img/video tags in a row whether they're wrapped in a span or not */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p img, -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p video { +.markdown-preview-view .markdown-preview-section div[data-is-embed] > p img, +.markdown-preview-view .markdown-preview-section div[data-is-embed] > p video { flex: 1; align-self: stretch; object-fit: cover; @@ -63,7 +63,7 @@ } /* Create gaps between rows */ -.markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] + div[data-is-embed] { +.markdown-preview-view .markdown-preview-section div[data-is-embed] + div[data-is-embed] { margin-top: var(--media-grid-gap, 7px); } @@ -118,4 +118,4 @@ settings: min: 0 max: 40 step: 1 -*/ \ No newline at end of file +*/