Updated

frontend/@dasig/components/Footer.tsx

@@ -0,0 +1,16 @@
+import '../styles/Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="dasig-footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}

frontend/@dasig/components/Row.tsx

@@ -0,0 +1,24 @@
+import '../styles/Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

frontend/configs/design.site.sass

@@ -1,6 +0,0 @@
-$light-background: #e2e7f2
-$dark-background: #0a152a
-
-$mobile: 575.98px
-$tablet: 768px
-$desktop: 1440px

frontend/configs/design/colors.sass

@@ -0,0 +1,2 @@
+$white: #f4f3f2
+$black: #0A0A0A

frontend/configs/design/site.sass

@@ -0,0 +1,2 @@
+$light-background: #ced9f1
+$dark-background: #131d2e

frontend/configs/design/sizes.sass

@@ -0,0 +1,3 @@
+$mobile: 575.98px
+$tablet: 768px
+$desktop: 1440px

frontend/src/app.tsx

@@ -1,4 +1,4 @@
-import { MetaProvider, Title } from '@solidjs/meta'
+import { MetaProvider } from '@solidjs/meta'
 import { Router } from '@solidjs/router'
 import { FileRoutes } from '@solidjs/start/router'
 import { Suspense } from 'solid-js'
@@ -9,10 +9,6 @@ export default () => {
     <Router
       root={(props) => (
         <MetaProvider>
-          <Title>Dasig - Solid</Title>
-
-          {/* <a href="/">Index</a>
-          <a href="/about">About</a> */}
           <Suspense>{props.children}</Suspense>
         </MetaProvider>
       )}

frontend/src/components/Counter.sass

@@ -1,5 +1,5 @@
 @use 'sass:color'
-@use '../../configs/design.site' as design
+@use '../../configs/design/site' as design
 @use '../styles/functions' as func
 
 .counter

frontend/src/routes/index.tsx

@@ -6,11 +6,11 @@ import "./index.sass";
 
 export default () => {
   return (
-    <Page title="Dasig - Index">
+    <Page title="Dasig">
       <Column>
         <h1>DASIG</h1>
         <h4 class="text">
-          An architectural framework for pure speed fullstack development
+          An architectural framework for pure speed fullstack development built on top of Solid and Go
         </h4>
         <Counter />
         <Image name="sample" size={500}></Image>

frontend/src/styles/app.sass

@@ -1,5 +1,6 @@
 @use './global'
-@use '../../configs/design.site' as design
+@use '../../configs/design/site' as design
+@use '../../configs/design/sizes' as view
 @use 'sass:color'
 
 :root
@@ -28,7 +29,7 @@ h1
   margin: 4rem auto
   max-width: 14rem
 
-  @media (min-width: design.$mobile)
+  @media (min-width: view.$mobile)
     max-width: none
 
 p
@@ -36,5 +37,5 @@ p
   margin: 2rem auto
   line-height: 1.35
 
-  @media (min-width: design.$mobile)
+  @media (min-width: view.$mobile)
     max-width: none

frontend/src/styles/breakpoint.sass

@@ -1,4 +1,4 @@
-@use '../../configs/design.site' as design
+@use '../../configs/design/sizes' as design
 
 .on-desktop-only
   @media only screen and (min-width: 0px) and (max-width: design.$desktop)