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 {
+#welcomeScreen table.examples-container td {
-  width: 100%;
+  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%;
+  font-size: 0.8rem;
-  height: 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>
-          <td>NOTES</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>

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 {
47	margin-bottom: 1rem;	47	margin-bottom: 1rem;
48	}	48	}
49		49
50	#welcomeScreen table {	50	#welcomeScreen table.examples-container td {
51	width: 100%;	51	padding: 0.25rem;
		52	text-align: center;
		53	}
		54
		55	#welcomeScreen table.layout-example {
52	border-collapse: collapse;	56	border-collapse: collapse;
		57	display: inline;
53	}	58	}
54		59
55	#welcomeScreen table td {	60	#welcomeScreen table.layout-example td {
56	text-align: center;	61	text-align: center;
57	border: 1px solid white;	62	border: 1px solid white;
58	width: 50%;	63	font-size: 0.8rem;
59	height: 8rem;	64	height: 2rem;
		65	width: 3.5rem;
60	}	66	}
61		67
62	#welcomeScreen ul {	68	#welcomeScreen ul.bottom-links {
63	list-style-type: none;	69	list-style-type: none;
64	margin: 0;	70	margin: 0;
65	padding: 0;	71	padding: 0;
66	}	72	}
67		73
68	#welcomeScreen li {	74	#welcomeScreen .bottom-links li {
69	display: inline;	75	display: inline;
70	}	76	}
71		77
72	#welcomeScreen li+li::before {	78	#welcomeScreen .bottom-links li+li::before {
73	content: " • ";	79	content: " • ";
74	}	80	}
75		81


diff --git a/index.html b/index.html index 8d7970b..894fd6f 100644 --- a/index.html +++ b/index.html
@@ -37,20 +37,46 @@
37	<p>	37	<p>
38	This web app displays notes and slides in separate windows,	38	This web app displays notes and slides in separate windows,
39	keeping both synchronised.	39	keeping both synchronised.
40	It accepts double-width PDF presentations of the shape:	40	It accepts double-width or double-height PDF presentations:
41	</p>	41	</p>
42	<table>	42
		43	<table class="examples-container">
		44	<th>
		45	<tr>
		46	<td>Shape</td>
		47	<td>L<sup>A</sup>T<sub>E</sub>X-Beamer</td>
		48	</tr>
		49	</th>
		50	<tr>
		51	<td>
		52	<table class="layout-example">
		53	<tr>
		54	<td>SLIDES</td>
		55	<td>NOTES</td>
		56	</tr>
		57	</table>
		58	</td>
		59	<td>
		60	<code>\setbeameroption{show notes on second screen=right}</code>
		61	</td>
		62	</tr>
43	<tr>	63	<tr>
44	<td>SLIDES</td>	64	<td>
45	<td>NOTES</td>	65	<table class="layout-example">
		66	<tr>
		67	<td>SLIDES</td>
		68	</tr>
		69	<tr>
		70	<td>NOTES</td>
		71	</tr>
		72	</table>
		73	</td>
		74	<td>
		75	<code>\setbeameroption{show notes on second screen=bottom}</code>
		76	</td>
46	</tr>	77	</tr>
47	</table>	78	</table>
48		79
49	<p>
50	(for L<sup>A</sup>T<sub>E</sub>X-Beamer:
51	<code>\setbeameroption{show notes on second screen=right}</code>)
52	</p>
53
54	<br />	80	<br />
55		81
56	<p id="warning" class="warning">	82	<p id="warning" class="warning">
@@ -72,7 +98,7 @@
72	</div>	98	</div>
73		99
74	<div>	100	<div>
75	<ul>	101	<ul class="bottom-links">
76	<li><a href="https://pacien.org">© 2024 Pacien</a></li>	102	<li><a href="https://pacien.org">© 2024 Pacien</a></li>
77	<li><a href="https://cgit.pacien.net/beamer-viewer">Source code (EUPL)</a></li>	103	<li><a href="https://cgit.pacien.net/beamer-viewer">Source code (EUPL)</a></li>
78	<li><a href="https://www.paypal.com/paypalme/pacien/15">Donate</a></li>	104	<li><a href="https://www.paypal.com/paypalme/pacien/15">Donate</a></li>