From c86bc68e5c05b66a7cf31339f8086ef9b6596a0f Mon Sep 17 00:00:00 2001
From: Thilo Hohlt <123883702+thiloho@users.noreply.github.com>
Date: Fri, 2 Aug 2024 15:33:18 +0200
Subject: [PATCH] Add some base styles

---
 web-app/src/app.css                           | 169 +++++++++++++++
 web-app/src/app.html                          |   1 -
 web-app/src/lib/components/Modal.svelte       |  52 +++++
 .../src/lib/components/WebsiteEditor.svelte   |  17 +-
 .../src/routes/(authenticated)/+page.svelte   | 156 ++++++++------
 .../(authenticated)/account/+page.svelte      |  24 ++-
 .../website/[websiteId]/+page.svelte          | 200 +++++++++---------
 .../website/[websiteId]/articles/+page.svelte |  71 +++++--
 web-app/src/routes/+layout.svelte             |  34 +--
 9 files changed, 520 insertions(+), 204 deletions(-)
 create mode 100644 web-app/src/app.css
 create mode 100644 web-app/src/lib/components/Modal.svelte

diff --git a/web-app/src/app.css b/web-app/src/app.css
new file mode 100644
index 0000000..78287ea
--- /dev/null
+++ b/web-app/src/app.css
@@ -0,0 +1,169 @@
+:root {
+  --bg-primary: white;
+  --bg-secondary: hsl(0 0% 95%);
+  --bg-tertiary: hsl(0 0% 90%);
+
+  --color-text: black;
+  --color-text-invert: white;
+  --color-accent: hsl(210, 100%, 30%);
+  --color-success: hsl(105, 100%, 30%);
+  --color-error: hsl(0, 100%, 30%);
+
+  --border-primary: 0.0625rem solid var(--bg-tertiary);
+  --border-radius: 0.125rem;
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: hsl(0 0% 15%);
+    --bg-secondary: hsl(0 0% 20%);
+    --bg-tertiary: hsl(0 0% 25%);
+
+    --color-text: white;
+    --color-text-invert: black;
+    --color-accent: hsl(210, 100%, 80%);
+    --color-success: hsl(105, 100%, 80%);
+    --color-error: hsl(0, 100%, 80%);
+
+    color-scheme: dark;
+  }
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  background-color: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100vh;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+section + section {
+  margin-block-start: 2rem;
+}
+
+button,
+label,
+select,
+summary,
+[role="button"],
+[role="option"] {
+  cursor: pointer;
+}
+
+input,
+button,
+textarea,
+select,
+a[role="button"] {
+  font: inherit;
+  color: inherit;
+  border: var(--border-primary);
+  border-radius: var(--border-radius);
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+}
+
+input,
+textarea,
+select {
+  background-color: var(--bg-primary);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+a[role="button"] {
+  display: inline-block;
+  max-inline-size: fit-content;
+  text-decoration: none;
+}
+
+button,
+a[role="button"] {
+  background-color: var(--bg-secondary);
+}
+
+:is(button, a[role="button"]):hover {
+  background-color: var(--bg-tertiary);
+}
+
+img,
+picture,
+svg,
+video {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+form[method="POST"] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+form > button[type="submit"] {
+  max-inline-size: 30ch;
+}
+
+form[method="GET"] {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
+  align-items: start;
+}
+
+form[method="GET"] > button[type="submit"] {
+  align-self: end;
+}
+
+form > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-inline-size: 30ch;
+}
+
+form > label:has(textarea) {
+  max-inline-size: 65ch;
+}
diff --git a/web-app/src/app.html b/web-app/src/app.html
index 66aee01..84ffad1 100644
--- a/web-app/src/app.html
+++ b/web-app/src/app.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://unpkg.com/@acab/reset.css" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
diff --git a/web-app/src/lib/components/Modal.svelte b/web-app/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..6fe7b3e
--- /dev/null
+++ b/web-app/src/lib/components/Modal.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  const { children, id, text } = $props<{ children: Snippet; id: string; text: string }>();
+</script>
+
+<a href={`#${id}`} role="button">{text}</a>
+
+<div {id} class="modal">
+  <div class="modal__content">
+    {@render children()}
+    <a href="#!" role="button">Close</a>
+  </div>
+  <a href="#!" class="modal__closeoverlay" aria-label="Close modal"></a>
+</div>
+
+<style>
+  .modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+  }
+
+  .modal:target {
+    display: block;
+  }
+
+  .modal__closeoverlay {
+    position: fixed;
+    inset: 0;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal__content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-inline: 1rem;
+    padding-block: 2rem;
+    background-color: var(--bg-primary);
+    border-radius: var(--border-radius);
+    border: var(--border-primary);
+    z-index: 20;
+    position: absolute;
+    max-inline-size: 300px;
+    margin-inline: auto;
+    inset-block-start: 2rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+</style>
diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte
index c767c95..517815d 100644
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/web-app/src/lib/components/WebsiteEditor.svelte
@@ -12,10 +12,10 @@
 <div class="operations">
   <h1>{title}</h1>
 
-  <div>
+  <nav class="operations__nav">
     <a href="/website/{id}">Settings</a>
     <a href="/website/{id}/articles">Articles</a>
-  </div>
+  </nav>
 
   {@render children()}
 </div>
@@ -34,11 +34,22 @@
 
   .operations {
     inline-size: 50%;
-    border-inline-end: 0.0625rem solid hsl(0 0% 50%);
+    border-inline-end: var(--border-primary);
     resize: horizontal;
     overflow-y: auto;
   }
 
+  .operations__nav {
+    margin-block: 1rem 2rem;
+  }
+
+  .operations__nav > a {
+    display: inline-block;
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    overflow-x: auto;
+  }
+
   .preview {
     flex-grow: 1;
   }
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index f8b8d16..e1be125 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -3,6 +3,7 @@
   import DateTime from "$lib/components/DateTime.svelte";
   import { sortOptions } from "$lib/utils.js";
   import { page } from "$app/stores";
+  import Modal from "$lib/components/Modal.svelte";
 
   const { form, data } = $props();
 </script>
@@ -18,21 +19,25 @@
 <section>
   <h2>Create website</h2>
 
-  <form method="POST" action="?/createWebsite" use:enhance>
-    <label>
-      Type:
-      <select name="content-type">
-        <option value="Blog">Blog</option>
-        <option value="Docs">Docs</option>
-      </select>
-    </label>
-    <label>
-      Title:
-      <input type="text" name="title" />
-    </label>
+  <Modal id="create-website" text="Create website">
+    <h3>Create website</h3>
 
-    <button type="submit">Submit</button>
-  </form>
+    <form method="POST" action="?/createWebsite" use:enhance>
+      <label>
+        Type:
+        <select name="content-type">
+          <option value="Blog">Blog</option>
+          <option value="Docs">Docs</option>
+        </select>
+      </label>
+      <label>
+        Title:
+        <input type="text" name="title" />
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
+  </Modal>
 </section>
 
 {#if data.totalWebsiteCount > 0}
@@ -69,52 +74,85 @@
       <button type="submit">Submit</button>
     </form>
 
-    {#each data.websites as { id, content_type, title, created_at }}
-      <article>
-        <h3>
-          <a href="/website/{id}">{title}</a>
-        </h3>
-        <p>
-          <strong>Type:</strong>
-          {content_type}
-        </p>
-        <p>
-          <strong>Created at:</strong>
-          <DateTime date={created_at} />
-        </p>
-        <details>
-          <summary>Update</summary>
-          <form
-            method="POST"
-            action="?/updateWebsite"
-            use:enhance={() => {
-              return async ({ update }) => {
-                await update({ reset: false });
-              };
-            }}
-          >
-            <input type="hidden" name="id" value={id} />
-            <label>
-              Title
-              <input type="text" name="title" value={title} />
-            </label>
+    <div class="website-grid">
+      {#each data.websites as { id, content_type, title, created_at }}
+        <article class="website-card">
+          <h3>
+            <a href="/website/{id}">{title}</a>
+          </h3>
+          <ul>
+            <li>
+              <strong>Type:</strong>
+              {content_type}
+            </li>
+            <li>
+              <strong>Created at:</strong>
+              <DateTime date={created_at} />
+            </li>
+          </ul>
+          <div class="website-card__actions">
+            <Modal id="update-website-{id}" text="Update">
+              <h4>Update website</h4>
 
-            <button type="submit">Submit</button>
-          </form>
-        </details>
-        <details>
-          <summary>Delete</summary>
-          <p>
-            <strong>Caution!</strong>
-            Deleting this website will irretrievably erase all data.
-          </p>
-          <form method="POST" action="?/deleteWebsite" use:enhance>
-            <input type="hidden" name="id" value={id} />
+              <form
+                method="POST"
+                action="?/updateWebsite"
+                use:enhance={() => {
+                  return async ({ update }) => {
+                    await update({ reset: false });
+                  };
+                }}
+              >
+                <input type="hidden" name="id" value={id} />
+                <label>
+                  Title
+                  <input type="text" name="title" value={title} />
+                </label>
 
-            <button type="submit">Permanently delete website</button>
-          </form>
-        </details>
-      </article>
-    {/each}
+                <button type="submit">Submit</button>
+              </form>
+            </Modal>
+            <Modal id="delete-website-{id}" text="Delete">
+              <h4>Delete website</h4>
+
+              <p>
+                <strong>Caution!</strong>
+                Deleting this website will irretrievably erase all data.
+              </p>
+              <form method="POST" action="?/deleteWebsite" use:enhance>
+                <input type="hidden" name="id" value={id} />
+
+                <button type="submit">Permanently delete website</button>
+              </form>
+            </Modal>
+          </div>
+        </article>
+      {/each}
+    </div>
   </section>
 {/if}
+
+<style>
+  .website-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 35ch), 1fr));
+    margin-block-start: 1rem;
+  }
+
+  .website-card {
+    border: var(--border-primary);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-inline: 1rem;
+    padding-block: 2rem;
+  }
+
+  .website-card__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+</style>
diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte
index b10ee3e..fce0127 100644
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/web-app/src/routes/(authenticated)/account/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import Modal from "$lib/components/Modal.svelte";
 
   const { data, form } = $props();
 </script>
@@ -36,12 +37,21 @@
 <section>
   <h2>Delete account</h2>
 
-  <form method="POST" action="?/deleteAccount" use:enhance>
-    <label>
-      Password:
-      <input type="password" name="password" required />
-    </label>
+  <Modal id="delete-account" text="Delete account">
+    <h3>Delete account</h3>
 
-    <button type="submit">Delete account</button>
-  </form>
+    <p>
+      <strong>Caution!</strong>
+      Deleting your account will irretrievably erase all data.
+    </p>
+
+    <form method="POST" action="?/deleteAccount" use:enhance>
+      <label>
+        Password:
+        <input type="password" name="password" required />
+      </label>
+
+      <button type="submit">Permanently delete account</button>
+    </form>
+  </Modal>
 </section>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index 302db35..38f75af 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -20,114 +20,114 @@
   previewContent={data.home.main_content}
 >
   <section>
-    <h2>Settings</h2>
+    <h2>Global</h2>
+    <form
+      action="?/updateGlobal"
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Light accent color:
+        <input
+          type="color"
+          name="accent-color-light"
+          value={data.globalSettings.accent_color_light_theme}
+        />
+      </label>
+      <label>
+        Light accent color:
+        <input
+          type="color"
+          name="accent-color-dark"
+          value={data.globalSettings.accent_color_dark_theme}
+        />
+      </label>
+      <label>
+        Favicon:
+        <input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
+      </label>
 
-    <section>
-      <h3>Global</h3>
-      <form
-        action="?/updateGlobal"
-        method="POST"
-        enctype="multipart/form-data"
-        use:enhance={() => {
-          return async ({ update }) => {
-            await update({ reset: false });
-          };
-        }}
-      >
-        <label>
-          Light accent color:
-          <input
-            type="color"
-            name="accent-color-light"
-            value={data.globalSettings.accent_color_light_theme}
-          />
-        </label>
-        <label>
-          Light accent color:
-          <input
-            type="color"
-            name="accent-color-dark"
-            value={data.globalSettings.accent_color_dark_theme}
-          />
-        </label>
-        <label>
-          Favicon:
-          <input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
-        </label>
+      <button type="submit">Submit</button>
+    </form>
+  </section>
 
-        <button type="submit">Submit</button>
-      </form>
-    </section>
+  <section>
+    <h2>Header</h2>
 
-    <section>
-      <h3>Header</h3>
+    <form
+      action="?/updateHeader"
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Logo type:
+        <select name="logo-type">
+          <option value="text" selected={"text" === data.header.logo_type}>Text</option>
+          <option value="image" selected={"image" === data.header.logo_type}>Image</option>
+        </select>
+      </label>
+      <label>
+        Logo text:
+        <input type="text" name="logo-text" value={data.header.logo_text} />
+      </label>
+      <label>
+        Logo image:
+        <input type="file" name="logo-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
+      </label>
 
-      <form
-        action="?/updateHeader"
-        method="POST"
-        enctype="multipart/form-data"
-        use:enhance={() => {
-          return async ({ update }) => {
-            await update({ reset: false });
-          };
-        }}
-      >
-        <label>
-          Logo type:
-          <select name="logo-type">
-            <option value="text" selected={"text" === data.header.logo_type}>Text</option>
-            <option value="image" selected={"image" === data.header.logo_type}>Image</option>
-          </select>
-        </label>
-        <label>
-          Logo text:
-          <input type="text" name="logo-text" value={data.header.logo_text} />
-        </label>
-        <label>
-          Logo image:
-          <input type="file" name="logo-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
-        </label>
+      <button type="submit">Submit</button>
+    </form>
+  </section>
 
-        <button type="submit">Submit</button>
-      </form>
-    </section>
+  <section>
+    <h2>Home</h2>
 
-    <section>
-      <h3>Home</h3>
+    <form
+      action="?/updateHome"
+      method="POST"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Main content:
+        <textarea name="main-content">{data.home.main_content}</textarea>
+      </label>
 
-      <form
-        action="?/updateHome"
-        method="POST"
-        use:enhance={() => {
-          return async ({ update }) => {
-            await update({ reset: false });
-          };
-        }}
-      >
-        <label>
-          Main content:
-          <textarea name="main-content">{data.home.main_content}</textarea>
-        </label>
-      </form>
-    </section>
+      <button type="submit">Submit</button>
+    </form>
+  </section>
 
-    <section>
-      <h3>Footer</h3>
+  <section>
+    <h2>Footer</h2>
 
-      <form
-        action="?/updateFooter"
-        method="POST"
-        use:enhance={() => {
-          return async ({ update }) => {
-            await update({ reset: false });
-          };
-        }}
-      >
-        <label>
-          Additional text:
-          <textarea name="additional-text">{data.footer.additional_text}</textarea>
-        </label>
-      </form>
-    </section>
+    <form
+      action="?/updateFooter"
+      method="POST"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Additional text:
+        <textarea name="additional-text">{data.footer.additional_text}</textarea>
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
   </section>
 </WebsiteEditor>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
index 2d1a6f8..84eb8f0 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -3,6 +3,7 @@
   import { sortOptions } from "$lib/utils.js";
   import { page } from "$app/stores";
   import { enhance } from "$app/forms";
+  import Modal from "$lib/components/Modal.svelte";
 
   const { data, form } = $props();
 </script>
@@ -23,14 +24,18 @@
   <section>
     <h2>Create article</h2>
 
-    <form method="POST" action="?/createArticle" use:enhance>
-      <label>
-        Title:
-        <input type="text" name="title" />
-      </label>
+    <Modal id="create-article" text="Create article">
+      <h3>Create article</h3>
 
-      <button type="submit">Submit</button>
-    </form>
+      <form method="POST" action="?/createArticle" use:enhance>
+        <label>
+          Title:
+          <input type="text" name="title" />
+        </label>
+
+        <button type="submit">Submit</button>
+      </form>
+    </Modal>
   </section>
 
   {#if data.totalArticleCount > 0}
@@ -60,23 +65,49 @@
       </form>
 
       {#each data.articles as { id, title }}
-        <article>
+        <article class="article-card">
           <h3>{title}</h3>
-          <a href="/website/{data.website.id}/articles/{id}">Edit</a>
-          <details>
-            <summary>Delete</summary>
-            <p>
-              <strong>Caution!</strong>
-              Deleting this article will irretrievably erase all data.
-            </p>
-            <form method="POST" action="?/deleteArticle" use:enhance>
-              <input type="hidden" name="id" value={id} />
 
-              <button type="submit">Permanently delete article</button>
-            </form>
-          </details>
+          <div class="article-card__actions">
+            <a href="/website/{data.website.id}/articles/{id}">Edit</a>
+            <Modal id="delete-article-{id}" text="Delete">
+              <h4>Delete article</h4>
+
+              <p>
+                <strong>Caution!</strong>
+                Deleting this article will irretrievably erase all data.
+              </p>
+
+              <form method="POST" action="?/deleteArticle" use:enhance>
+                <input type="hidden" name="id" value={id} />
+
+                <button type="submit">Permanently delete article</button>
+              </form>
+            </Modal>
+          </div>
         </article>
       {/each}
     </section>
   {/if}
 </WebsiteEditor>
+
+<style>
+  .article-card {
+    display: flex;
+    align-items: center;
+    column-gap: 2rem;
+    row-gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .article-card:nth-of-type(1) {
+    margin-block-start: 1rem;
+  }
+
+  .article-card__actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+</style>
diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte
index 74896a1..746027d 100644
--- a/web-app/src/routes/+layout.svelte
+++ b/web-app/src/routes/+layout.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
+  import "../app.css";
   import { page } from "$app/stores";
   const { data, children } = $props();
 
   const isProjectRoute = $derived($page.url.pathname.startsWith("/website"));
+  const routeName = $derived(
+    $page.url.pathname === "/"
+      ? "Dashboard"
+      : `${$page.url.pathname.charAt(1).toUpperCase()}${$page.url.pathname.slice(2)}`
+  );
 </script>
 
 <nav>
@@ -18,7 +24,7 @@
 
 {#if !isProjectRoute}
   <header>
-    <h1>{$page.url.pathname}</h1>
+    <h1>{routeName}</h1>
   </header>
 {/if}
 
@@ -42,28 +48,28 @@
     margin-inline: auto;
   }
 
+  nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    overflow-x: auto;
+  }
+
+  nav > *:first-child {
+    margin-inline-end: auto;
+  }
+
   footer {
     text-align: center;
+    margin-block-start: auto;
   }
 
   .editor {
     inline-size: min(100% - 2rem, 1536px);
     block-size: calc(100vh - 7rem);
-    border: 0.0625rem solid hsl(0 0% 50%);
+    border: var(--border-primary);
     overflow-y: auto;
     display: flex;
     padding-block: 0;
   }
-
-  :global(section) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  :global(form) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
 </style>