fix: Updated non-styles.css stylesheets format

1 files changed, 149 insertions, 135 deletions

diff --git a/src/presentation.css b/src/presentation.css
index 01b1a6f..a508f23 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -1,157 +1,171 @@
-/* These styles are located here for easy retrieval in JS */
+/*## These styles are located here for easy retrieval in JS ##*/
 
 .slide {
-    box-sizing: border-box;
-    height: 210mm;
-    padding: 30px;
-    width: 297mm; /* Size of landscape A4 paper */
-    font-size: 30px;
-    transform-origin: 0 0;
-    margin-bottom: 30px;
-  }
+  box-sizing: border-box;
+  height: 210mm;
+  padding: 30px;
+  width: 297mm; /* Size of landscape A4 paper */
+  font-size: 30px;
+  transform-origin: 0 0;
+  margin-bottom: 30px;
+}
 .absolute-slide {
-    border: none !important;
-    left: 50%;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transform-origin: center center;
-    visibility: visible;
-  }
-  .absolute-slide .clicked-image {
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-/* Stylesheet override */
+  border: none !important;
+  left: 50%;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center center;
+  visibility: visible;
+}
+.absolute-slide .clicked-image {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 
-/* Presentation controller */
+/*## Presentation controller ##*/
 
 #presentCont { margin: 0.5em 0.5em 0.5em 0; }
-  #presentCont > span { font-size: 1.4em; }
-  /* Presenting mode */
-  #presentCont { display: initial; }
+#presentCont > span { font-size: 1.4em; }
+/* Presenting mode */
+#presentCont { display: initial; }
 
-/* Slides styles
+/*## Slide ##*/
 
-.slide {...} */
-  .slide img:not(.clicked-image) {
-      height: auto;
-      max-height: 100%;
-      max-width: 100%;
-      /* width: auto; */
-    }
-  .slide:not(.absolute-slide) img { pointer-events: none; }
-  .slide td { font: inherit; }
-  .slide > *:first-child, .slide > div:only-child > *:first-child,
-  .slide > ul:first-child > li:first-child > *:first-child,
-  .slide > div:only-child > ul:first-child > li:first-child > *:first-child,
-  .slide > ol:first-child > li:first-child > *:first-child,
-  .slide > div:only-child > ol:first-child > li:first-child > *:first-child {
-      margin-top: 0;
-    }
-  .slide ul, .slide ol { padding-inline-start: 30px; margin: 0; }
-  .slide .svg          { max-height: 1em !important; }
-  .slide h2, .slide h3, .slide h4, .slide h5, .slide h6 {
-      display: block;
-      margin-block-start: 0;
-      margin-block-end: 0.5em;
-    }
-  .slide .h-anchor, .slide .gap, .slide .gap-small { display: none; }
+.centered-slide { display: flex; flex-direction: column; }
+.centered-slide > * { flex: 1; }
 
-  .centered-slide { display: flex; flex-direction: column; }
-    .centered-slide > * { flex: 1; }
+/*### Slide > * ###*/
 
-  .centered,
-  .centered .width5per, .centered .width10per, .centered .width15per, .centered .width20per,
-  .centered .width25per, .centered .width30per, .centered .width35per, .centered .width40per,
-  .centered .width45per, .centered .width50per, .centered .width55per, .centered .width60per,
-  .centered .width65per, .centered .width70per, .centered .width75per, .centered .width80per,
-  .centered .width85per, .centered .width90per, .centered .width95per
-  { margin-left: auto; margin-right: auto; text-align: center; }
-  .float-right { float: right; text-align: right; }
-  * + .float-right { margin-left: 1em; }
+.slide img:not(.clicked-image) {
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  /* width: auto; */
+}
 
-  .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.1em;
-        vertical-align: middle;
-      }
-    .layout-row li { margin-left: 30px; }
-    .fixed-layout { table-layout: fixed; }
+.slide > *:first-child, .slide > div:only-child > *:first-child,
+.slide > ul:first-child > li:first-child > *:first-child,
+.slide > div:only-child > ul:first-child > li:first-child > *:first-child,
+.slide > ol:first-child > li:first-child > *:first-child,
+.slide > div:only-child > ol:first-child > li:first-child > *:first-child
+{
+  margin-top: 0;
+}
 
-  .font18 { font-size: 18px; }
-  .font20 { font-size: 20px; }
-  .font22 { font-size: 22px; }
-  .font25 { font-size: 25px; }
-  .font27 { font-size: 27px; }
-  .font35 { font-size: 35px; }
+.slide:not(.absolute-slide) img { pointer-events: none; }
+.slide td { font: inherit; }
+.slide ul, .slide ol { padding-inline-start: 30px; margin: 0; }
+.slide .svg          { max-height: 1em !important; }
+.slide h2, .slide h3, .slide h4, .slide h5, .slide h6 {
+  display: block;
+  margin-block-start: 0;
+  margin-block-end: 0.5em;
+}
+.slide .h-anchor, .slide .gap, .slide .gap-small { display: none; }
 
-  .br1 { padding: 0.5em; }
-  .br2 { padding: 1.0em; }
-  .br3 { padding: 1.5em; }
-  .br4 { padding: 2.0em; }
-  .br5 { padding: 2.5em; }
-  .br6 { padding: 3.0em; }
-  .br7 { padding: 3.5em; }
-  .br8 { padding: 4.0em; }
-  .br9 { padding: 4.5em; }
+/*### Slide > centered, width ###*/
 
-  .width5per  { width:  5%; }
-  .width10per { width: 10%; }
-  .width15per { width: 15%; }
-  .width20per { width: 20%; }
-  .width25per { width: 25%; }
-  .width30per { width: 30%; }
-  .width35per { width: 35%; }
-  .width40per { width: 40%; }
-  .width45per { width: 45%; }
-  .width50per { width: 50%; }
-  .width55per { width: 55%; }
-  .width60per { width: 60%; }
-  .width65per { width: 65%; }
-  .width70per { width: 70%; }
-  .width75per { width: 75%; }
-  .width80per { width: 80%; }
-  .width85per { width: 85%; }
-  .width90per { width: 90%; }
-  .width95per { width: 95%; }
+.centered,
+.centered  .width5per, .centered .width10per, .centered .width15per, .centered .width20per,
+.centered .width25per, .centered .width30per, .centered .width35per, .centered .width40per,
+.centered .width45per, .centered .width50per, .centered .width55per, .centered .width60per,
+.centered .width65per, .centered .width70per, .centered .width75per, .centered .width80per,
+.centered .width85per, .centered .width90per, .centered .width95per
+{
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
 
-/* Presenting mode
+.width5per  { width:  5%; }
+.width10per { width: 10%; }
+.width15per { width: 15%; }
+.width20per { width: 20%; }
+.width25per { width: 25%; }
+.width30per { width: 30%; }
+.width35per { width: 35%; }
+.width40per { width: 40%; }
+.width45per { width: 45%; }
+.width50per { width: 50%; }
+.width55per { width: 55%; }
+.width60per { width: 60%; }
+.width65per { width: 65%; }
+.width70per { width: 70%; }
+.width75per { width: 75%; }
+.width80per { width: 80%; }
+.width85per { width: 85%; }
+.width90per { width: 90%; }
+.width95per { width: 95%; }
 
-absolute-slide {...} */
-  .invisible { visibility: hidden; }
-  .no-overflow { overflow: hidden; }
-  .body-bg-color { background-color: var(--bg-color); }
+/*### Slide > float-right ###*/
+
+.float-right { float: right; text-align: right; }
+* + .float-right { margin-left: 1em; }
+
+/*### Slide > layout table ###*/
+
+.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.1em;
+  vertical-align: middle;
+}
+.layout-row li { margin-left: 30px; }
+.fixed-layout { table-layout: fixed; }
+
+/*### Slide > font, br ###*/
+
+.font18 { font-size: 18px; }
+.font20 { font-size: 20px; }
+.font22 { font-size: 22px; }
+.font25 { font-size: 25px; }
+.font27 { font-size: 27px; }
+.font35 { font-size: 35px; }
+
+.br1 { padding: 0.5em; }
+.br2 { padding: 1.0em; }
+.br3 { padding: 1.5em; }
+.br4 { padding: 2.0em; }
+.br5 { padding: 2.5em; }
+.br6 { padding: 3.0em; }
+.br7 { padding: 3.5em; }
+.br8 { padding: 4.0em; }
+.br9 { padding: 4.5em; }
+
+/*## Presenting ##*/
+
+.invisible { visibility: hidden; }
+.no-overflow { overflow: hidden; }
+.body-bg-color { background-color: var(--bg-color); }
 
 .absolute-cont {
-    bottom: 0;
-    opacity: 0.4;
-    position: absolute;
-    right: 0;
-    transition: opacity 0.5s linear 0s;
-    visibility: visible;
-    z-index: 10;
-  }
-  .absolute-cont:hover { opacity: 0.4; }
-  /* In case your browser doesn't support :hover */
-  .absolute-cont:not(:hover) { opacity: 0; }
-  #slideIndex { border: none; font-size: 1.6em; }
+  bottom: 0;
+  opacity: 0.4;
+  position: absolute;
+  right: 0;
+  transition: opacity 0.5s linear 0s;
+  visibility: visible;
+  z-index: 10;
+}
+.absolute-cont:hover { opacity: 0.4; }
+/* In case your browser doesn't support :hover */
+.absolute-cont:not(:hover) { opacity: 0; }
+#slideIndex { border: none; font-size: 1.6em; }
 
-/* Media specific stylings */
+/*## Media specific stylings ##*/
 
 @media screen {
   .slide {