Revert "feat: switch to grid layout"

This reverts commit 969abee.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.10.0",
+  "version": "1.9.4",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/components/ui/Navbar.svelte

@@ -43,10 +43,8 @@
 </script>
 
 <nav
-  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50
-  dark:bg-black backdrop-blur-3xl w-full mx-auto px-4 py-2 z-10 box-border h-16
-  {$$props.class}"
-  style="grid-area: a;"
+  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
+  dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
     <a href="/" class="flex flex-row items-center gap-2 logo group">

src/lib/components/ui/StickyCard.svelte

@@ -1,5 +1,5 @@
 <aside
-  class="sticky break-words flex h-full
+  class="sticky top-16 break-words flex
     flex-col gap-4 p-6 max-w-full 2xl:w-96 w-80 max-h-[calc(100svh-4rem)]
     overflow-auto text-sm border-slate-200 dark:border-zinc-800 {$$props.class}"
 >

src/lib/components/ui/sidebar/Sidebar.svelte

@@ -3,11 +3,9 @@
     ArrowLeftOnRectangle,
     ChevronDoubleLeft,
     Cog6Tooth,
-    ComputerDesktop,
     GlobeAlt,
     Home,
     Icon,
-    ServerStack,
     UserGroup,
   } from 'svelte-hero-icons'
   import { profile, profileData } from '$lib/auth.js'
@@ -18,16 +16,14 @@
   import { flip } from 'svelte/animate'
   import { expoOut } from 'svelte/easing'
   import { Button } from 'mono-svelte'
-  import { site } from '$lib/lemmy.js'
 </script>
 
-<aside
-  class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto top-16 bottom-0
+<nav
+  class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
   gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
   {$userSettings.expandSidebar
-    ? 'max-w-[35vw] w-[25vw] resize-x min-w-[12rem]'
-    : 'w-max max-w-max min-w-max'} {$$props.class}"
-  style="grid-area: b;"
+    ? 'max-w-[25%] resize-x min-w-[12rem]'
+    : 'w-max max-w-max min-w-max'}"
 >
   <Button
     on:click={() =>
@@ -94,20 +90,4 @@
       <span class:hidden={!$userSettings.expandSidebar}>Log in</span>
     </Button>
   {/if}
-  {#if $userSettings.expandSidebar}
-    <div
-      class="mt-4 text-slate-600 dark:text-zinc-400 text-sm flex flex-row
-    items-center gap-4 flex-wrap"
-    >
-      <span class="flex gap-1 items-center" title="Lemmy version">
-        <Icon src={ServerStack} size="16" mini />
-        {$site?.version}
-      </span>
-      <!-- svelte-ignore missing-declaration -->
-      <span class="flex gap-1 items-center" title="Photon version">
-        <Icon src={ComputerDesktop} size="16" mini />
-        {__VERSION__}
-      </span>
-    </div>
-  {/if}
-</aside>
+</nav>

src/lib/settings.ts

@@ -61,7 +61,6 @@ interface Settings {
   font: 'inter' | 'system' | 'browser'
   leftAlign: boolean
   hidePhoton: boolean
-  glow: boolean
 }
 
 export const defaultSettings: Settings = {
@@ -102,7 +101,6 @@ export const defaultSettings: Settings = {
   font: 'system',
   leftAlign: false,
   hidePhoton: toBool(env.PUBLIC_REMOVE_CREDIT) ?? false,
-  glow: true
 }
 
 export const userSettings = writable(defaultSettings)

src/routes/+layout.svelte

@@ -13,7 +13,6 @@
   import { ToastContainer } from 'mono-svelte'
   import { onMount } from 'svelte'
   import { browser } from '$app/environment'
-  import Gradient from '$lib/components/ui/Gradient.svelte'
 
   nProgress.configure({
     minimum: 0.4,
@@ -56,45 +55,25 @@
 </svelte:head>
 
 <div
-  class="main-container min-h-screen
+  class="flex flex-col min-h-screen
+  font-inter
   {$userSettings.font == 'inter'
     ? 'font-inter'
     : $userSettings.font == 'system'
     ? 'font-system'
     : 'font-sans'}
   "
 >
-  {#if $userSettings.glow}
-    <Gradient />
-  {/if}
   <Navbar />
-  <Sidebar class="z-0 w-full min-w-0 sticky" />
   <ToastContainer />
   <Moderation />
-  <main
-    style="grid-area: c;"
-    class="p-3 sm:p-6 sm:rounded-l-lg max-w-full min-w-0
-      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950
-      h-full place-self-stretch"
-  >
-    <slot />
-  </main>
+  <div class="flex flex-row h-full w-full max-w-full flex-1">
+    <Sidebar />
+    <main
+      class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
+      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
+    >
+      <slot />
+    </main>
+  </div>
 </div>
-
-<style>
-  .main-container {
-    display: grid;
-    grid-template-columns: minmax(min-content, auto) 3fr;
-    grid-template-areas:
-      'a a'
-      'b c';
-    place-items: start;
-  }
-
-  @media (min-width: 640px) {
-    .main-container {
-      grid-template-columns: minmax(auto-fit, 1fr) 1fr;
-      grid-template-rows: max-content;
-    }
-  }
-</style>

src/routes/+page.svelte

@@ -34,7 +34,7 @@
   </div>
 </Modal>
 
-<div class="flex flex-row gap-4 w-full">
+<div class="flex flex-row gap-4 w-full h-full">
   <div class="flex flex-col gap-4 max-w-full w-full min-w-0">
     <header>
       <h1

src/routes/admin/+layout.svelte

@@ -4,7 +4,7 @@
   import MultiSelect from '$lib/components/input/Switch.svelte'
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 h-full">
   <MultiSelect
     headless
     options={[

src/routes/profile/+layout.svelte

@@ -9,7 +9,7 @@
   <title>Profile</title>
 </svelte:head>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 h-full">
   <MultiSelect
     headless
     options={['/profile/user', '/profile/settings', '/profile/blocks']}

src/routes/settings/+page.svelte

@@ -170,13 +170,6 @@
       bind:selected={$userSettings.leftAlign}
     />
   </Setting>
-  <Setting>
-    <span slot="title">Glow</span>
-    <p slot="description">Show a nice little glow in the top left corner.</p>
-    <Checkbox bind:checked={$userSettings.glow}>
-      {$userSettings.glow ? 'Enabled' : 'Disabled'}
-    </Checkbox>
-  </Setting>
   {#if LINKED_INSTANCE_URL}
     <Setting>
       <span slot="title">

src/style/app.css

@@ -25,7 +25,7 @@
 }
 
 body {
-  @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
+  @apply bg-slate-100 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
 }
 
 .dark {