Can you point to where I can find this transclusion code?
I believe this is the snippet you’re referring to:
1 Like
Thank you!
Really, really nice. This deserves to be a plugin IMO.
1 Like
There’s a tool called CleanShot X on the mac that can take screenshots with shadows. And you can set a custom background color in it. Not sure if he used it, but it’s great. It’s part of the Setapp (referral link for 1 free month both) offering, and you can purchase it from the developer.
Cries in Windows
Using CSS Snippets to some changes:
- UI Font: Noto Sans Medium
- Edit/Preview Mode: iA Fonts
- Change Headings sizes
- Change style of
element (e.g.:Something) - Cursor width
- Quote style
2 Likes
Hello does this still work? I am unable to achieve this result with the Minimal theme and your CSS.
In addition, do you know if it is possible to only make the sidebar transparent?
Care to share the CSS you using here?
Thank you. Really like the colors.
Anyone would mind sharing a CSS snippet to increase Minimal’s default size for headers?
I find it difficult do differentiate between H2, H3 from regular bold text. And don’t know how to start creating CSS snippets of my own.
Here is mine FWIW…
/* Headings and fonts */
h1,h4,h5,strong {font-weight:var(--bold-weight);}
h1,h2,h3,h4 {letter-spacing:-0.01em;}
h1,h2,h6 {
text-rendering: optimizeLegibility !important;
font-feature-settings: "kern"!important;
}
body, input, button,
.cm-s-obsidian .cm-formatting-hashtag,
.cm-s-obsidian {
font-family:var(--text) !important;
font-size:var(--font-normal);
font-weight:var(--normal-weight);
line-height:var(--line-height);
letter-spacing: 0.02em;
-webkit-font-smoothing:subpixel-antialiased;
}
.markdown-source-view,
.cm-s-obsidian .cm-formatting-hashtag,
.cm-s-obsidian {
line-height:var(--line-height);
font-family:var(--text-editor) !important;
}
.cm-s-obsidian .cm-header,
.cm-s-obsidian .cm-strong {
font-weight:var(--bold-weight);
}
.cm-formatting-header {
color:var(--text-faint) !important;
font-weight:var(--normal-weight) !important;
}
.view-header-title,
.file-embed-title,
.markdown-embed-title {
letter-spacing:-0.01em;
text-align:left;
font-size:0.75em;
font-weight:var(--normal-weight);
color: var(--interactive-accent);
padding-top: 1px;
}
.markdown-embed {
background-color: var(--background-modifier-box-shadow);
border-top: 2px;
border-top-color: #6c6c6c;
}
.empty-state-title,
.markdown-preview-view h1,
.HyperMD-header-1,
.cm-header-1 {
font-family:"Mint Grotesk V1.0","Newsreader","Goldman Sans","Frank Ruhl Libre","Financier Display Test","Apud Medium","Orbikular TRIAL";
letter-spacing:0.04em;
font-size:1.5em;
line-height:1.3;
font-weight:800!important;
text-transform: uppercase;
background-color: var(--interactive-a);
color:rgba(250, 250, 250, 0.90);
text-align:center!important;
text-rendering: optimizeLegibility;
}
.markdown-preview-view h2,
.HyperMD-header-2,
.cm-header-2 {
font-family:"Mint Grotesk V1.0","Goldman Sans","Newsreader","Frank Ruhl Libre","Financier Display Test", "Apud Medium","Orbikular TRIAL";
letter-spacing:-0.02em;
font-weight:800 !important;
text-transform: uppercase;
font: size 1.1em !important;
line-height:1.4;
color:var(--interactive-accent);
margin: 5px 0 5px;
margin-block-start: 8px;
}
.markdown-preview-view h3,
.HyperMD-header-3,
.cm-header-3 {
font-family:"Mint Grotesk V1.0";
letter-spacing: 0.02em;
font-weight: 800 !important;
font-size: 0.9em !important;
text-transform: uppercase;
line-height:1.2;
text-align: left;
color:var(--interactive-accent);
padding-left:10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.markdown-preview-view h4,
.HyperMD-header-4,
.cm-header-4 {
text-transform: uppercase;
letter-spacing:0.04em;
color:var(--text-normal);
font-weight:600 !important;
font-size:1em !important;
padding-left:26px;
}
.markdown-preview-view h5,
.HyperMD-header-5,
.cm-header-5 {
font-variant:small-caps;
text-transform:lowercase;
letter-spacing:0.05em;
color:var(--text-normal);
font-weight:300 !important;
font: size 0.94em !important;
}
.markdown-preview-view h6,
.HyperMD-header-6,
.cm-header-6 {
font-family:"Mint Grotesk V1.0";
text-transform: uppercase;
letter-spacing:0.1em;
color:var(--interactive-accent);
font-weight:500 !important;
font: size 0.94em !important;
text-align: center;
}
/* --------------- */
2 Likes
If you type two extra ` after the ones you already typed at start and end of your code then you get a beautiful code block 
1 Like
Boom!! TY
1 Like
Hi! Would you be willing the show/explain how you achieved the heading being on the side of the text, rather than above it (so, basically, making a side heading)? Thanks in advance.
1 Like
This is the Sliding Panes plugin
@kepano , does the font-weight of preview mode somehow have a minimum value in place? I can’t seem to set it under 300, whilst it works in source mode for the same font.