misc: use satoshi for headers

Xyphyn · Jul 10, 2024 · 471ffd3 · 471ffd3
1 parent a28abf9
commit 471ffd3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/src/lib/components/lemmy/post/PostForm.svelte b/src/lib/components/lemmy/post/PostForm.svelte
@@ -23,6 +23,7 @@
   import { t } from '$lib/translations'
   import { slide } from 'svelte/transition'
   import { feature } from '$lib/version'
+  import Header from '$lib/components/ui/layout/pages/Header.svelte'
 
   export let edit = false
 
@@ -228,9 +229,9 @@
 
 <form on:submit|preventDefault={submit} class="flex flex-col gap-4 h-full">
   <slot name="formtitle">
-    <h1 class="font-bold text-xl">
+    <Header class="font-bold text-xl">
       {edit ? $t('form.post.edit') : $t('form.post.create')}
-    </h1>
+    </Header>
   </slot>
   {#if !edit && data}
     {#if !data.community}

diff --git a/src/lib/components/ui/layout/pages/Header.svelte b/src/lib/components/ui/layout/pages/Header.svelte
@@ -1,3 +1,12 @@
-<h1 class="text-3xl font-bold flex items-center gap-2 {$$props.class ?? ''}">
+<script lang="ts">
+  import { userSettings } from '$lib/settings'
+</script>
+
+<h1
+  class="text-3xl font-bold flex items-center gap-2 {$userSettings.font ==
+  'satoshi/nunito'
+    ? 'font-display'
+    : ''} {$$props.class ?? ''}"
+>
   <slot />
 </h1>
diff --git a/src/routes/create/post/+page.svelte b/src/routes/create/post/+page.svelte
@@ -5,6 +5,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { getSessionStorage, setSessionStorage } from '$lib/session.js'
   import { t } from '$lib/translations.js'
+  import Header from '$lib/components/ui/layout/pages/Header.svelte'
 
   export let data = {
     crosspost: false,
@@ -47,6 +48,6 @@
     passedCommunity={community}
     on:submit={(e) => goto(`/post/${e.detail.post.id}`)}
   >
-    <h1 class="text-3xl font-bold" slot="formtitle">Create Post</h1>
+    <Header class="text-3xl font-bold" slot="formtitle">Create Post</Header>
   </PostForm>
 </div>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -42,6 +42,7 @@
   import ToggleSetting from './ToggleSetting.svelte'
   import { locale, locales, t } from '$lib/translations'
   import { defaultLinks, iconOfLink } from '$lib/components/ui/navbar/link'
+  import Header from '$lib/components/ui/layout/pages/Header.svelte'
 
   let pin: string = ''
   let importing = false
@@ -79,7 +80,7 @@
   </Modal>
 {/if}
 
-<h1 class="text-3xl font-bold flex justify-between">
+<Header class="text-3xl font-bold flex justify-between">
   {$t('settings.title')}
   <div class="flex items-center">
     <Button
@@ -122,7 +123,7 @@
       <Icon src={ArrowPath} mini size="18" slot="prefix" />
     </Button>
   </div>
-</h1>
+</Header>
 
 <div class="flex flex-col gap-4" style="scroll-behavior: smooth;">
   <Section title={$t('settings.navigation.title')}>