forked from efemkay/obsidian-modular-css-layout
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MCL Multi Column.css
262 lines (221 loc) · 10.4 KB
/
MCL Multi Column.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
/* === README ===
Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Updated: 2022-05-29 (version: 0.2.0)
- fixes for GH issues #8 (mostly accomodated by kepano)
What is this snippet for?
- to allow Obsidian users to change the layout with preset css by just specifying
the cssClass in the frontmatter (YAML) or naming the Callout block
- available cssClass
- cssClass: two-column-list
- cssClass: {.two-column-list-block}
- cssClass: three-column-list
- cssClass: {.three-column-list-block}
- cssClass: multi-column-list
- available Callout format
- [!multi-column]
- [!blank-container]
Compatibility
- tested to work fine with the following Community Theme
- Default Theme
- Big Sur / Blue Topaz / California Cost / Notation / Pisum / Prism / Things / Typewriter (with minor issue on title color)
- known to be not working
- Primary (due to the theme heaving theming, box-shadow and so on)
Credits
- Kevin Powell Youtube channel
- https://css-tricks.com/
- discord OMG members @Cáo thoát tục (Cáo thoát tục#6993), @mulfok (mulfok#6931) and @Rainbell (Rainbell#3617)
- kepano for accomodating my snippets adjustment
*/
/* @settings
name: Modular CSS Layout - Multi Column
id: modular-css-layout-mc
settings:
-
id: multi-column-title
title: Callout Column Settings
type: heading
level: 2
collapsed: true
-
id: callout-min-width
title: Minimum Sub-Callout Width
description: for sub-callout in [!multi-column]. in px units
type: variable-number-slider
default: 200
min: 100
max: 500
step: 50
format: px
-
id: callout-gap
title: Sub-Callout Gap (any unit)
description: NO spacing between figure and unit
type: variable-text
default: 0.5rem
-
id: callout-margin
title: Sub-Callout Margin (any unit)
description: to allow some spacing for box-shadow
type: variable-text
default: 5px
-
id: float-small-width
title: Floating Callout Width - Small (in px)
type: variable-number-slider
default: 300
min: 200
max: 450
step: 50
format: px
-
id: float-medium-width
title: Floating Callout Width - Medium (in px)
type: variable-number-slider
default: 400
min: 300
max: 550
step: 50
format: px
-
id: float-large-width
title: Floating Callout Width - Large (in px)
type: variable-number-slider
default: 600
min: 500
max: 750
step: 50
format: px
-
id: mc-list-title
title: List Column Settings
type: heading
level: 2
collapsed: true
-
id: list-min-width
title: Minimum Column Width (in px)
type: variable-number-slider
default: 200
min: 100
max: 500
step: 50
format: px
-
id: col-rule-color
title: Column Ruler Color
type: variable-color
format: hsl-split
default: '#b3b3b3'
-
id: col-rule-width
title: Column Ruler Width (in px)
type: variable-number-slider
default: 1
min: 0
max: 4
step: 1
format: px
*/
body{
--callout-min-width: 200px;
--callout-gap: 0.5rem;
--callout-margin: 5px;
--list-min-width: 200px;
--col-rule-color: #b3b3b3;
--col-rule-width: 1px;
--float-small-width: 300px;
--float-medium-width: 400px;
--float-large-width: 600px;
}
/* === Multi Column "DIV"'s Using Callout === */
/* some issues still persists
(2) some theme uses transparency to affect .callout-title */
/* -- Main multi-column snippet using Callout */
/* remove callout-title and make callout-content as part of main callout for box formatting */
div[data-callout="multi-column"].callout > .callout-title { display: none; }
div[data-callout="multi-column"].callout > .callout-content { display: contents; }
/* make the main callout a flex and remove box formatting */
div[data-callout="multi-column"].callout
{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; }
/* make the subcallout in flex column to allow growing vertically */
div[data-callout="multi-column"].callout .callout { display: flex; flex-direction: column; }
div[data-callout="multi-column"].callout:not(.is-collapsed) .callout { margin: 0 var(--callout-margin) var(--callout-margin); } /* to allow spacing for box shadow */
div[data-callout="multi-column"].callout .callout .callout-content { flex-grow: 1}
div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul) { flex: 1 1 var(--callout-min-width); margin: 0;}
@media (min-width: 500px) {
/* .is-collapsed is used to draw the border-left only when it's collapsed */
div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { background-color: unset; border: unset; box-shadow: unset;}
div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed .callout-title { border-left: 4px solid rgba(var(--callout-color)); border-top-left-radius: 3px;}
}
/* Special Adjustment -- for theme with negative margin & box shadow. (e.g. Prism) */
div[data-callout="multi-column"].callout > .callout-content { margin-top: unset;}
div[data-callout="multi-column"].callout:not(.is-collapsed) { box-shadow: unset;}
/* Special Adjustment -- for minimal left margin */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout="multi-column"].callout
{ width: 100%; max-width: 100%; margin-inline: 0 !important; }
/* -- Multi Flex. Still EXPERIMENTAL, different theme approach border and background too differently */
div[data-callout="multi-column-flex-height"].callout > .callout-title { display: none; }
div[data-callout="multi-column-flex-height"].callout > .callout-content { display: contents; }
div[data-callout="multi-column-flex-height"].callout
{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; }
div[data-callout="multi-column-flex-height"].callout > .callout-content > *:is(div,ul) {flex: 1 1 var(--callout-min-width); margin: 0; }
div[data-callout="multi-column-flex-height"].callout .callout { background: unset; border: unset; box-shadow: unset; }
/* need to reintroduce border-left as original callout put border on the parent callout */
div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-title { border-left: 4px solid rgba(var(--callout-color)); border-top-left-radius: 3px;}
div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-content { margin: 0; border-left: 4px solid rgba(var(--callout-color)); border-bottom-left-radius: 3px; background-color: var(--background-secondary);}
/* "fix" for theme with negative margin & box shadow. Applicable for Prism theme */
div[data-callout="multi-column-flex-height"].callout > .callout-content { margin-top: unset;}
div[data-callout="multi-column-flex-height"].callout:not(.is-collapsed) { box-shadow: unset; }
/* === Blank Container "DIV"'s - can be used with Main Multi-Column layout above === */
div[data-callout="blank-container"].callout > .callout-title { display: none; }
div[data-callout="blank-container"].callout > .callout-content {display: contents;}
div[data-callout="blank-container"].callout { border: 0; padding-top: 0; padding-inline: 5px; background: unset; box-shadow: unset; }
/* -- No Margin -- */
/* issues still persists
- headers font size not same
*/
div[data-callout-metadata*="no-margin"]:is(.cm-callout, .callout.callout, .callout.callout .callout-content) {margin: 0; padding: 0;}
/* fix for Shimmering Focus differing font size in callout */
div[data-callout="blank-container"] .callout-content :is(p,ul,li) { font-size: unset; line-height: inherit; }
div[data-callout="blank-container"] .callout-content :is(li) { margin: unset; }
/* === Text Justify === */
.text-justify :is(.markdown-preview-view p,.markdown-source-view .cm-line) { text-align: justify; }
/* === Floating Callout === */
@media (min-width: 500px){
.markdown-reading-view div[data-callout-metadata|="left"].callout {float: left; margin-right: 15px; margin-bottom: 10px; }
.markdown-reading-view div[data-callout-metadata|="right"].callout {float: right; margin-left: 15px; margin-bottom: 10px; }
div[data-callout^="blank-container"].callout:is(div[data-callout-metadata|="left"], div[data-callout-metadata|="right"]) {margin-top: 0; margin-bottom: 0;}
div[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
div[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
}
@media (min-width: 750px){
div[data-callout-metadata$="large"].callout {width: var(--float-large-width);}
}
.embedded-backlinks, .markdown-preview-view h2 { clear: both; }
/* fix for blockquote underlap the float layout */
.markdown-preview-view :is(blockquote) { overflow-x: auto; } /* fix for blockquote underlap */
.markdown-preview-view :is(p) { overflow: unset; } /* fix for para not wrapping around float. applicable for Willemstad */
/* fix for minimal flex layout by default. to apply per note basis */
.contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; }
/* === Multi Column Lists === */
/* - xx-column-list for first level only list, but apply anywhere */
/* - xx-column-list-block apply at block level - but require JV's Markdown Attributes plugin */
@media (min-width: 500px ){
.two-column-list div > ul,
.two-column-list-block {columns: 2; column-gap: 3rem;}
.three-column-list div > ul,
.three-column-list-block {columns: 3; column-gap: 3rem;}
}
/* - dashboard style, page level only, apply to any first level */
/* -- applicable only when width > 400pt, else just single column */
/* grid list block level cannot be done, it breaks formatting */
@media (min-width: 500px)
{ .two-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(2,1fr);} }
@media (min-width: 600px){
.three-column-grid-list div > ul
{ display: grid; grid-column-gap:3em; grid-template-columns:repeat(3,1fr);}
}
.multi-column-list div > ul,
.multi-column-list-block {
column-width: var(--list-min-width); column-gap: 3rem; column-rule: var(--col-rule-width) solid var(--col-rule-color);
}