Skip to content

Commit 8b592a7

Browse files
MasssiveJuice08MasssiveJuice08
committed
Feature: Add SIRvb's 'Callout Adjustments'
For a detailed description, see [Custom Formatting Features](https://morrowind-modding.github.io/MMW-Design--and--Planning/Custom-Formatting-Features) - updated `custom.scss` - added `MMW_Callout_Adjustments.css` to `content/.obsidian/snippets` - updated `MMW Design & Planning/Custom Formatting Features.md`
1 parent 987f05e commit 8b592a7

File tree

3 files changed

+507
-0
lines changed

3 files changed

+507
-0
lines changed

‎content/.obsidian/snippets/MMW_Callout_Adjustments.css

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
/* --- Positioning --- */
2+
:not(.is-live-preview) .callout.callout.callout[data-callout-metadata~=left] {
3+
float: left;
4+
margin: unset;
5+
margin-right: 8px;
6+
}
7+
8+
:not(.is-live-preview) .callout.callout[data-callout-metadata~=right] {
9+
float: right;
10+
margin: unset;
11+
margin-left: 8px;
12+
}
13+
14+
.callout.callout.callout[data-callout-metadata~=center] {
15+
display: block;
16+
margin: auto;
17+
float: unset;
18+
}
19+
20+
.callout[data-callout-metadata~=clear] {
21+
/* makes it so floating callouts stack vertically with content instead of horizontally */
22+
clear: both;
23+
}
24+
25+
/* --- Sizing --- */
26+
.callout.callout.callout {
27+
--callout-micro: 10%;
28+
--callout-tiny: 20%;
29+
--callout-small: 30%;
30+
--callout-small-med: 40%;
31+
--callout-med-small: 50%;
32+
--callout-medium: 60%;
33+
--callout-med-tall: 80%;
34+
--callout-tall: 95%;
35+
}
36+
.callout.callout.callout[data-callout-metadata~=wmicro] {
37+
max-width: unset;
38+
width: var(--callout-micro);
39+
}
40+
.callout.callout.callout[data-callout-metadata~=wtiny] {
41+
max-width: unset;
42+
width: var(--callout-tiny);
43+
}
44+
.callout.callout.callout[data-callout-metadata~=wsmall] {
45+
max-width: unset;
46+
width: var(--callout-small);
47+
}
48+
.callout.callout.callout[data-callout-metadata~=ws-med] {
49+
max-width: unset;
50+
width: var(--callout-small-med);
51+
}
52+
.callout.callout.callout[data-callout-metadata~=wm-sm] {
53+
max-width: unset;
54+
width: var(--callout-med-small);
55+
}
56+
.callout.callout.callout[data-callout-metadata~=wmed] {
57+
max-width: unset;
58+
width: var(--callout-medium);
59+
}
60+
.callout.callout.callout[data-callout-metadata~=wm-tl] {
61+
max-width: unset;
62+
width: var(--callout-med-tall);
63+
}
64+
.callout.callout.callout[data-callout-metadata~=wtall] {
65+
max-width: unset;
66+
width: var(--callout-tall);
67+
}
68+
.callout.callout.callout[data-callout-metadata~=sban], .callout.callout.callout[data-callout-metadata~=wfull] {
69+
width: 100%;
70+
float: unset;
71+
max-width: 100%;
72+
}
73+
74+
.callout.callout.callout[data-callout-metadata~=wfit] {
75+
width: fit-content;
76+
max-width: min-content;
77+
}
78+
79+
.callout.callout[data-callout-metadata~=static] {
80+
/* Callout sizing uses percentages by default, |static switches to pixels to use static sizing */
81+
--callout-micro: 50px;
82+
--callout-tiny: 100px;
83+
--callout-small: 200px;
84+
--callout-small-med: 300px;
85+
--callout-med-small: 400px;
86+
--callout-medium: 500px;
87+
--callout-med-tall: 600px;
88+
--callout-tall: 700px;
89+
}
90+
91+
/* --- Title Adjustments --- */
92+
.callout.callout.callout.callout:is([data-callout-metadata~=no-t],
93+
[data-callout-metadata~=no-title]) > .callout-title {
94+
display: none;
95+
}
96+
97+
.callout.callout.callout.callout:is([data-callout-metadata~=s-t],
98+
[data-callout-metadata~=show-title]) > .callout-title {
99+
display: flex;
100+
}
101+
.callout.callout.callout.callout:is([data-callout-metadata~=s-t],
102+
[data-callout-metadata~=show-title]) > .callout-content > p {
103+
margin-top: 0;
104+
}
105+
106+
.callout.callout.callout.callout:is([data-callout-metadata~=subtitle],
107+
[data-callout-metadata~=subt]) .callout-title {
108+
align-content: center;
109+
align-items: center;
110+
}
111+
.callout.callout.callout.callout:is([data-callout-metadata~=subtitle],
112+
[data-callout-metadata~=subt]) .callout-title em {
113+
display: block;
114+
font-style: normal;
115+
/* --font-small is an Obsidian CSS variable for 0.933em. Substitute variable for actual value in Quartz version */
116+
font-size: var(--font-small);
117+
line-height: 12px;
118+
font-weight: normal;
119+
}
120+
.callout.callout.callout.callout:is([data-callout-metadata~=subtitle],
121+
[data-callout-metadata~=subt]) .callout-title em em {
122+
font-style: italic;
123+
display: inline-block;
124+
}
125+
126+
.callout:is([data-callout-metadata~=no-i],
127+
[data-callout-metadata~=no-icon]) > .callout-title .callout-icon {
128+
width: 0;
129+
height: 0;
130+
}
131+
132+
/* --- Callout Styling --- */
133+
.callout[data-callout-metadata~=embed] .callout-content, .callout[data-callout-metadata~=embed] > .callout-content > p {
134+
margin: 0;
135+
padding: 0;
136+
}
137+
138+
.callout.callout.callout:is([data-callout-metadata~=nbrd],
139+
[data-callout-metadata~=no-border]) {
140+
border: 0;
141+
}
142+
143+
.callout.callout.callout[data-callout-metadata~=clean],
144+
.callout.callout.callout[data-callout-metadata~=clean] > .callout-content {
145+
border: 0;
146+
box-shadow: none;
147+
--callout-color: transparent;
148+
/* Quartz does not use --callout-padding variable */
149+
padding: 0;
150+
}
151+
.callout.callout.callout[data-callout-metadata~=clean] .callout-content,
152+
.callout.callout.callout[data-callout-metadata~=clean] > .callout-content .callout-content {
153+
padding: 0;
154+
}
155+
156+
.callout.callout:is([data-callout-metadata~=content-padding-small],
157+
[data-callout-metadata~=c-p-sm]) {
158+
--callout-content-padding: 6px;
159+
/* Quartz does not use --callout-content-padding variable */
160+
}
161+
162+
.callout.callout:is([data-callout-metadata~=content-padding-medium],
163+
[data-callout-metadata~=c-p-med]) {
164+
--callout-content-padding: 12px;
165+
/* Quartz does not use --callout-content-padding variable */
166+
}
167+
168+
.callout.callout:is([data-callout-metadata~=content-padding-large],
169+
[data-callout-metadata~=c-p-lg]) {
170+
--callout-content-padding: 24px;
171+
/* Quartz does not use --callout-content-padding variable */
172+
}
173+
174+
/* --- Text Formatting --- */
175+
176+
.callout.callout:is([data-callout-metadata~=txt-l],
177+
[data-callout-metadata~=text-left]) > .callout-content > * {
178+
text-align: left;
179+
}
180+
181+
.callout.callout:is([data-callout-metadata~=txt-r],
182+
[data-callout-metadata~=text-right]) > .callout-content {
183+
text-align: right;
184+
}
185+
186+
.callout.callout:is([data-callout-metadata~=txt-c],
187+
[data-callout-metadata~=text-center]) > .callout-content {
188+
text-align: center;
189+
}
190+
191+
.callout.callout:is([data-callout-metadata~=ttl-c],
192+
[data-callout-metadata~=title-center]) .callout-title {
193+
justify-content: center;
194+
}
195+
.callout.callout:is([data-callout-metadata~=ttl-c],
196+
[data-callout-metadata~=title-center]) .callout-title-inner {
197+
display: block;
198+
flex: unset;
199+
}
200+
201+
.callout.callout:is([data-callout-metadata~=text-small],
202+
[data-callout-metadata~=txt-s]) > .callout-content > * {
203+
font-size: 0.8rem;
204+
}

‎content/MMW Design & Planning/Custom Formatting Features.md

+84
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,90 @@ These should be used for any instance where programs' default hotkeys (ones whic
2828
2929
---
3030

31+
## Callout Adjustments
32+
33+
MMW borrows a large number of [Callout Adjustments](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Callout+Adjustments#Adjustments "SIRvb's ITS Theme") from SIRvb's 'ITS Theme' for Obsidian. These add much-needed flexibility for styling and positioning callouts.
34+
35+
**Syntax:**
36+
37+
```markdown title="basic syntax"
38+
> [!callout-type|adjustment adjustment2]
39+
```
40+
41+
```markdown title="examples"
42+
> [!tip|right]
43+
44+
> [!warning|title-center]
45+
46+
> [!note|clean no-title embed]
47+
```
48+
49+
### Callout Titles
50+
51+
|Abbr.|Full Title|Description|
52+
|---|---|---|
53+
|`no-t`|`no-title`|Hides callout title|
54+
|`s-t`|`show-title`|Show callout title|
55+
|`ttl-c`|`title-center`|Center callout title text|
56+
|`no-i`|`no-icon`|Hide callout icon|
57+
|`subt`|`subtitle`|Style words in italic (`* *`, `_ _`) as subtitles|
58+
59+
### Callout Text
60+
61+
|Abbr.|Full Title|Description|
62+
|---|---|---|
63+
|`txt-c`|`text-center`|Center callout text|
64+
|`txt-r`|`txt-right`|Right align callout text|
65+
|`txt-l`|`txt-left`|Left align callout text|
66+
|`txt-s`|`text-small`|Shrink callout text size|
67+
68+
### Callout Styling
69+
70+
|Abbr.|Full Title|Description|
71+
|---|---|---|
72+
||`embed`|Remove callout padding to expand embed|
73+
||`clean`|Remove callout Styling|
74+
||`collapse`|Remove all padding and margins for ultra compact look|
75+
|`nbrd`|`no-border`|Borderless callout|
76+
||`clear`|Move any other floating elements near to under this callout|
77+
78+
### Callout Content Padding
79+
80+
|Attribute|Abbr|Callout Padding Sizing|
81+
|---|---|:-:|
82+
|`content-padding-small`|`c-p-sm`|6px|
83+
|`content-padding-medium`|`c-p-med`|12px|
84+
|`content-padding-large`|`c-p-lg`|24px|
85+
86+
### Callout Positioning
87+
88+
|Attribute|Description|
89+
|---|---|
90+
|`left`|Float callout to the left|
91+
|`right`|Float callout to the right|
92+
|`center`|Center the callout|
93+
94+
### Callout Sizing
95+
96+
> [!note|right ws-med clear] Add `|static` to use fixed sizing with pixels
97+
>
98+
> Callout sizing uses percentages by default, `|static` switches to pixels to use static sizing.
99+
100+
|Attributes|Callout Width `%`|Callout Width `px`|
101+
|---|:-:|:-:|
102+
|`wmicro`|10%|50px|
103+
|`wtiny`|20%|100px|
104+
|`wsmall`|30%|200px|
105+
|`ws-med`|40%|300px|
106+
|`wm-sm`|50%|400px|
107+
|`wmed`|60%|500px|
108+
|`wm-tl`|80%|600px|
109+
|`wtall`|95%|700px|
110+
|`wfull`|100%||
111+
|`wfit`|Auto|Auto|
112+
113+
---
114+
31115
## Custom Callouts
32116

33117
In addition to the default [Obsidian Callouts](https://help.obsidian.md/Editing+and+formatting/Callouts), MMW also adds the following custom Callouts:

0 commit comments

Comments
 (0)