diff --git a/src/BarraSuperior.tsx b/src/BarraSuperior.tsx
index 8c6450a..337431d 100755
--- a/src/BarraSuperior.tsx
+++ b/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() {
+
2021-A
Ingeniería de Sistemas
diff --git a/src/BarraSuperior/TamanoLetra.tsx b/src/BarraSuperior/TamanoLetra.tsx
new file mode 100644
index 0000000..0a99267
--- /dev/null
+++ b/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 (
+
+
+
+ Tamaño: {tamanoLetra()}
+
+
+
+ )
+}
diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
index 4489f9a..b1ff866 100755
--- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx
+++ b/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: {
diff --git a/src/Store.ts b/src/Store.ts
index 80316e5..cfafd46 100755
--- a/src/Store.ts
+++ b/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);
diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx
index 6614e34..92e48db 100755
--- a/src/Wallpaper.tsx
+++ b/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,
diff --git a/src/styles/global.css b/src/styles/global.css
index 6f1956c..e695d18 100755
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,4 @@
body {
- font-size: 16px;
font-family: Inter, sans-serif;
}