[presentation] Replaced (most) flex capabilities with tables

2 files changed, 85 insertions, 44 deletions

diff --git a/awk-edits/Presentation.awk b/awk-edits/Presentation.awk
index 1a718b6..61a606a 100644
--- a/awk-edits/Presentation.awk
+++ b/awk-edits/Presentation.awk
@@ -82,35 +82,56 @@ BEGIN {
 	ended[ 1] = 0
 	names[ 2] = "/font" # all font ftags can be closed with a &&/font
 	ended[ 2] = 0
-
-	names[ 3] = "slide"
+	names[ 3] = "table"
 	ended[ 3] = 1
-	names[ 4] = "centered"
+	names[ 4] = "ftable"
 	ended[ 4] = 1
-	names[ 5] = "flexer"
-	ended[ 5] = 2
-	names[ 6] = "frow"
-	ended[ 6] = 1
-	names[ 7] = "fcol"
-	ended[ 7] = 1
-	names[ 8] = "font18"
-	ended[ 8] = 0
-	names[ 9] = "font20"
-	ended[ 9] = 0
-	names[10] = "font27"
-	ended[10] = 0
-	names[11] = "font30"
-	ended[11] = 0
-	names[12] = "font35"
-	ended[12] = 0
-	names[13] = "fright"
-	ended[13] = 1
-	names[14] = "frcen"
-	ended[14] = 1
-	names[15] = "clide"
-	ended[15] = 1
-	names[16] = "cont"
-	ended[16] = 1
+	names[ 5] = "tarow"
+	ended[ 5] = 0
+
+	# Line breaks
+	names[ 6] = "lineb1"
+	ended[ 6] = 2
+	names[ 7] = "lineb2"
+	ended[ 7] = 2
+	names[ 8] = "lineb3"
+	ended[ 8] = 2
+	names[ 9] = "lineb4"
+	ended[ 9] = 2
+	names[10] = "lineb5"
+	ended[10] = 2
+	names[11] = "lineb6"
+	ended[11] = 2
+	names[12] = "lineb7"
+	ended[12] = 2
+	names[13] = "lineb8"
+	ended[13] = 2
+	names[14] = "lineb9"
+	ended[14] = 2
+
+	# Font sizes
+	names[15] = "font18"
+	ended[15] = 0
+	names[16] = "font20"
+	ended[16] = 0
+	names[17] = "font27"
+	ended[17] = 0
+	names[18] = "font30"
+	ended[18] = 0
+	names[19] = "font35"
+	ended[19] = 0
+
+	# Everything else
+	names[20] = "slide"
+	ended[20] = 1
+	names[21] = "clide"
+	ended[21] = 1
+	names[22] = "centered"
+	ended[22] = 1
+	names[23] = "cont"
+	ended[23] = 1
+	names[24] = "fright"
+	ended[24] = 1
 
 	pres = ORS \
 "<nav id=\"presentCont\">" ORS \
@@ -139,10 +160,12 @@ BEGIN {
 		}
 	}
 
-	rep[14]  = rep[6] rep[5];          # &&frcen  <=> &&frow &&flexer
-	crep[14] = rep[5] crep[6];         # &&/frcen <=> &&flexer &&/frow
-	rep[15]  = rep[3] rep[5] rep[4];   # &&clide  <=> &&slide &&flexer &&centered
-	crep[15] = crep[4] rep[5] crep[3]; # &&/clide <=> &&/centered &&flexer &&/slide
+	rep[3] = "<div class=\"layout-table\"><div class=\"layout-row\">"
+	crep[3] = "</div></div>"
+	rep[4] = "<div class=\"layout-table fixed-layout\"><div class=\"layout-row\">"
+	rep[5] = "</div><div class=\"layout-row\">"
+	rep[21] = "<div class=\"slide clide\"><div></div><div>"
+	crep[21] = "</div><div></div></div>"
 }
 
 function presentationSubstitute(ind) {
diff --git a/src/presentation.css b/src/presentation.css
index db2fe84..fe7b380 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -19,8 +19,6 @@ h2, h3, h4, h5, h6 {
 
 .slide {
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
     height: 210mm;
     padding: 1em;
     width: 297mm; /* Size of landscape A4 paper */
@@ -31,24 +29,16 @@ h2, h3, h4, h5, h6 {
       max-width: 100%;
       /* width: auto; */
     }
+  .slide > p:first-child, .slide > ul:first-child { margin-top: 0; }
   .slide .svg { max-height: 1em !important; }
 
-  .frow, .fcol { display: flex; flex-wrap: nowrap; }
-    .frow, .fcol, .frow > *, .fcol > *, .slide > * {
-        min-height: 0;
-        min-width: 0;
-      }
-    .frow > *, .fcol > * { flex: 1; }
-    .frow { flex-direction: row; }
-      .frow > *:not(:last-child) { margin-right: 0.5em; }
-    .fcol { flex-direction: column; }
-      .fcol > *:not(:last-child) { margin-bottom: 0.5em; }
+  .clide { display: flex; flex-direction: column; }
+    .clide > * { flex: 1; }
 
   .centered { text-align: center; }
     .centered h1::after, .centered h2::after, .centered h3::after {
         content: " \2550"
       }
-  .flexer { flex: 1; }
   .fright { float: right; text-align: right; }
 
   .font35, .font30, .font27, .font20, .font18 {
@@ -60,6 +50,34 @@ h2, h3, h4, h5, h6 {
     .font20 { font-size: 20px; }
     .font18 { font-size: 18px; }
 
+  .layout-table {
+      margin: 0;
+      padding: 0;
+      display: table;
+      width: 100%;
+    }
+    .layout-table > .layout-row {
+        display: table-row;
+      }
+    .layout-row > * {
+        display: table-cell;
+        border: none;
+        padding: 0;
+        vertical-align: middle;
+      }
+    .fixed-layout { table-layout: fixed; }
+
+  .lineb1 { padding: 0.5em; }
+  .lineb2 { padding: 1.0em; }
+  .lineb3 { padding: 1.5em; }
+  .lineb4 { padding: 2.0em; }
+  .lineb5 { padding: 2.5em; }
+  .lineb6 { padding: 3.0em; }
+  .lineb7 { padding: 3.5em; }
+  .lineb8 { padding: 4.0em; }
+  .lineb9 { padding: 4.5em; }
+
+
 /* Presenting mode */
 
 .absolute-slide {