diff --git a/src/App.tsx b/src/App.tsx index 06ec806..0c04cce 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,25 @@ import { BarraSuperior } from "./BarraSuperior"; import { ContenedorHorarios } from "./ContenedorHorarios/"; import { Wallpaper } from "./Wallpaper"; +import { Show } from "solid-js"; +import { css } from "aphrodite"; +import { estilosGlobales } from "./Estilos"; function App() { + /// @ts-ignore + const soportaBackdropFilter = document.body.style.backdropFilter !== undefined; + return (
+ +
+ Tu navegador no soporta "backdrop-filter". Este es solo un efecto + visual, no afecta la funcionalidad de la página.  + No volver a mostrar. +
+

diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx index f73246a..6ee5e6d 100644 --- a/src/ContenedorHorarios/MiHorario.tsx +++ b/src/ContenedorHorarios/MiHorario.tsx @@ -46,11 +46,14 @@ export function MiHorario() { */} +
+ + ; } diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx index 5528423..b50c106 100644 --- a/src/Wallpaper.tsx +++ b/src/Wallpaper.tsx @@ -5,6 +5,10 @@ import { createSignal, createMemo, createEffect, createState } from "solid-js"; const duracionTransicion = 250; export function Wallpaper() { + /// @ts-ignore + const soportaBackdropFilter = document.body.style.backdropFilter !== undefined; + console.log("Soporta backdrop-filter?:", soportaBackdropFilter); + const estilos = StyleSheet.create({ contenedorCover: { position: "fixed", @@ -12,7 +16,8 @@ export function Wallpaper() { height: "100vh", top: "0", left: "0", - backgroundColor: "#212121" + backgroundColor: "#212121", + zIndex: -1 }, cover: { width: "100vw", @@ -20,7 +25,8 @@ export function Wallpaper() { backgroundPosition: "center", backgroundSize: "cover", zIndex: -1, - transition: `opacity ${duracionTransicion}ms` + transition: `opacity ${duracionTransicion}ms`, + filter: soportaBackdropFilter? "": "blur(40px)" }, coverTransicion: { opacity: 0 diff --git a/src/index.tsx b/src/index.tsx index efdd7d0..d545069 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,5 +2,6 @@ import "solid-js"; import { render } from 'solid-js/web'; import App from './App'; import "normalize.css"; +import "./styles/global.css"; render(App, document.getElementById('root') as Node); diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..0ef6959 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,3 @@ +body { + font-family: Inter, sans-serif; +}