Skip to content

Commit a3390ce

Browse files
MasssiveJuice08MasssiveJuice08
committed
Feature: Rework [!column] callout
- `[!even_columns]` callout renamed to `[!column]` - column callout now has new features - `|flex` metadata to make columns stack responsively on mobile - `|list-global` and `|list` metadata to display unordered lists in columns - control over the number of columns. Combined with `|flex` metadata, these will display e.g., 3 or 4 columns on desktop, but stack vertically on mobile. - updated `MMW Design & Planning/Custom Formatting Features.md` - renamed css snippet to `MMW_Column_Callout.css`
1 parent d1a07f6 commit a3390ce

File tree

4 files changed

+221
-70
lines changed

4 files changed

+221
-70
lines changed

‎content/.obsidian/snippets/MMW_Column_Callout.css

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* --- Column Callout --- */
2+
.callout[data-callout="column"] {
3+
/* Removes padding and background colour from the container */
4+
padding: 0;
5+
background-color: transparent;
6+
--columns: 2;
7+
}
8+
.callout[data-callout="column"] > .callout-content {
9+
/* Arranges the content in columns */
10+
display: grid;
11+
/* minmax sets the minimum width of a column. Make the columns 'skinnier' by setting 15rem to a smaller number */
12+
grid-template-columns: repeat(var(--columns), minmax(15rem, 1fr));
13+
gap: 10px;
14+
}
15+
.callout[data-callout="column"] > .callout-title {
16+
/* Hides the callout title */
17+
display: none;
18+
}
19+
20+
.callout[data-callout*=column]:is([data-callout-metadata~=slim-margins],
21+
[data-callout-metadata~=s-mg]) > .callout-content {
22+
gap: 2px;
23+
}
24+
25+
.callout[data-callout*=column][data-callout-metadata~="3"] .callout-content {
26+
--columns: 3;
27+
}
28+
.callout[data-callout*=column][data-callout-metadata~="4"] .callout-content {
29+
--columns: 4;
30+
}
31+
.callout[data-callout*=column][data-callout-metadata~="5"] .callout-content {
32+
--columns: 5;
33+
}
34+
.callout[data-callout*=column][data-callout-metadata~="6"] .callout-content {
35+
--columns: 6;
36+
}
37+
.callout[data-callout*=column][data-callout-metadata~="7"] .callout-content {
38+
--columns: 7;
39+
}
40+
.callout[data-callout*=column][data-callout-metadata~="8"] .callout-content {
41+
--columns: 8;
42+
}
43+
.callout[data-callout*=column][data-callout-metadata~="9"] .callout-content {
44+
--columns: 9;
45+
}
46+
/*flex*/
47+
.callout[data-callout*=column][data-callout-metadata~=flex] > .callout-content {
48+
gap: 5px;
49+
grid-template-columns: none;
50+
display: flex;
51+
flex-direction: row;
52+
flex-wrap: wrap;
53+
}
54+
.callout[data-callout*=column][data-callout-metadata~=flex] > .callout-content .callout {
55+
flex: 1 1 calc(var(--file-line-width) / 2.5);
56+
}
57+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~="3"] > .callout-content .callout {
58+
flex: 1 1 calc(var(--file-line-width) / 3.5);
59+
}
60+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout {
61+
flex: 1 1 auto;
62+
}
63+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wmicro] {
64+
width: 5%;
65+
}
66+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wtiny] {
67+
width: 10%;
68+
}
69+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wsmall] {
70+
width: 20%;
71+
}
72+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=ws-med] {
73+
width: 30%;
74+
}
75+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wmed] {
76+
width: 40%;
77+
}
78+
/*list*/
79+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content {
80+
grid-template-columns: unset;
81+
}
82+
/*list-global is for nesting column lists inside a callout in the column callout*/
83+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul {
84+
columns: var(--columns);
85+
}
86+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul > li, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul > li {
87+
break-inside: avoid;
88+
}
89+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul .list-bullet::after, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul .list-bullet::after {
90+
position: relative;
91+
}
92+
.callout[data-callout*=column][data-callout-metadata~=list-x] > .callout-content {
93+
grid-template-columns: unset;
94+
}
95+
.callout[data-callout*=column][data-callout-metadata~=list-x] > .callout-content > ul {
96+
display: grid;
97+
grid-template-columns: repeat(var(--columns), 1fr);
98+
}

‎content/.obsidian/snippets/MMW_Grid_Callouts.css

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 31 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ These should be used for any instance where programs' default hotkeys (ones whic
2424

2525
> [!tip]- Closing HTML tags
2626
>
27-
> `<kbd>` is an HTML tag. It is used to surround an 'element' (in this case, a piece of text). As it is not self-closing, the second tag in a pair of closing tags needs a `forward slash` (<kbd>/</kbd>), for example: \<kbd\> \</kbd\>.
27+
> `<kbd>` is an HTML tag. It is used to surround an 'element' (in this case, a piece of text). As it is not self-closing, the second tag in a pair of tags needs a `forward slash` (<kbd>/</kbd>) to 'close' it.
28+
>
29+
> **Example**: \<kbd\> \</kbd\>.
2830
2931
---
3032

@@ -136,55 +138,43 @@ Sizing can be made to use pixels instead of percentage by adding `|static`.
136138

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

139-
### Callout Grid
141+
### Column Callout
140142

141-
> [!even_columns]
142-
>
143-
> **(Column 1)** <br>
144-
> The `[!even_columns]` callout is an invisible callout whose contents get displayed as a grid. Each new line of the callout represents a new grid column. You can nest callouts, images or even codeblocks in the grid.
145-
>
146-
> **(Column 2)** <br>
147-
> The number of columns depends on the page-width. The MMW site has a wider page-width than Obsidian's default page-width, so it displays three columns rather than two.
148-
>
149-
> > [!caption]
150-
> >
151-
> > ![[PuzzleBoxOnly.png|wsmall]]
152-
> >
153-
> > A caption callout nested in the grid.
143+
The `[!column]` callout lets you display content as a grid.
154144

155-
#### Syntax
145+
The callout itself is invisible but its contents get displayed as a grid, with each new line of the callout represents a new grid column. It works best when nesting other callouts within it. However, if you wish to write content in columns without callout styling for the nested callouts, you can add the [[Custom Formatting Features#Callout Adjustments|Callout Adjustments]] metadata `clean no-title` to them.
156146

157-
> [!even_columns]
158-
>
159-
> ```markdown title="plaintext"
147+
By adding the `flex` metadata, grid columns will stack vertically on mobile.
148+
149+
> [!column|flex 3]
160150
>
161-
> > [!even-columns]
162-
> >
163-
> > left
164-
> >
165-
> > center
166-
> >
167-
> > right
151+
> > [!warning] Use Nested Callouts
168152
> >
169-
> ```
170-
>
171-
> ```markdown title="nested callouts"
153+
> > `[column]` is designed to have callouts nested within it.
154+
> >
155+
> > To remove styling from nested callouts, add `clean no-title` to the metadata
172156
>
173-
> > [!even-columns]
157+
> > [!NOTE|clean no-t]
174158
> >
175-
> > > [!note] title
176-
> > >
177-
> > > content
178-
> >
179-
> > > [!example] title
159+
> > This callout has `clean no-title` metadata.
160+
> >
161+
> > ```markdown title="syntax:"
162+
> > > [!column]
180163
> > >
181-
> > > content
182-
> >
183-
> > > [!warning] title
164+
> > > > [!note] title
165+
> > > >
166+
> > > > content
184167
> > >
185-
> > > content
186-
> > >
187-
> ```
168+
> > > > [!column] title
169+
> > > >
170+
> > > > content
171+
> > ```
172+
>
173+
> > [!caption]
174+
> >
175+
> > ![[PuzzleBoxOnly.png|wsmall]]
176+
> >
177+
> > A caption callout nested in the grid.
188178
189179
### Captions
190180

‎quartz/styles/custom.scss

Lines changed: 92 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -252,30 +252,110 @@ img:active:not(.Logo) {
252252

253253
/*======================================================*/
254254

255-
/*----Grid Callouts----*/
255+
/*----Column Callout----*/
256256

257-
/* Even columns */
258-
.callout[data-callout="even_columns"] {
259-
/* Removes padding and hides the container */
257+
.callout[data-callout="column"] {
258+
/* Removes padding and background colour from the container */
260259
padding: 0;
261260
background-color: transparent;
262261
border: none;
262+
--columns: 2;
263263
}
264-
265-
.callout[data-callout="even_columns"] > .callout-title {
264+
.callout[data-callout="column"] > .callout-content {
265+
/* Arranges the content in columns */
266+
display: grid;
267+
/* minmax sets the minimum width of a column. Make the columns 'skinnier' by setting 15rem to a smaller number */
268+
grid-template-columns: repeat(var(--columns), minmax(15rem, 1fr));
269+
gap: 10px;
270+
}
271+
.callout[data-callout="column"] > .callout-title {
266272
/* Hides the callout title */
267273
display: none;
268274
}
269275

270-
.callout[data-callout="even_columns"] > .callout-content {
271-
/* Arranges the content in columns */
276+
.callout[data-callout*=column]:is([data-callout-metadata~=slim-margins],
277+
[data-callout-metadata~=s-mg]) > .callout-content {
278+
gap: 2px;
279+
}
280+
281+
.callout[data-callout*=column][data-callout-metadata~="3"] .callout-content {
282+
--columns: 3;
283+
}
284+
.callout[data-callout*=column][data-callout-metadata~="4"] .callout-content {
285+
--columns: 4;
286+
}
287+
.callout[data-callout*=column][data-callout-metadata~="5"] .callout-content {
288+
--columns: 5;
289+
}
290+
.callout[data-callout*=column][data-callout-metadata~="6"] .callout-content {
291+
--columns: 6;
292+
}
293+
.callout[data-callout*=column][data-callout-metadata~="7"] .callout-content {
294+
--columns: 7;
295+
}
296+
.callout[data-callout*=column][data-callout-metadata~="8"] .callout-content {
297+
--columns: 8;
298+
}
299+
.callout[data-callout*=column][data-callout-metadata~="9"] .callout-content {
300+
--columns: 9;
301+
}
302+
/*flex*/
303+
.callout[data-callout*=column][data-callout-metadata~=flex] > .callout-content {
304+
gap: 5px;
305+
grid-template-columns: none;
306+
display: flex;
307+
flex-direction: row;
308+
flex-wrap: wrap;
309+
}
310+
.callout[data-callout*=column][data-callout-metadata~=flex] > .callout-content .callout {
311+
flex: 1 1 calc($pageWidth / 2.5);
312+
}
313+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~="3"] > .callout-content .callout {
314+
flex: 1 1 calc($pageWidth / 3.5);
315+
/* original ITS CSS used (var(--file-line-width), an Obsidian variable for readable line length (the width of the page). Substituted for Quartz SASS variable $pageWidth */
316+
}
317+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout {
318+
flex: 1 1 auto;
319+
}
320+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wmicro] {
321+
width: 5%;
322+
}
323+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wtiny] {
324+
width: 10%;
325+
}
326+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wsmall] {
327+
width: 20%;
328+
}
329+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=ws-med] {
330+
width: 30%;
331+
}
332+
.callout[data-callout*=column][data-callout-metadata~=flex][data-callout-metadata~=resize] .callout[data-callout-metadata~=wmed] {
333+
width: 40%;
334+
}
335+
/*list*/
336+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content {
337+
grid-template-columns: unset;
338+
}
339+
/*list-global is for nesting column lists inside a callout in the column callout*/
340+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul {
341+
columns: var(--columns);
342+
}
343+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul > li, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul > li {
344+
break-inside: avoid;
345+
}
346+
.callout[data-callout*=column][data-callout-metadata~=list-global] .callout > .callout-content > ul .list-bullet::after, .callout[data-callout*=column][data-callout-metadata~=list] > .callout-content > ul .list-bullet::after {
347+
position: relative;
348+
}
349+
.callout[data-callout*=column][data-callout-metadata~=list-x] > .callout-content {
350+
grid-template-columns: unset;
351+
}
352+
.callout[data-callout*=column][data-callout-metadata~=list-x] > .callout-content > ul {
272353
display: grid;
273-
/* minmax sets the minimum width of a column. Make the columns 'skinnier' by setting 15rem to a smaller number */
274-
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
275-
gap: 12px;
354+
grid-template-columns: repeat(var(--columns), 1fr);
276355
}
277356

278-
.callout[data-callout="even_columns"]>.callout-content>:first-child:not(pre, figure) {
357+
358+
.callout[data-callout*=column]>.callout-content>:first-child {
279359
margin-top: 16;
280360
/* First-child needs a margin-top of 16 to match the margin-top of other grid items - except codeblocks */
281361
}

0 commit comments

Comments
 (0)