From mboxrd@z Thu Jan 1 00:00:00 1970 From: Matt Price Subject: Re: org-reveal: content side by side Date: Mon, 5 Feb 2018 19:37:39 -0500 Message-ID: References: <87lgg9c96y.fsf@luisa.c0t0d0s0.de> <87po5k61af.fsf@luisa.c0t0d0s0.de> Mime-Version: 1.0 Content-Type: multipart/alternative; boundary="001a113c5976dcff7c05648062e4" Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:48889) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1eirGa-0008Mp-7P for emacs-orgmode@gnu.org; Mon, 05 Feb 2018 19:37:45 -0500 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1eirGY-0003b0-VN for emacs-orgmode@gnu.org; Mon, 05 Feb 2018 19:37:44 -0500 Received: from mail-lf0-x22b.google.com ([2a00:1450:4010:c07::22b]:42601) by eggs.gnu.org with esmtps (TLS1.0:RSA_AES_128_CBC_SHA1:16) (Exim 4.71) (envelope-from ) id 1eirGY-0003ZY-Jp for emacs-orgmode@gnu.org; Mon, 05 Feb 2018 19:37:42 -0500 Received: by mail-lf0-x22b.google.com with SMTP id q17so238806lfa.9 for ; Mon, 05 Feb 2018 16:37:42 -0800 (PST) In-Reply-To: <87po5k61af.fsf@luisa.c0t0d0s0.de> List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: "Emacs-orgmode" To: Michael Welle , Org Mode --001a113c5976dcff7c05648062e4 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable for this issue, I define a class "paired" in my local cass file (or actually, I now use a very modestly edited custom theme) : .paired { float:left !important; max-width:47% !important; } and then in the org file: :#+ATTR_HTML: :class paired That works OK for me. the "!important" is necessary because reveal css is prtty greedy & hard to override. On Sun, Feb 4, 2018 at 1:46 PM, Michael Welle wrote: > Hello, > > took me the better part of the afternoon, but I came up with the > following approach: > > > > * Was ist Virtualisierung? > - Aus der Wikipedia: > #+BEGIN_QUOTE > Virtualisierung bezeichnet in der Informatik die Nachbildung eines > Hard- oder Software-Objekts durch ein =C3=A4hnliches Objekt vom selben Ty= p > mit Hilfe eines Abstraktions-Layers. > #+END_QUOTE > > > #+REVEAL_HTML:
width:60%;"> > > #+REVEAL_HTML:
> [[./img/1290250232.svg]] > #+REVEAL_HTML:
> > #+REVEAL_HTML:
> [[./img/Machovka-chip.svg]] > #+REVEAL_HTML:
> > #+REVEAL_HTML:
> [[./img/SAN-Disk-Array-SCSI-29.07.11.svg]] > #+REVEAL_HTML:
> > #+REVEAL_HTML:
> > > That resembles the slide from [0] to a certain degree. The three images > are centered, vertically and horizontally, even if they are of different > sizes. I'm not sure though how good the support for display:flex is, > esp. when it comes to mobile devices. And, for my taste at least, that > approach needs too much knowledge about style sheets. Still looking for > a nicer solution ;). > > Regards > hmw > > [0] https://www.c0t0d0s0.de/tmp/vm1.png > > --001a113c5976dcff7c05648062e4 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
for this issue, I define a class "paired" i= n my local cass file (or actually, I now use a very modestly edited custom = theme) :


.paired {
=C2=A0=C2=A0=C2=A0 float= :left !important;
=C2=A0=C2=A0=C2=A0 max-width:47% !important;
=C2=A0= =C2=A0=C2=A0
}

and then in the org file:
:#+ATTR_HTML: :class paired

That work= s OK for me. the "!important" is necessary because reveal css is = prtty greedy & hard to override.=C2=A0

On Sun, Feb 4, 2018 at 1:46 PM, M= ichael Welle <mwe012008@gmx.net> wrote:
Hello,

took me the better part of the afternoon, but I came up with the
following approach:



* Was ist Virtualisierung?
- Aus der Wikipedia:
#+BEGIN_QUOTE
Virtualisierung bezeichnet in der Informatik die Nachbildung eines
Hard- oder Software-Objekts durch ein =C3=A4hnliches Objekt vom selben Typ<= br> mit Hilfe eines Abstraktions-Layers.
#+END_QUOTE


#+REVEAL_HTML: <div style=3D"display:flex;align-items:center;m= argin:auto;width:60%;">

#+REVEAL_HTML: <div style=3D"width:30%">
[[./img/1290250232.svg]]
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div style=3D"width:30%">
[[./img/Machovka-chip.svg]]
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div style=3D"width:30%">
[[./img/SAN-Disk-Array-SCSI-29.07.11.svg]]
#+REVEAL_HTML: </div>

#+REVEAL_HTML: </div>


That resembles the slide from [0] to a certain degree. The three images
are centered, vertically and horizontally, even if they are of different sizes. I'm not sure though how good the support for display:flex is, esp. when it comes to mobile devices. And, for my taste at least, that
approach needs too much knowledge about style sheets. Still looking for
a nicer solution ;).

Regards
hmw

[0] https://www.c0t0d0s0.de/tmp/vm1.png


--001a113c5976dcff7c05648062e4--