Removed keyframe

astro.config.mjs

@@ -13,7 +13,6 @@ export default defineConfig({
     robotsTxt(),
     purgecss({
       fontFace: true,
-      keyframes: true,
       variables: true,
     }),
   ],

fwt/Optimizers/OptimizeLogo.tsx

@@ -2,6 +2,7 @@ import sharp from 'sharp'
 
 interface Props {
   size?: number
+  favicon?: boolean
 }
 
 const convertLogo = async (props: Props) => {
@@ -16,6 +17,18 @@ const convertLogo = async (props: Props) => {
   await sharp(webpBuffer).toFile(webpImage)
 }
 
+const generateFavicon = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const favicon = 'public/favicon.png'
+
+  const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+  await sharp(faviconBuffer).toFile(favicon)
+}
+
 export default (props: Props) => {
   convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon(props)
+  }
 }

fwt/components/Button.tsx

@@ -8,6 +8,7 @@ interface Props {
   edges?: 'curved' | 'rounded' | 'flat'
   design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
   submit?: boolean
+  newtab?: boolean
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -31,14 +32,14 @@ export default (props: Props) => {
       <Show when={props.to}>
         <Switch>
           <Match when={props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
               <button class={props.design} style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </a>
           </Match>
           <Match when={!props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
               <button class="button" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>

fwt/components/Link.tsx

@@ -3,12 +3,13 @@ import '../styles/Link.sass'
 interface Props {
   to: string
   children?: any
+  newtab?: boolean
 }
 
 export default (props: Props) => {
   return (
     <>
-      <a href={props.to} aria-label={`Go to ${props.to}`} data-astro-prefetch>
+      <a href={props.to} aria-label={`Go to ${props.to}`} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
         {props.children}
       </a>
     </>

fwt/components/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top?: number
+  bottom?: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

fwt/index.ts

@@ -13,6 +13,8 @@ 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 Padding } from './components/Padding'
+export { default as Modal } from './components/Modal'
 
 export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 export { default as OptimizeImage } from './Optimizers/OptimizeImage'

fwt/styles/Page.sass

@@ -7,7 +7,6 @@
   @extend .page
   display: flex
   flex-direction: column
-  align-items: center
 
 .row
   @extend .column