refactor: change the default presentations dimensions

I changed the default dimensions from `45x80` to `4500x8000`, so by a factor of
100. The reason I did this is so that you're able to use tailwind classes with
0.01 unit accuracy. Before if you wanted to use something that was not exactly
an integer unit you'd have to resort to the `calc` and `var` CSS functions.
That is not that clean as you'd have to add a style attribute and then add CSS,
which is a lot of extra text. The only problem now is that unit is tiny, so you
have to specify width as `2000` for example. I think this is a trade of that is
worth it.

Author: Tygo-van-den-Hurk

browser/css/modes/base.ts

@@ -69,7 +69,7 @@ const latex = /*CSS*/ `
   }
 `;
 
-const fontSize = 1;
+const fontSize = 100;
 
 /** The CSS related to the body. */
 const body = /*CSS*/ `

browser/css/modes/pdf.ts

@@ -17,7 +17,7 @@ const body = /*CSS*/ `
 // eslint-disable-next-line no-inline-comments
 const slide = /*CSS*/ `
   body slyde-component[level="${Component.level.slide}"] {
-    margin-bottom: var(--unit);
+    margin-bottom: calc(var(--unit) * 100);
   }
 
   body slyde-component[level="${Component.level.slide}"]:last-child {

browser/css/tw-config.ts

@@ -2,7 +2,7 @@ import type { SlydeHtmlDocumentCssProperties } from '#browser/css/types';
 
 /** Tells the config to force this to scale only using `--unit`. */
 const scaleWithUnit = Object.fromEntries(
-  Array.from({ length: 1000 }, (_ignore, amount) => [amount, `calc(${amount} * var(--unit))`])
+  Array.from({ length: 10000 }, (_ignore, amount) => [amount, `calc(${amount} * var(--unit))`])
 );
 
 /** The config for tailwind in the browser. */

lib/core/components/blocks/highlight.ts

@@ -29,6 +29,8 @@ export class Highlight extends Component {
   @Component.utils.children.require
   // eslint-disable-next-line jsdoc/require-jsdoc
   public render({ children }: Component.RenderArguments): string {
+    const borderColor = `border-color:${this.#borderColor}`;
+
     // eslint-disable-next-line no-inline-comments
     let title = /*HTML*/ `
       <h4 class="flex items-center gap-2 text-LG font-semibold" style="color:${this.#borderColor}">
@@ -38,12 +40,9 @@ export class Highlight extends Component {
 
     if (this.#title === null) title = '';
 
-    const borderColor = `border-color:${this.#borderColor}`;
-    const borderWidth = `border-width:calc((1/6)*var(--unit));border-left-width:calc((3/6)*var(--unit));`;
-
     // eslint-disable-next-line no-inline-comments
     return /*HTML*/ `
-    <div class="p-1 mt-1" style="${borderColor};${borderWidth}">
+    <div class="p-100 mt-100 border-21 border-l-50" style="${borderColor}">
       ${title}
       <div id="${this.id}-children-container">
         ${children?.()}

lib/core/components/blocks/point.ts

@@ -31,7 +31,7 @@ export class Point extends Component {
   readonly #paddingTop = Component.utils.extract({
     aliases: ['padding-top', 'pt'],
     context: this,
-    fallback: 1,
+    fallback: 100,
     transform: Component.utils.transform.number,
   });
 
@@ -42,7 +42,7 @@ export class Point extends Component {
     const inner = children!();
     // eslint-disable-next-line no-inline-comments
     return /*HTML*/ `
-      <div class="pt-1 block before:content-['${symbolMap[this.#symbol]}'] before:mr-1 before:text-foreground" 
+      <div class="pt-100 block before:content-['${symbolMap[this.#symbol]}'] before:mr-100 before:text-foreground" 
         style="padding-top: calc(${this.#paddingTop} * var(--unit));">
         ${inner}
       </div>

lib/core/components/blocks/table.ts

@@ -40,9 +40,9 @@ export class Table extends Component {
     // eslint-disable-next-line no-inline-comments
     return /* CSS */ `
       #id table {
-        --line-width: calc(var(--unit) / 8);
-        --padding-x:  calc(var(--unit) * 2); 
-        --padding-y:  calc(var(--unit) / 2);
+        --line-width: calc(var(--unit) * 12.5);
+        --padding-x:  calc(var(--unit) * 200); 
+        --padding-y:  calc(var(--unit) * 50);
 
         border-collapse: collapse;
         border: none;

lib/core/components/blocks/text.ts

@@ -9,7 +9,7 @@ export class Text extends Component {
   // eslint-disable-next-line @typescript-eslint/class-methods-use-this, jsdoc/require-jsdoc
   public render({ children }: Component.RenderArguments): string {
     // eslint-disable-next-line no-inline-comments
-    return /*HTML*/ `<div class="block py-2">${children?.()}</div>`;
+    return /*HTML*/ `<div class="block py-200">${children?.()}</div>`;
   }
 
   // eslint-disable-next-line @typescript-eslint/class-methods-use-this, jsdoc/require-jsdoc

lib/core/components/slides/question-slide.ts

@@ -17,7 +17,7 @@ export class QuestionSlide extends Component {
     // eslint-disable-next-line no-inline-comments
     return /*HTML*/ `
       <div class="h-full w-full flex justify-center items-center overflow-hidden">
-        <h2 class="text-primary font-bold text-lg">${this.#title}</h2>
+        <h2 class="text-primary font-bold text-3xl">${this.#title}</h2>
         ${children?.() ?? ''}
       </div>
     `;

lib/core/components/slides/slide.ts

@@ -15,7 +15,7 @@ export class Slide extends Component {
   readonly #padding: number = Component.utils.extract({
     aliases: ['padding', 'p'],
     context: this,
-    fallback: 4,
+    fallback: 400,
     transform: Component.utils.transform.number,
   });
 

lib/core/components/slides/title-slide.ts

@@ -27,7 +27,7 @@ export class TitleSlide extends Component {
     // eslint-disable-next-line no-inline-comments
     return /*HTML*/ `
       <div class="h-full w-full flex justify-center items-center overflow-hidden">
-        <h2 class="text-primary font-bold text-lg">${this.#title}</h2>
+        <h2 class="text-primary font-bold text-3xl">${this.#title}</h2>
         ${authors}
       </div>
     `;