Patching up the Presentation Mode

[y_p]

The current state of the Presentation Mode is, unfortunately, quite underwhelming.
However, a large part of it can be fixed by simply adding some custom CSS.

.reveal {
    
    & .embedded {
    aspect-ratio: 16/9;
    height: auto!important;
    }
    
    & ol ol {
        list-style-type: upper-roman;
        
        & ol {
            list-style-type: lower-latin;
        }
    }
}

The above will:

• Fix the rendering of the preview window
• Style the first three levels of nested ordered lists differently.

Before:

After:

[y_p]

Updated version with customizable accent color, background color, font settings, control color, and frame.

/* Presentation Mode */

:root {
  --pm-background-color: #e2dfd0;
  --pm-heading-color: #000;
  --pm-heading-line-height: 1.2;
  --pm-heading-align: center;
  --pm-heading1-size: calc(var(--pm-bodytext-size) * 2.6);
  --pm-heading2-size: calc(var(--pm-bodytext-size) * 2.2);
  --pm-heading3-size: calc(var(--pm-bodytext-size) * 1.7);
  --pm-heading4-size: calc(var(--pm-bodytext-size) * 1.4);
  --pm-bodytext-font: "Liberation Serif";
  --pm-bodytext-size: 2.4rem;
  --pm-bodytext-color: #222;
  --pm-bodytext-line-height: 1.6;
  --pm-bodytext-align: justify;
  --pm-ordered-lv2: upper-roman;
  --pm-ordered-lv3: lower-latin;
  --pm-heading-font: "Liberation Serif";
  --pm-accent-color: #eda86c;
  --pm-control-color: #000;
  --pm-frame-color: #fff;
  --pm-frame-width: 10px;
  --pm-progress-bgcolor: rgba(0, 0, 0, 0.2);

}

.reveal {
  background-color: var(--pm-background-color);
  font-family: var(--pm-bodytext-font);
  font-size: var(--pm-bodytext-size);
  line-height: var(--pm-bodytext-line-height);
  color: var(--pm-bodytext-color);

  & .embedded {
    aspect-ratio: 16/9;
    height: auto !important;
  }
  & :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--pm-heading-font);
    line-height: var(--pm-heading-line-height);
    color: var(--pm-heading-color) !important;
    text-align: var(--pm-heading-align);
    padding: var(--pm-heading-padding);
  }
  & h1 {
    font-size: var(--pm-heading1-size);
  }
  & h2 {
    font-size: var(--pm-heading2-size);
  }
  & h3 {
    font-size: var(--pm-heading3-size);
  }
  & h4 {
    font-size: var(--pm-heading4-size);
  }
  & :is(ol, ul, .block-main-container) {
    text-align: var(--pm-bodytext-align);
  }
  & ol ol {
    list-style-type: var(--pm-ordered-lv2);

    & ol {
      list-style-type: var(--pm-ordered-lv3);
    }
  }
  & li::marker {
    color: var(--pm-accent-color);
  }
  & .backgrounds {
    padding: var(--pm-frame-width) var(--pm-frame-width) 0 var(--pm-frame-width);
    box-shadow: 0 0 0 var(--pm-frame-width) var(--pm-frame-color) inset;
  }
  & .controls {
    right: calc(var(--pm-frame-width) * 2);
    bottom: calc(var(--pm-frame-width) * 2);
    color: var(--pm-control-color);
  }
  & .progress {
    color: var(--pm-frame-color);
    background: var(--pm-progress-bgcolor);
    height: var(--pm-frame-width);
    width: calc(100% - var(--pm-frame-width) * 2);
    margin-left: var(--pm-frame-width);
  }
}

[y_p]

It took me quite a while to untangle Logseq’s css conflicts but now there’s a complete solution! And it works with your favorite Logseq themes to boost!

Github page

Online demo hosted on Github Pages

[Ramses]

Amazing work @y_p, THANK YOU!

I’m about to give some presentations with Logseq, so these snippets come right in time.

@tienson @Charlie it would be nice if this were part of Logseq natively.

[y_p]

I commented every line of pmfixer.css for easier implementation in the official release.

And I just released version 1.0 that includes all the official themes.

Good luck with your presentation!

[else]

Pretty cool! Do you think you could publish this as a plugin? It’d probably get way more attention!

[y_p]

No, I do not know Type/JavaScript and have no time to learn it now. However, anyone is free to take the code and turn it into a plugin.
I could turn it into a theme easily, but then you would not be able to use it in tandem with your favorite themes.
The most I can do to simplify it’s usage is to host the whole thing online and simplify it to a single line of import you can add to your custom.css. However, that would render it useless when you are offline.