mirror of
https://github.com/kmaasrud/awesome-obsidian.git
synced 2026-03-09 07:14:03 -05:00
128 lines
4.0 KiB
CSS
128 lines
4.0 KiB
CSS
/*
|
||
IMPORTANT
|
||
For information on requirements and how to use this snippet, see its original repo:
|
||
https://github.com/zremboldt/obsidian-media-grid
|
||
|
||
This snippet requires Contextual Typography 2.2.1+
|
||
https://github.com/mgmeyers/obsidian-contextual-typography
|
||
*/
|
||
|
||
:root {
|
||
--content-base-width: 45rem;
|
||
}
|
||
|
||
/* ----------------------------------------- */
|
||
/* Handle overall content width */
|
||
/* ----------------------------------------- */
|
||
|
||
/* Wrapper with padding keeps content from bumping the edges */
|
||
.markdown-preview-view {
|
||
padding-inline: 30px;
|
||
}
|
||
|
||
/* Container controlling overall max content width */
|
||
.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 .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 .markdown-preview-section div[data-is-embed] {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ----------------------------------------- */
|
||
/* Make media items display in rows */
|
||
/* ----------------------------------------- */
|
||
|
||
/* p tags wrap each row */
|
||
.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);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Remove breaks from the document flow */
|
||
.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 .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 .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;
|
||
border-radius: var(--media-border-radius, 4px);
|
||
}
|
||
|
||
/* Create gaps between rows */
|
||
.markdown-preview-view .markdown-preview-section div[data-is-embed] + div[data-is-embed] {
|
||
margin-top: var(--media-grid-gap, 7px);
|
||
}
|
||
|
||
/* ----------------------------------------- */
|
||
/* Style settings */
|
||
/* ----------------------------------------- */
|
||
|
||
/* @settings
|
||
name: Media Grid Snippet
|
||
id: media-grid-snippet
|
||
settings:
|
||
-
|
||
id: content-max-width
|
||
title: Grid width
|
||
description: Set the max width of your grid layouts.
|
||
type: variable-select
|
||
allowEmpty: false
|
||
default: var(--content-base-width)
|
||
options:
|
||
-
|
||
label: Base width
|
||
value: var(--content-base-width)
|
||
-
|
||
label: Small
|
||
value: calc(var(--content-base-width) + 5%)
|
||
-
|
||
label: Medium
|
||
value: calc(var(--content-base-width) + 10%)
|
||
-
|
||
label: Large
|
||
value: calc(var(--content-base-width) + 20%)
|
||
-
|
||
label: Full width
|
||
value: 100%
|
||
-
|
||
id: media-grid-gap
|
||
title: Grid gap
|
||
description: Set the gap size between items in your grid layouts.
|
||
type: variable-number-slider
|
||
format: px
|
||
default: 7
|
||
min: 0
|
||
max: 80
|
||
step: 1
|
||
-
|
||
id: media-border-radius
|
||
title: Border radius
|
||
description: Set the border radius of your images and videos.
|
||
type: variable-number-slider
|
||
format: px
|
||
default: 4
|
||
min: 0
|
||
max: 40
|
||
step: 1
|
||
*/
|