#69

Can you point to where I can find this transclusion code?

#70

I believe this is the snippet you’re referring to:

1 Like
#71

Thank you!

#72

Really, really nice. This deserves to be a plugin IMO.

1 Like
#73

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.

#74

Cries in Windows

#75

image
image1920×1080 282 KB

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
#76

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?

#78

Care to share the CSS you using here?

#80

Thank you. Really like the colors.

#81

@sergy Please keep the thread focused on modifications to the Minimal Theme, thanks :slight_smile:

#82

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.

#83

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
#84

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 :wink:

1 Like
#85

Boom!! TY

1 Like
#86

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
#87

This is the Sliding Panes plugin

#88

I meant how @Joschua manages to get the verses to accompany the text itself.
Like so:
image

1 Like
#89

@Joschua changed the CSS for H6 elements. Here’s his snippet:

2 Likes
#90

@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.