Skip to content

Commit 7e4db3f

Browse files
MasssiveJuice08MasssiveJuice08
committed
Chore: Reorganise CSS files
- renamed CSS snippets to follow MMW file naming conventions - split up `custom.scss` into SCSS modules to make it easier to read
1 parent 33704ed commit 7e4db3f

16 files changed

+1030
-1007
lines changed

Diff for: ‎content/.obsidian/snippets/MMW_Callout_Adjustments.css renamed to ‎content/.obsidian/snippets/mmw-callout-adjustments.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Caption_Callout.css renamed to ‎content/.obsidian/snippets/mmw-caption-callout.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Column_Callout.css renamed to ‎content/.obsidian/snippets/mmw-column-callout.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Image-Adjustments.css renamed to ‎content/.obsidian/snippets/mmw-image-adjustments.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Infobox_Callout.css renamed to ‎content/.obsidian/snippets/mmw-infobox-callout.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_kbd_styling.css renamed to ‎content/.obsidian/snippets/mmw-kbd-styling.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Maintenance_Template.css renamed to ‎content/.obsidian/snippets/mmw-maintenance-template-callout.css

File renamed without changes.

Diff for: ‎content/.obsidian/snippets/MMW_Transclusion_Adjustments.css renamed to ‎content/.obsidian/snippets/mmw-transclusion-adjustments.css

File renamed without changes.

Diff for: ‎quartz/styles/custom.scss

+8-1,007
Large diffs are not rendered by default.

Diff for: ‎quartz/styles/custom/callout-adjustments.scss

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

Diff for: ‎quartz/styles/custom/caption-callout.scss

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@use "../base.scss";
2+
@use "../variables.scss" as *;
3+
4+
/*----Caption Callout----*/
5+
6+
.callout.callout[data-callout~=caption] {
7+
background: transparent;
8+
text-align: center;
9+
box-shadow: none;
10+
border: 0;
11+
padding: 0;
12+
margin: 0;
13+
--callout-content-padding: 0;
14+
max-width: 30vh;
15+
}
16+
.callout.callout[data-callout~=caption] > .callout-content {
17+
overflow: hidden;
18+
}
19+
/*. callout.callout[data-callout~=caption] > .callout-content > p :is(.image-embed, img) + br {
20+
display: none;
21+
} */
22+
23+
/*unneeded as `.image-embed` relates to image embedding in Reading Mode vs Live Preview */
24+
25+
.callout.callout[data-callout~=caption] > .callout-content img {
26+
display: block;
27+
margin: auto;
28+
}
29+
.callout.callout[data-callout~=caption] > .callout-title {
30+
display: none;
31+
}
32+
.callout.callout[data-callout~=caption] p {
33+
margin-block-start: 0;
34+
margin-block-end: 0;
35+
color: var(--gray);
36+
}
37+
.callout.callout[data-callout~=caption]:is([data-callout-metadata~=sban], [data-callout-metadata~=banner]) .image-embed img {
38+
width: 100%;
39+
}
40+

Diff for: ‎quartz/styles/custom/column-callout.scss

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

0 commit comments

Comments
 (0)