From 5c7c59f1bcf41b1f0a756183ddb1aee50412f826 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Tue, 16 Apr 2024 20:02:51 +1200 Subject: [PATCH 1/2] Infobox-Callout: Add SCSS and callout template --- .../Infobox-Callout-Template.md | 12 +++ quartz/styles/custom.scss | 95 +++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 content/Assets/Wiki Templates/Infobox-Callout-Template.md diff --git a/content/Assets/Wiki Templates/Infobox-Callout-Template.md b/content/Assets/Wiki Templates/Infobox-Callout-Template.md new file mode 100644 index 00000000..06ab898b --- /dev/null +++ b/content/Assets/Wiki Templates/Infobox-Callout-Template.md @@ -0,0 +1,12 @@ +> [!infobox] +> +> ## Article Title +> +> %%![[insert image]]%% +> +> ### Table Heading +> +> | Type | Name | +> | --- | --- | +> | Row | Row | +> | Row | Row | \ No newline at end of file diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index d84705d0..a89a74c2 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -60,3 +60,98 @@ img { } } } + +/* infobox callout */ +.callout[data-callout="infobox"] { + background-color: rgba(80, 120, 180, 0.1); + --callout-icon: none; + border: 1px solid rgba(255, 255, 255, 0.1); + float: right; + width: 300px; + margin: 0px 0px 10px 10px; + padding: 5px; +} + +/* mobile breakpoint */ +@media (max-width: 767px) { + .callout[data-callout="infobox"] { + width: 100%; + float: none; + } +} + +@media (max-width: 480px) { + .callout[data-callout="infobox"] { + width:100%; + float: none; + } +} + +/* stack infoboxes vertically with 'clear' */ +.callout[data-callout="infobox"] { + clear: right; +} + +/* Remove Callout Title */ +.callout[data-callout="infobox"] .callout-title { + display: none; +} + + +/* H2 Title */ +.callout[data-callout="infobox"] h2 { + margin: auto; + max-width: 100%; + font-size: 15px; + text-align: center; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.1); + padding: 4px; +} + +/* H3 Title */ +.callout[data-callout="infobox"] h3 { + margin: auto; + max-width: 100%; + font-size: 17px; + text-align: center; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.1); + padding: 4px; +} + +/* Spacing */ +.callout[data-callout="infobox"] p { + margin-block-start: 10px; + margin-block-end: 0px; + width: 100%; +} + +/* Image */ +.callout[data-callout="infobox"] img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +/* Table */ +.callout[data-callout="infobox"] table { + margin: auto; + width: 100%; + font-size: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + background-color: rgb(30, 30, 30); +} + +.callout[data-callout="infobox"] th { + padding-left: 12px; + padding-right: 0px; + vertical-align: top; +} + +.callout[data-callout="infobox"] td { + padding-left: 12px; + padding-right: 0px; + vertical-align: top; +} From a32e48a488da36a6705b9a22ef79b8d88870f874 Mon Sep 17 00:00:00 2001 From: MasssiveJuice Date: Tue, 16 Apr 2024 20:06:02 +1200 Subject: [PATCH 2/2] Add Obsidian-CSS-Snippet folder Includes `MMW_Infobox_Callout.css` --- .../snippets/MMW_Infobox_Callout.css | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 Obsidian-CSS-Snippets/snippets/MMW_Infobox_Callout.css diff --git a/Obsidian-CSS-Snippets/snippets/MMW_Infobox_Callout.css b/Obsidian-CSS-Snippets/snippets/MMW_Infobox_Callout.css new file mode 100644 index 00000000..84570bba --- /dev/null +++ b/Obsidian-CSS-Snippets/snippets/MMW_Infobox_Callout.css @@ -0,0 +1,94 @@ +/* infobox callout */ +.callout[data-callout="infobox"] { + background-color: rgba(80, 120, 180, 0.1); + --callout-icon: none; + border: 1px solid rgba(255, 255, 255, 0.1); + float: right; + width: 300px; + margin: 0px 0px 10px 10px; + padding: 5px; +} + +/* mobile breakpoint */ +@media (max-width: 767px) { + .callout[data-callout="infobox"] { + width: 100%; + float: none; + } +} + +@media (max-width: 480px) { + .callout[data-callout="infobox"] { + width:100%; + float: none; + } +} + +/* stack infoboxes vertically with 'clear' */ +.callout[data-callout="infobox"] { + clear: right; +} + +/* Remove Callout Title */ +.callout[data-callout="infobox"] .callout-title { + display: none; +} + + +/* H2 Title */ +.callout[data-callout="infobox"] h2 { + margin: auto; + max-width: 100%; + font-size: 15px; + text-align: center; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.1); + padding: 4px; +} + +/* H3 Title */ +.callout[data-callout="infobox"] h3 { + margin: auto; + max-width: 100%; + font-size: 17px; + text-align: center; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.1); + padding: 4px; +} + +/* Spacing */ +.callout[data-callout="infobox"] p { + margin-block-start: 10px; + margin-block-end: 0px; + width: 100%; +} + +/* Image */ +.callout[data-callout="infobox"] img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +/* Table */ +.callout[data-callout="infobox"] table { + margin: auto; + width: 100%; + font-size: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + background-color: rgb(30, 30, 30); + } + + .callout[data-callout="infobox"] th { + padding-left: 12px; + padding-right: 0px; + vertical-align: top; + } + + .callout[data-callout="infobox"] td { + padding-left: 12px; + padding-right: 0px; + vertical-align: top; + }