general page cleanups

let's go, devspeed 🚀

src/App.svelte

@@ -43,7 +43,9 @@
   import Runners from "./components/Runners.svelte";
   import Footer from "./components/Footer.svelte";
   import Tracks from "./components/Tracks.svelte";
-import TracksOverview from "./components/TracksOverview.svelte";
+  import TracksOverview from "./components/TracksOverview.svelte";
+  import OrgDetail from "./components/OrgDetail.svelte";
+import Teams from "./components/Teams.svelte";
   store.init();
 
   // if ("serviceWorker" in navigator) {
@@ -87,89 +89,15 @@ import TracksOverview from "./components/TracksOverview.svelte";
         <Route path="/runners">
           <Runners />
         </Route>
+        <Route path="/teams">
+          <Teams />
+        </Route>
         <Route path="/orgs/*">
           <Route path="/">
-            <div class="bg-white p-5">
-              <h1>Portfolio introduction</h1>
-              <nav><a class="underline" href="./1">Org 1</a></nav>
-            </div>
             <Orgs />
           </Route>
           <Route path="/:orgid" let:params>
-            <div class="bg-white p-5">
+            <OrgDetail params={params}/>
-              <div class="flex flex-row mb-4">
-                <div class="w-full">
-                  <nav class="w-full flex">
-                    <ol
-                      class="list-none flex flex-row items-center justify-start">
-                      <li class="mr-2 flex items-center">
-                        <svg
-                          stroke="currentColor"
-                          fill="none"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          class="h-3 w-3 stroke-current"
-                          height="1em"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"><path
-                            d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                          <polyline points="9 22 9 12 15 12 15 22" /></svg>
-                      </li>
-                      <li class="flex items-center">
-                        <a class="mr-2" href="/">Home</a><svg
-                          stroke="currentColor"
-                          fill="none"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          class="h-3 w-3 mr-2 stroke-current"
-                          height="1em"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"><line
-                            x1="5"
-                            y1="12"
-                            x2="19"
-                            y2="12" />
-                          <polyline points="12 5 19 12 12 19" /></svg>
-                      </li>
-                      <li class="mr-2 flex items-center">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          height="24"><path fill="none" d="M0 0h24v24H0z" />
-                          <path
-                            d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
-                      </li>
-                      <li class="flex items-center">
-                        <a class="mr-2" href="./">Orgs</a><svg
-                          stroke="currentColor"
-                          fill="none"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          class="h-3 w-3 mr-2 stroke-current"
-                          height="1em"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"><line
-                            x1="5"
-                            y1="12"
-                            x2="19"
-                            y2="12" />
-                          <polyline points="12 5 19 12 12 19" /></svg>
-                      </li>
-                      <li class="flex items-center">
-                        <span class="mr-2">Org-Details #{params.orgid}</span>
-                      </li>
-                    </ol>
-                  </nav>
-                </div>
-              </div>
-            </div>
           </Route>
         </Route>
         <Route path="/about">

src/components/OrgDetail.svelte

@@ -0,0 +1,83 @@
+<script>
+  export let params;
+</script>
+
+<section class="container py-10 mx-auto sm:px-2">
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
+    Orgs
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    configure the tracks/ min-max lap times
+  </p>
+  <div class="flex flex-row mb-4">
+    <div class="w-full">
+      <nav class="w-full flex">
+        <ol class="list-none flex flex-row items-center justify-start">
+          <li class="mr-2 flex items-center">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><path
+                d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="/">Home</a><svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 mr-2 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12" />
+              <polyline points="12 5 19 12 12 19" /></svg>
+          </li>
+          <li class="mr-2 flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"><path fill="none" d="M0 0h24v24H0z" />
+              <path
+                d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="./">Orgs</a><svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-3 w-3 mr-2 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><line
+                x1="5"
+                y1="12"
+                x2="19"
+                y2="12" />
+              <polyline points="12 5 19 12 12 19" /></svg>
+          </li>
+          <li class="flex items-center">
+            <span class="mr-2">Org-Details #{params.orgid}</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</section>

src/components/Orgs.svelte

@@ -2,18 +2,12 @@
   import { _ } from "svelte-i18n";
 </script>
 
-<div class="flex min-h-screen">
+<section class="container py-10 mx-auto sm:px-2">
-  <div class="w-full bg-white flex items-center justify-center ">
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
-    <div class="max-w-sm m-8">
+    Orgs
-      <div class="text-black text-5xl md:text-15xl font-black">Orgs</div>
+  </span>
-      <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
+  <p class="mb-8 text-lg text-gray-500">
-      <p
+    configure the tracks/ min-max lap times
-        class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+  </p>
-        bla
+  <nav><a class="underline" href="./1">Org 1</a></nav>
-      </p>
+</section>
-      <a
-        href="/"
-        class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
-    </div>
-  </div>
-</div>

src/components/Runners.svelte

@@ -2,22 +2,9 @@
   import { _ } from "svelte-i18n";
 </script>
 
-<body class="antialiased font-sans">
+<section class="container py-10 mx-auto sm:px-2">
-  <div class="flex min-h-screen">
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
-    <div class="w-full bg-white flex items-center justify-center ">
+    {$_('runners')}
-      <div class="max-w-sm m-8">
+  </span>
-        <div class="text-black text-5xl md:text-15xl font-black">
+  <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
-          Runners
+</section>
-        </div>
-        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
-        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          bla
-        </p>
-        <a
-          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
-      </div>
-    </div>
-  </div>
-</body>

src/components/Teams.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container py-10 mx-auto sm:px-2">
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
+    {$_('teams')}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
+</section>

src/components/Users.svelte

@@ -2,22 +2,9 @@
   import { _ } from "svelte-i18n";
 </script>
 
-<body class="antialiased font-sans">
+<section class="container py-10 mx-auto sm:px-2">
-  <div class="flex min-h-screen">
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
-    <div class="w-full bg-white flex items-center justify-center ">
+    {$_('users')}
-      <div class="max-w-sm m-8">
+  </span>
-        <div class="text-black text-5xl md:text-15xl font-black">
+  <p class="mb-8 text-lg text-gray-500">admin users</p>
-          Users
+</section>
-        </div>
-        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
-        <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          bla
-        </p>
-        <a
-          href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
-      </div>
-    </div>
-  </div>
-</body>