diff --git a/fwt/components/Display.tsx b/fwt/components/Display.tsx new file mode 100644 index 0000000..3f78103 --- /dev/null +++ b/fwt/components/Display.tsx @@ -0,0 +1,41 @@ +import '../styles/Viewport.sass' +import { type JSXElement, Switch, Match } from 'solid-js' + +interface Props { + children: JSXElement + desktop?: boolean + tablet?: boolean + mobile?: boolean +} + +export default (props: Props) => { + return ( + <> + + +
{props.children}
+
+ + +
{props.children}
+
+ + +
{props.children}
+
+ + +
{props.children}
+
+ + +
{props.children}
+
+ + +
{props.children}
+
+
+ + ) +} diff --git a/fwt/index.ts b/fwt/index.ts index 3ef241e..df20152 100644 --- a/fwt/index.ts +++ b/fwt/index.ts @@ -12,6 +12,7 @@ export { default as Logo } from './components/Logo' export { default as Navbar } from './components/Navbar' export { default as Page } from './components/Page' export { default as Row } from './components/Row' +export { default as Display } from './components/Display' export { default as OptimizeBackground } from './Optimizers/OptimizeBackground' export { default as OptimizeImage } from './Optimizers/OptimizeImage' diff --git a/fwt/styles/Footer.sass b/fwt/styles/Footer.sass index 70cd207..0215b16 100644 --- a/fwt/styles/Footer.sass +++ b/fwt/styles/Footer.sass @@ -1,3 +1,5 @@ +@use '/src/styles/breakpoint.sass' as view + .footer padding: 1rem 0 margin: 0 2rem @@ -5,3 +7,7 @@ bottom: 0 width: 100% opacity: 0.8 + font-size: 1rem + + @media only screen and (max-width: view.$tablet) + font-size: 0.75rem diff --git a/fwt/styles/Viewport.sass b/fwt/styles/Viewport.sass new file mode 100644 index 0000000..6c4b1f0 --- /dev/null +++ b/fwt/styles/Viewport.sass @@ -0,0 +1 @@ +@use '/src/styles/breakpoint.sass'