Skip to content

A number of classes to adjust the size of embeds in Obsidian #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

gsusI
Copy link

@gsusI gsusI commented Oct 27, 2022

A number of classes to adjust the size of embeds in Obsidian, they can be used through the pipeline syntax. Some examples:

![[note|w-10vw]] - sets the width of the embed to 10% of the viewport width
![[note|w-100px]] - sets the width of the embed to 100 pixels
![[note|h-10vh]] - sets the height of the embed to 10% of the viewport height
![[note|h-100px]] - sets the height of the embed to 100 pixels

They can be combined using spaces, for example:
![[note|w-10vw h-10vh]]
![[note|w-100px h-100px]]
![[note|w-100px h-10vh]]
![[note|w-10vw h-100px]]

The following classes are available:
.h-100 .. h-2990 in steps of 10
.h-1vh .. h-199vh in steps of 1
.w-100 .. w-2990 in steps of 10
.w-1vw .. w-199vw in steps of 1

gsusI added 2 commits October 27, 2022 11:39
Obsidian, they can be used through the pipeline syntax. Some examples:


![[note|w-10vw]] - sets the width of the embed to 10% of the viewport width
![[note|w-100px]] - sets the width of the embed to 100 pixels
![[note|h-10vh]] - sets the height of the embed to 10% of the viewport height
![[note|h-100px]] - sets the height of the embed to 100 pixels

The following classes are available:
.h-100 .. h-2990 in steps of 10
.h-1vh .. h-199vh in steps of 1
.w-100 .. w-2990 in steps of 10
.w-1vw .. w-199vw in steps of 1


They can be combined using spaces, for example:
![[note|w-10vw h-10vh]]
![[note|w-100px h-100px]]
![[note|w-100px h-10vh]]
![[note|w-10vw h-100px]]
@dustinknopoff
Copy link
Owner

dustinknopoff commented Oct 27, 2022

Hey @gsusI Thanks for submitting a PR! Just a couple things that need to be adjusted so it will show correctly.

  1. The frontmatter described in the README is required (or the page won't build!).
  2. It would fantastic if the CSS was wrapped in a details element.

(i.e.

<details>
<summary>The Code</summary>
!```css
    /* GENERAL IMPROVEMENTS */
     .internal-embed.is-loaded[alt~="styled"] {
         border: 1px solid #ccc;
         border-radius: 5px;
          margin: 20px;
     }
```

Once we make those changes, I'd be happy to merge!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants