Contingu

src/routes/+layout.svelte

@@ -3,10 +3,11 @@
     import Navbar from "$lib/navbar.svelte";
     import './styles.css';
     import { navTitle } from "$lib/store";
-    import { NavbarObject } from "$lib/classes/NavObject";
 
     let pageTitle: string = $navTitle ?? 'Default Title'
     // let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>
 <Navbar pageTitle={pageTitle} />
-<slot></slot>
+<main>
+    <slot></slot>
+</main>

src/routes/+page.svelte

@@ -2,18 +2,16 @@
     import Sqmenu from "$lib/sqmenu.svelte";
     import type { MenuData } from "$lib/classes/menudata"
     import About from "$lib/about.svelte";
-    import { languages } from "$lib/store";
+    import Link from "$lib/link.svelte";
 
-    let menudata: MenuData[] = [{menuLink: '/blog', menuName:'Blog'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/xema', menuName:'Dades XEMA'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
-    const desc = `My favorite languages are`
+    let menudata: MenuData[] = [{menuLink: '/abtme', menuName:'About me'}, {menuLink: '/blog', menuName:'Blog'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
 </script>
-<div class="p-8">
-    <section id="main">
-        <About who={'me'} headerImage={'/jo_web.jpg'}>
-            <p>{desc} <code>{$languages}</code></p>
-        </About>
-    </section>
-    <section id="menu">
-        <Sqmenu {menudata} />
-    </section>
-</div>
+<section id="main">
+    <About who={'me'} headerImage={'/jo_web.jpg'}>
+        <h1 class="text-xl">Hi there! I am <strong>Pau Figueras</strong>, <span class="text-xl">a bioinformatician and web developer</span></h1>
+        <p class="text-lg">To know more about me check the <Link {...{text: "About me", link: "/abtme", underline: 'hover', asCode: true}} /> page</p>
+    </About>
+</section>
+<section id="menu">
+    <Sqmenu {menudata} />
+</section>

src/routes/styles.css

@@ -5,3 +5,11 @@ body {
 main, footer {
 	margin: 0 8px;
 }
+
+section {
+	width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+}