Updated fwt components

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 (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

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'

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

fwt/styles/Viewport.sass

@@ -0,0 +1 @@
+@use '/src/styles/breakpoint.sass'