Skip to content

Commit 44d3c11

Browse files
MasssiveJuice08MasssiveJuice08
committed
Feat: Improve Infobox Callout
- centre it properly on mobile using `margin: auto` - utilize Quartz variables in Quartz scss to prevent repeated style rules for background, border and screenwidth - Hide link anchor on Quartz so Infobox headings are properly centered - make background transparent for cleaner look
1 parent 9fe42bc commit 44d3c11

File tree

2 files changed

+85
-100
lines changed

2 files changed

+85
-100
lines changed

‎content/.obsidian/snippets/mmw-infobox-callout.css

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* infobox callout */
22
.callout[data-callout="infobox"] {
3-
background-color: rgba(80, 120, 180, 0.1);
3+
background-color: transparent;
44
--callout-icon: none;
55
border: 1px solid rgba(255, 255, 255, 0.1);
66
float: right;
@@ -10,18 +10,12 @@
1010
}
1111

1212
/* mobile breakpoint */
13-
@media (max-width: 767px) {
13+
@media screen and (max-width: 767px) {
1414
.callout[data-callout="infobox"] {
1515
width: 100%;
1616
float: none;
17-
}
18-
}
19-
20-
@media (max-width: 480px) {
21-
.callout[data-callout="infobox"] {
22-
width:100%;
23-
float: none;
24-
}
17+
margin: auto;
18+
}
2519
}
2620

2721
/* stack infoboxes vertically with 'clear' */

‎quartz/styles/custom/infobox-callout.scss

+81-90
Original file line numberDiff line numberDiff line change
@@ -3,103 +3,94 @@
33

44
/*----infobox callout----*/
55
.callout[data-callout="infobox"] {
6-
background-color: rgba(80, 120, 180, 0.1);
6+
background-color: transparent;
77
--callout-icon: none;
8-
border: 1px solid rgba(255, 255, 255, 0.1);
8+
border: 1px solid var(--lightgray);
99
float: right;
1010
width: 300px;
1111
margin: 0px 0px 10px 10px;
1212
padding: 5px;
1313
}
14-
15-
/* mobile breakpoint */
16-
@media (max-width: 767px) {
17-
.callout[data-callout="infobox"] {
18-
width: 100%;
19-
float: none;
20-
}
21-
}
22-
23-
@media (max-width: 480px) {
24-
.callout[data-callout="infobox"] {
25-
width:100%;
26-
float: none;
27-
}
28-
}
29-
30-
/* stack infoboxes vertically with 'clear' */
14+
15+
/* mobile breakpoint */
16+
@media screen and (max-width: $mobileBreakpoint) {
3117
.callout[data-callout="infobox"] {
32-
clear: right;
33-
}
34-
35-
/* Remove Callout Title */
36-
.callout[data-callout="infobox"] .callout-title {
37-
display: none;
38-
}
39-
40-
41-
/* H2 Title */
42-
.callout[data-callout="infobox"] h2 {
43-
margin: auto;
44-
max-width: 100%;
45-
font-size: 15px;
46-
text-align: center;
47-
border-radius: 2px;
48-
background-color: rgba(255, 255, 255, 0.1);
49-
padding: 4px;
50-
}
51-
52-
/* H3 Title */
53-
.callout[data-callout="infobox"] h3 {
54-
margin: auto;
55-
max-width: 100%;
56-
font-size: 17px;
57-
text-align: center;
58-
border-radius: 2px;
59-
background-color: rgba(255, 255, 255, 0.1);
60-
padding: 4px;
61-
}
62-
63-
/* Spacing */
64-
.callout[data-callout="infobox"] p {
65-
margin-block-start: 10px;
66-
margin-block-end: 0px;
6718
width: 100%;
68-
}
69-
70-
/* Image */
71-
.callout[data-callout="infobox"] img {
72-
display: block;
73-
margin-left: auto;
74-
margin-right: auto;
75-
max-width: 100%;
76-
}
77-
78-
/* Table */
79-
.callout[data-callout="infobox"] table {
19+
float: none;
8020
margin: auto;
81-
width: 100%;
82-
font-size: 16px;
83-
border: 1px solid rgba(255, 255, 255, 0.1);
84-
background-color: rgb(30, 30, 30);
85-
}
86-
87-
.callout[data-callout="infobox"] th {
88-
padding-left: 12px;
89-
padding-right: 0px;
90-
vertical-align: top;
91-
}
92-
93-
.callout[data-callout="infobox"] td {
94-
padding-left: 12px;
95-
padding-right: 0px;
96-
vertical-align: top;
9721
}
98-
99-
body {
100-
--image-border-color: var(--background-modifier-border);
101-
--image-border-width: 1px;
102-
--image-border-padding: 8px;
103-
--image-border-background: var(--td);
104-
}
105-
22+
}
23+
24+
/* stack infoboxes vertically with 'clear' */
25+
.callout[data-callout="infobox"] {
26+
clear: right;
27+
}
28+
29+
/* Remove Callout Title */
30+
.callout[data-callout="infobox"] .callout-title {
31+
display: none;
32+
}
33+
34+
35+
/* H2 Title */
36+
.callout[data-callout="infobox"] h2 {
37+
margin: auto;
38+
max-width: 100%;
39+
font-size: 15px;
40+
text-align: center;
41+
border-radius: 2px;
42+
background-color: var(--lightgray);
43+
padding: 4px;
44+
}
45+
46+
/* H3 Title */
47+
.callout[data-callout="infobox"] h3 {
48+
margin: auto;
49+
max-width: 100%;
50+
font-size: 17px;
51+
text-align: center;
52+
border-radius: 2px;
53+
background-color: var(--lightgray);
54+
padding: 4px;
55+
}
56+
57+
/* hide anchor in infobox headings so they remain centered */
58+
.callout[data-callout="infobox"] h2 a[role="anchor"], .callout[data-callout="infobox"] h3 a[role="anchor"] {
59+
display: none;
60+
}
61+
62+
/* Spacing */
63+
.callout[data-callout="infobox"] p {
64+
margin-block-start: 10px;
65+
margin-block-end: 0px;
66+
width: 100%;
67+
}
68+
69+
/* Image */
70+
.callout[data-callout="infobox"] img {
71+
display: block;
72+
margin-left: auto;
73+
margin-right: auto;
74+
max-width: 100%;
75+
}
76+
77+
/* Table */
78+
.callout[data-callout="infobox"] table {
79+
margin: auto;
80+
width: 100%;
81+
font-size: 16px;
82+
border: 1px solid rgba(255, 255, 255, 0.1);
83+
background-color: rgb(30, 30, 30);
84+
}
85+
86+
.callout[data-callout="infobox"] th {
87+
padding-left: 12px;
88+
padding-right: 0px;
89+
vertical-align: top;
90+
}
91+
92+
.callout[data-callout="infobox"] td {
93+
padding-left: 12px;
94+
padding-right: 0px;
95+
vertical-align: top;
96+
}

0 commit comments

Comments
 (0)