Agregar control de tamaño de fuente de la pag.

src/BarraSuperior.tsx

@@ -1,6 +1,7 @@
 import { estilosGlobales } from "./Estilos"
 import { StyleSheet, css } from "aphrodite"
 import { numWallpaper, setNumWallpaper } from "./Store"
+import { TamanoLetra } from "./BarraSuperior/TamanoLetra"
 
 const ultimoIndiceWallpaper = 2
 
@@ -100,6 +101,7 @@ export function BarraSuperior() {
                 <i class="ph-arrow-up-right" />
             </a>
             <CambiadorImg />
+            <TamanoLetra />
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2021-A</span>
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>Ingeniería de Sistemas</span>
         </header>

src/BarraSuperior/TamanoLetra.tsx

@@ -0,0 +1,70 @@
+import { css, StyleSheet } from "aphrodite"
+import { estilosGlobales } from "../Estilos"
+import { tamanoLetra, setTamanoLetra } from "../Store"
+import { createEffect } from "solid-js"
+
+const e = StyleSheet.create({
+    boton: {
+        cursor: "pointer",
+        textDecoration: "underline",
+        "::before": {
+            fontSize: "1rem",
+            transform: "translateY(0.2rem)",
+        },
+    },
+    botonDesactivado: {
+        cursor: "not-allowed",
+        textDecoration: "none",
+    },
+    botonLeft: {
+        paddingRight: "0.5rem",
+        marginRight: "0.25rem",
+    },
+    botonRight: {
+        paddingLeft: "0.5rem",
+        marginRight: "0.25rem",
+    },
+})
+
+function reducirLetra() {
+    const v = tamanoLetra()
+    if (v > 10) {
+        setTamanoLetra(v - 2)
+        localStorage.setItem("tamano-letra", (v - 2).toString())
+    }
+}
+
+function aumentarLetra() {
+    const v = tamanoLetra()
+    if (v < 20) {
+        setTamanoLetra(v + 2)
+        localStorage.setItem("tamano-letra", (v + 2).toString())
+    }
+}
+
+export function TamanoLetra() {
+    createEffect(() => {
+        const v = tamanoLetra()
+        console.log("Letra:", v)
+        document.documentElement.style.fontSize = v + "px"
+        // document.body.style.fontSize = v + "px"
+    })
+    
+    return (
+        <div className={css(estilosGlobales.inlineBlock)} style={{"user-select": "none"}}>
+            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+                <i
+                    className={`ph-minus ${css(e.boton, e.botonLeft, estilosGlobales.contenedorCursorSoft)}`}
+                    onClick={reducirLetra}
+                    title={"Disminuir tamaño de letra"}
+                />
+                Tamaño: {tamanoLetra()}
+                <i
+                    className={`ph-plus ${css(e.boton, e.botonRight, estilosGlobales.contenedorCursorSoft)}`}
+                    onClick={aumentarLetra}
+                    title={"Aumentar tamaño de letra"}
+                />
+            </span>
+        </div>
+    )
+}

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -10,7 +10,7 @@ import { TablaObserver } from "../TablaObserver"
 const e = StyleSheet.create({
     celdaHora: {
         textAlign: "center",
-        width: "2.5rem",
+        width: "3.3rem",
         padding: "0.25rem 0",
         position: "absolute",
         top: "-0.75rem",
@@ -19,13 +19,13 @@ const e = StyleSheet.create({
         position: "absolute",
         zIndex: -1,
         height: "100%",
-        transform: "translateX(-15px)",
+        transform: "translateX(-1rem)",
     },
     fila: {
         position: "relative",
         zIndex: 2,
         transition: "background-color 250ms, border 100ms",
-        marginLeft: "calc(2.5rem + 20px)",
+        marginLeft: "4.3rem",
         display: "flex",
         alignItems: "center",
         minHeight: "1.1rem",
@@ -43,7 +43,7 @@ const e = StyleSheet.create({
     },
     celdaResaltado: {
         height: "101%",
-        width: "4px",
+        width: "0.2rem",
         display: "inline-block",
     },
     celdaResaltadoTransparente: {

src/Store.ts

@@ -40,7 +40,9 @@ export const horasDescanso = [
 ]
 
 const numImgGuardado = Number(localStorage.getItem("num-img") ?? "1")
+const tamanoLetraGuardado = Number(localStorage.getItem("tamano-letra") ?? "16")
 
 export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro)
 export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado)
 export const [mostrarDescansos, setMostrarDescansos] = createSignal(true)
+export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);

src/Wallpaper.tsx

@@ -26,7 +26,7 @@ export function Wallpaper() {
             zIndex: -1,
             transition: `opacity ${duracionTransicion}ms`,
             filter: soportaBackdropFilter ? "" : "blur(40px)",
-            opacity: soportaBackdropFilter ? 1 : 0.75,
+            opacity: 0.75,
         },
         coverTransicion: {
             opacity: 0,

src/styles/global.css

@@ -1,5 +1,4 @@
 body {
-    font-size: 16px;
     font-family: Inter, sans-serif;
 }