Merge pull request #169 from MaddyGuthridge/maddy-fix-mobile-article-view

Even more CSS fixes

Author: MaddyGuthridge

src/app.html

@@ -15,7 +15,7 @@
 			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 		}
 
-		body {
+		html, body {
 			margin: 0;
 			overflow-x: clip;
 		}

src/components/markdown/Markdown.svelte

@@ -94,6 +94,8 @@
   .markdown-render :global(p) {
     /* Justify text */
     text-align: justify;
+    /* Hyphenate text in paragraphs if needed */
+    hyphens: auto;
   }
 
   .markdown-render :global(h1),

src/components/navbar/ControlButtons.svelte

@@ -53,37 +53,32 @@
   }
 </script>
 
-{#snippet buttons()}
-  <span id="control-buttons">
-    {#if loggedIn}
-      {#if editable}
-        <!-- Use the one button so that animations persist between states -->
-        <Button
-          onclick={editButtonClick}
-          mode={editing ? 'confirm' : 'default'}
-        >
-          {editing ? 'Finish editing' : 'Edit'}
-        </Button>
-      {/if}
-      <Button onclick={() => goto('/admin')}>Admin</Button>
-      <Button onclick={logOut}>Log out</Button>
-    {:else if loggedIn !== undefined}
-      <!-- Only include a login button if logging in is enabled -->
-      <Button onclick={gotoLogin}>Log in</Button>
+<span id="control-buttons">
+  {#if loggedIn}
+    {#if editable}
+      <!-- Use the one button so that animations persist between states -->
+      <Button onclick={editButtonClick} mode={editing ? 'confirm' : 'default'}>
+        {editing ? 'Finish editing' : 'Edit'}
+      </Button>
     {/if}
-    <!-- About button navigates to about page -->
-    <Button onclick={() => goto('/about')}>About</Button>
-    <!-- In dev mode, add a quick shortcut to delete everything -->
-    {#if dev}
+    <Button onclick={() => goto('/admin')}>Admin</Button>
+    <Button onclick={logOut}>Log out</Button>
+  {:else if loggedIn !== undefined}
+    <!-- Only include a login button if logging in is enabled -->
+    <Button onclick={gotoLogin}>Log in</Button>
+  {/if}
+  <!-- About button navigates to about page -->
+  <Button onclick={() => goto('/about')}>About</Button>
+  <!-- In dev mode, add a quick shortcut to delete everything -->
+  {#if dev}
+    <div class="sep">
       <Separator />
-      <Button onclick={clear} mode="warning">Clear data</Button>
-    {/if}
-  </span>
-{/snippet}
-
-{@render buttons()}
+    </div>
+    <Button onclick={clear} mode="warning">Clear data</Button>
+  {/if}
+</span>
 
-<!-- TODO: Make control buttons responsive, so they change to a curtain menu on mobile devices -->
+<!-- TODO: Make control buttons change to a curtain menu on mobile devices -->
 
 <style>
   #control-buttons {
@@ -94,4 +89,15 @@
     grid-area: control-buttons;
     margin-right: 20px;
   }
+
+  /* When screen is narrow, make buttons vertical and hide the separator */
+  @media (width < 50rem) {
+    #control-buttons {
+      flex-direction: column;
+    }
+
+    .sep {
+      display: none;
+    }
+  }
 </style>

src/components/navbar/Navbar.svelte

@@ -158,7 +158,7 @@
   }
 
   /* If the device is wide enough, make the navbar sticky */
-  @media (min-width: 50rem) {
+  @media (50rem <= width) {
     nav {
       position: sticky;
     }
@@ -181,7 +181,22 @@
 
   h1 {
     margin: 0px;
-    font-size: 3em;
+  }
+
+  @media (width < 30rem) {
+    h1 {
+      font-size: 2rem;
+    }
+  }
+  @media (30rem <= width < 50rem) {
+    h1 {
+      font-size: 2.5rem;
+    }
+  }
+  @media (50rem <= width) {
+    h1 {
+      font-size: 3rem;
+    }
   }
 </style>
 

src/routes/[...item]/+page.svelte

@@ -332,7 +332,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 1300px;
+    max-width: 1000px;
     width: 90%;
   }
 

src/routes/about/+page.svelte

@@ -13,7 +13,7 @@
   const { data }: Props = $props();
 
   const versionInfo = dev
-    ? `v${version} - dev`
+    ? `v${version}-dev`
     : `[v${version}](${consts.APP_GITHUB}/releases/tag/v${version})`;
 
   const authorLink = `[${consts.APP_AUTHOR[0]}](${consts.APP_AUTHOR[1]})`;
@@ -32,7 +32,7 @@ ${authorLink}.
 
 ${contributors}
 
-Here's how you can help out:
+Here's how you can get involved:
 
 * [Learn how to deploy your own instance of ${consts.APP_NAME}](${consts.APP_DOCS}/deploy).
 * [View the source code on GitHub](${consts.APP_GITHUB}).
@@ -68,7 +68,7 @@ For security reasons, these details are only shown if you are logged in.
   data={data.portfolio}
   loggedIn={data.loggedIn}
 />
-<Background color={'#ff00ff'} />
+<Background color={data.portfolio.info.color} />
 
 <main>
   <div>
@@ -81,8 +81,10 @@ For security reasons, these details are only shown if you are logged in.
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
   }
   main > div {
-    min-width: 80%;
+    max-width: 800px;
+    padding: 20px;
   }
 </style>