gnab / remark

A simple, in-browser, markdown-driven slideshow tool.
http://remarkjs.com
MIT License
12.67k stars 854 forks source link

Extra space on top of columns #695

Open jcarnat opened 1 year ago

jcarnat commented 1 year ago

Hello,

Following https://github.com/gnab/remark/issues/538, I have implemented two-columns css definition.

The thing is this leads to extra vertical space between title and top of column. See attached screenshot. 2cols

The code is:

      /* Two-column layouts */
      .left-column  { width: 49%; float: left; }
      .right-column { width: 49%; float: right; }

      .left-column-33  { width: 33%; float: left; }
      .right-column-66 { width: 66%; float: right; }

      .left-column-66  { width: 66%; float: left; }
      .right-column-33 { width: 33%; float: right; }

      .right-column ~ p { clear: both; }
      .right-column ~ ul { clear: both; }
(...)
class: center, middle

# A two columns layout

---

# A classical text

=== This is a classical text beginning ate normal height.

---

# 2 columns

.left-column[
=== This is the left column. See how start height is different from previous slide.
]

.right-column[
=== This is the right column. Equal signs are used for better alignment comparison.
]

Some slides have two columns, some don't. So I think I shouldn't modify ".remark-slide-content h1". But I'm not sure how to modify column css to align like the classical paragraph does.

Any ideas? Thanks.

tripu commented 1 year ago

iiuc, this is a generic CSS issue (not specific to remark).

I'd look for solutions elsewhere (perhaps like this)