welcome screen: document support for vertical split

2 files changed, 50 insertions, 18 deletions

diff --git a/beamer/viewer/viewer.css b/beamer/viewer/viewer.css
index 1c8aef6..c003439 100644
--- a/beamer/viewer/viewer.css
+++ b/beamer/viewer/viewer.css
@@ -47,29 +47,35 @@ header span {
   margin-bottom: 1rem;
 }
 
-#welcomeScreen table {
-  width: 100%;
+#welcomeScreen table.examples-container td {
+  padding: 0.25rem;
+  text-align: center;
+}
+
+#welcomeScreen table.layout-example {
   border-collapse: collapse;
+  display: inline;
 }
 
-#welcomeScreen table td {
+#welcomeScreen table.layout-example td {
   text-align: center;
   border: 1px solid white;
-  width: 50%;
-  height: 8rem;
+  font-size: 0.8rem;
+  height: 2rem;
+  width: 3.5rem;
 }
 
-#welcomeScreen ul {
+#welcomeScreen ul.bottom-links {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-#welcomeScreen li {
+#welcomeScreen .bottom-links li {
   display: inline;
 }
 
-#welcomeScreen li+li::before {
+#welcomeScreen .bottom-links li+li::before {
   content: " • ";
 }
 
diff --git a/index.html b/index.html
index 8d7970b..894fd6f 100644
--- a/index.html
+++ b/index.html
@@ -37,20 +37,46 @@
       <p>
         This web app displays notes and slides in separate windows,
         keeping both synchronised.
-        It accepts double-width PDF presentations of the shape:
+        It accepts double-width or double-height PDF presentations:
       </p>
-      <table>
+
+      <table class="examples-container">
+        <th>
+          <tr>
+            <td>Shape</td>
+            <td>L<sup>A</sup>T<sub>E</sub>X-Beamer</td>
+          </tr>
+        </th>
+        <tr>
+          <td>
+            <table class="layout-example">
+              <tr>
+                <td>SLIDES</td>
+                <td>NOTES</td>
+              </tr>
+            </table>
+          </td>
+          <td>
+            <code>\setbeameroption{show notes on second screen=right}</code>
+          </td>
+        </tr>
         <tr>
-          <td>SLIDES</td>
-          <td>NOTES</td>
+          <td>
+            <table class="layout-example">
+              <tr>
+                <td>SLIDES</td>
+              </tr>
+              <tr>
+                <td>NOTES</td>
+              </tr>
+            </table>
+          </td>
+          <td>
+            <code>\setbeameroption{show notes on second screen=bottom}</code>
+          </td>
         </tr>
       </table>
 
-      <p>
-        (for L<sup>A</sup>T<sub>E</sub>X-Beamer:
-        <code>\setbeameroption{show notes on second screen=right}</code>)
-      </p>
-
       <br />
 
       <p id="warning" class="warning">
@@ -72,7 +98,7 @@
     </div>
 
     <div>
-      <ul>
+      <ul class="bottom-links">
         <li><a href="https://pacien.org">&copy; 2024 Pacien</a></li>
         <li><a href="https://cgit.pacien.net/beamer-viewer">Source code (EUPL)</a></li>
         <li><a href="https://www.paypal.com/paypalme/pacien/15">Donate</a></li>