Markdown styles

[anothergituser]

In a markdown field using something like # before text will make the element an h1, but with default styles from reset.css Also it will not apply local css over reset.css except from site css

[anothergituser]

Another thing, not related to the previous issue, is about removing pages, it would be nice to have a confirm dialog just in case we remove something not intended. Also an up and down arrow like in the component fields to reorder pages would be nice.

Thank you.

[mateomorris]

You have to use the :global css selector to target elements created by the Markdown field. Here's an example of the 'Content' block in the Primo Library

which uses these styles:

.content {
  :global(img) {
    width: 100%;
    margin: 2rem 0;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
  }

  :global(p) {
    padding: 0.25rem 0;
    line-height: 1.5;
    font-family: var(--body-font);
    font-weight: 400;
    margin-bottom: 1rem;
    color: #2d3339;
  }

  :global(a) {
    text-decoration: underline;
  }

  :global(h1) {
    font-size: clamp(1.75rem, 10vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.08rem;
    margin-bottom: 1rem;
    line-height: 1.1;
  }

  :global(h2) {
    font-size: clamp(1.5rem, 10vw, 2.125rem);
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.06rem;
    line-height: 1.1;
  }

  :global(h3) {
    font-size: clamp(1.25rem, 10vw, 1.75rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: -0.05rem;
    line-height: 1.1;
  }

  :global(ul) {
    list-style: disc;
    padding: 0.25rem 0;
    padding-left: 1.25rem;
  }

  :global(ol) {
    list-style: decimal;
    padding-left: 1.25rem;
    margin-bottom: 2rem;
  }

  :global(blockquote) {
    padding: 2rem;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
  }
}

[mateomorris]

Another thing, not related to the previous issue, is about removing pages, it would be nice to have a confirm dialog just in case we remove something not intended.

A confirm dialog would make deleting multiple pages tedious. You could always undo the change from the toolbar, although it would be better if it shows up in the modal when you delete a page.

Also an up and down arrow like in the component fields to reorder pages would be nice.

A drag handle to move them around wouldn't be too difficult - feel free to open a separate issue

[mateomorris]

working on a better approach to the reset css that leaves some basic styling, will be available on new themes in the next version coming up