Skip to content

Commit d14a9e8

Browse files
marwanmarwan
authored
Updated homepage design (#197)
1 parent 97594ba commit d14a9e8

14 files changed

+148
-128
lines changed

‎src/app.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<link crossorigin="anonymous" rel="manifest" href="%sveltekit.assets%/manifest.json" />
1717
<link crossorigin="anonymous" rel="icon" type="image/png" href="%sveltekit.assets%/images/favicon.png" />
1818
<link crossorigin="anonymous" href="%sveltekit.assets%/images/apple-touch-icon.png" rel="apple-touch-icon" />
19-
<link crossorigin="anonymous" rel="stylesheet" href="%sveltekit.assets%/css/global.css?8" />
19+
<link crossorigin="anonymous" rel="stylesheet" href="%sveltekit.assets%/css/global.css?9" />
2020

2121
<!-- setting background colors for themes -->
2222
<script>

‎src/components/svgs/BookBold.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
export let size = 4;
3+
</script>
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
6+
<path
7+
d="m24,15.594V4.5c0-1.402-.636-2.702-1.743-3.564-1.093-.852-2.49-1.145-3.823-.808-2.124.539-3.847.832-5.434.922v17.515c0,.553-.448,1-1,1s-1-.447-1-1V1.05c-1.59-.09-3.311-.383-5.434-.922-1.334-.338-2.729-.044-3.823.808C.635,1.798,0,3.098,0,4.5v11.094c0,2.269,1.548,4.264,3.764,4.852,1.007.267,2.038.483,3.088.649-1.745.434-3.807.815-5.896.907-.552.024-.979.491-.955,1.043.023.537.466.956.998.956.015,0,.03,0,.045,0,4.95-.217,9.601-1.893,10.956-2.421,1.355.528,6.007,2.204,10.956,2.421.015,0,.03,0,.045,0,.532,0,.975-.419.998-.956.024-.552-.403-1.019-.955-1.043-2.089-.092-4.151-.473-5.896-.907,1.05-.166,2.081-.382,3.087-.649,2.217-.588,3.765-2.583,3.765-4.852Zm-15.999,2.432c-1.716-.216-3.557-.525-5.225-.907-.538-.123-.875-.659-.751-1.197.123-.539.657-.876,1.198-.752,1.602.366,3.251.657,4.901.864.548.068.937.568.868,1.117-.063.505-.494.875-.991.875Zm0-4c-1.716-.216-3.557-.525-5.225-.907-.538-.123-.875-.659-.751-1.197.123-.539.657-.879,1.198-.752,1.602.366,3.251.657,4.901.864.548.068.937.568.868,1.117-.063.505-.494.875-.991.875Zm0-4.025c-1.722-.216-3.563-.526-5.225-.906-.538-.123-.875-.659-.751-1.197.123-.538.657-.879,1.198-.752,1.596.365,3.245.655,4.901.863.548.068.937.568.868,1.117-.063.505-.494.875-.991.875Zm0-4c-1.722-.216-3.563-.526-5.225-.906-.538-.123-.875-.659-.751-1.197.123-.538.657-.879,1.198-.752,1.596.365,3.245.655,4.901.863.548.068.937.568.868,1.117-.063.505-.494.875-.991.875Zm7.874-1.992c1.657-.208,3.306-.498,4.902-.863.535-.126,1.074.212,1.197.752.123.538-.213,1.074-.752,1.197-1.66.38-3.502.69-5.224.906-.497,0-.928-.37-.991-.875-.068-.549.319-1.049.867-1.117Zm0,4c1.657-.208,3.306-.498,4.902-.863.535-.125,1.074.213,1.197.752.123.538-.213,1.074-.752,1.197-1.66.38-3.502.69-5.224.906-.497,0-.928-.37-.991-.875-.068-.549.319-1.049.867-1.117Zm0,4.025c1.65-.207,3.3-.498,4.902-.864.535-.127,1.074.212,1.197.752.123.538-.213,1.074-.752,1.197-1.667.382-3.508.691-5.224.907-.497,0-.928-.37-.991-.875-.068-.549.319-1.049.867-1.117Zm.124,5.992c-.497,0-.928-.37-.991-.875-.068-.549.319-1.049.867-1.117,1.65-.207,3.3-.498,4.902-.864.535-.125,1.074.213,1.197.752.123.538-.213,1.074-.752,1.197-1.667.382-3.508.691-5.224.907Z"
8+
/>
9+
</svg>

‎src/components/svgs/MenuBold.svelte

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
export let size = 3;
3+
</script>
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512">
6+
<g>
7+
<path d="M85.333,0h64c47.128,0,85.333,38.205,85.333,85.333v64c0,47.128-38.205,85.333-85.333,85.333h-64 C38.205,234.667,0,196.462,0,149.333v-64C0,38.205,38.205,0,85.333,0z" />
8+
<path d="M362.667,0h64C473.795,0,512,38.205,512,85.333v64c0,47.128-38.205,85.333-85.333,85.333h-64 c-47.128,0-85.333-38.205-85.333-85.333v-64C277.333,38.205,315.538,0,362.667,0z" />
9+
<path d="M85.333,277.333h64c47.128,0,85.333,38.205,85.333,85.333v64c0,47.128-38.205,85.333-85.333,85.333h-64 C38.205,512,0,473.795,0,426.667v-64C0,315.538,38.205,277.333,85.333,277.333z" />
10+
<path d="M362.667,277.333h64c47.128,0,85.333,38.205,85.333,85.333v64C512,473.795,473.795,512,426.667,512h-64 c-47.128,0-85.333-38.205-85.333-85.333v-64C277.333,315.538,315.538,277.333,362.667,277.333z" />
11+
</g>
12+
</svg>

‎src/components/svgs/MorphologyBold.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
export let size = 4;
3+
</script>
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512">
6+
<path
7+
d="M448.383,286.442c-16.454,0.003-32.259,6.415-44.065,17.876l-25.107-12.554c20.494-67.214-17.38-138.315-84.594-158.809 c-24.586-7.496-50.867-7.37-75.38,0.361l-14.717-26.571c23.622-25.866,21.803-65.984-4.063-89.605 c-25.866-23.622-65.983-21.803-89.605,4.063s-21.803,65.983,4.063,89.605c11.734,10.716,27.063,16.637,42.953,16.591 c3.05-0.087,6.09-0.392,9.097-0.912l14.589,26.358c-55.259,41.007-67.66,118.636-27.928,174.818l-61.793,59.375 c-32.782-14.681-71.258-0.008-85.939,32.774s-0.008,71.258,32.774,85.939c32.782,14.681,71.258,0.008,85.939-32.774 c8.18-18.265,7.495-39.279-1.856-56.973l60.563-58.209c56.591,40.988,135.691,28.375,176.727-28.182l25.447,12.723 c-0.402,2.555-0.642,5.133-0.721,7.719c0,35.134,28.482,63.617,63.617,63.617S512,385.193,512,350.059 S483.518,286.442,448.383,286.442z"
8+
/>
9+
</svg>

‎src/components/svgs/PlaySolid.svelte

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
1+
<script>
2+
export let size = 6;
3+
</script>
4+
5+
<svg class="w-{size} h-{size}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
26
<path fill-rule="evenodd" d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z" clip-rule="evenodd" />
37
</svg>

‎src/components/svgs/Search2Bold.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
export let size = 4;
3+
</script>
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 511.786 511.786" style="enable-background:new 0 0 511.786 511.786;" xml:space="preserve" width="512" height="512">
6+
<g>
7+
<path d="M213.382,426.694c49.214,0.064,96.923-16.963,134.976-48.171l127.275,127.253c8.475,8.185,21.98,7.95,30.165-0.525 c7.984-8.267,7.984-21.373,0-29.641L378.545,348.337c74.545-91.24,61.011-225.636-30.229-300.181S122.68-12.855,48.135,78.385 S-12.876,304.02,78.364,378.566C116.472,409.701,164.172,426.704,213.382,426.694z" />
8+
</g>
9+
</svg>

‎src/components/svgs/SupplicationBold.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
export let size = 4;
3+
</script>
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"
6+
><path
7+
d="m22,21c0,1.657-1.343,3-3,3H7c-2.761,0-5-2.239-5-5v-1h17c1.657,0,3,1.343,3,3Zm0-16.027v12.052c-.699-.527-1.525-.86-2.395-.964-.199-.041-.402-.061-.605-.061H2V5C2,2.239,4.239,0,7,0h10.033c2.744,0,4.968,2.229,4.967,4.973Zm-9.614,7.297c-1.342-.831-2.386-2.269-2.386-4.269s1.044-3.438,2.386-4.269c.307-.19.183-.665-.177-.704-.293-.032-.594-.036-.903-.007-2.487.237-4.445,2.486-4.306,4.98-.139,2.494,1.82,4.743,4.306,4.98.309.029.61.026.903-.007.359-.04.484-.514.177-.704Zm4.64-5.022c0-.137-.111-.248-.248-.248h-1.596l-.449-1.718c-.031-.118-.137-.2-.259-.2s-.228.082-.259.2l-.45,1.718h-1.607c-.137,0-.248.111-.248.248,0,.09.049.173.127.216l1.289.717-.499,1.56c-.034.106.003.221.092.288.094.071.224.07.317-.002l1.238-.957,1.237.956c.091.07.218.074.312.008.095-.067.136-.188.099-.299l-.504-1.531,1.283-.742c.077-.044.124-.126.124-.214h0Z"
8+
/></svg
9+
>

‎src/components/ui/BottomToolbar/AudioButton.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323

2424
<!-- play/pause button -->
2525
<div class="flex items-center justify-center">
26-
<button type="button" title={$__audioSettings.isPlaying ? 'Pause' : 'Play'} on:click={() => audioHandler()} class="inline-flex flex-col items-center justify-center w-10 h-10 font-medium bg-black/15 rounded-full group focus:ring-2 focus:ring-gray-300 focus:outline-none">
27-
<span class="opacity-70"><svelte:component this={$__audioSettings.isPlaying ? Pause : PlaySolid} /></span>
26+
<button type="button" title={$__audioSettings.isPlaying ? 'Pause' : 'Play'} on:click={() => audioHandler()} class="inline-flex flex-col items-center justify-center w-12 h-12 bg-black/15 rounded-full group focus:ring-2 focus:ring-gray-300 focus:outline-none">
27+
<span class="opacity-70"><svelte:component this={$__audioSettings.isPlaying ? Pause : PlaySolid} size={6} /></span>
2828
<span class="sr-only">{$__audioSettings.isPlaying ? 'Pause' : 'Play'}</span>
2929

3030
<!-- show badge when a verse is playing -->

‎src/components/ui/BottomToolbar/BottomToolbar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { __currentPage, __bottomToolbarVisible } from '$utils/stores';
44
</script>
55

6-
<div id="bottom-toolbar" class="print:hidden {['chapter', 'page'].includes($__currentPage) ? 'block' : 'hidden'}">
6+
<div id="bottom-toolbar" class="print:hidden {['home', 'chapter', 'page'].includes($__currentPage) ? 'block' : 'hidden'}">
77
<div class="fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-sm -translate-x-1/2 bg-white border border-black/10 rounded-full bottom-4 left-1/2 theme {$__bottomToolbarVisible ? 'block' : 'hidden'}">
88
<div class="grid h-full max-w-lg grid-cols-5 mx-auto">
99
<BottomToolbarButtons />

‎src/components/ui/BottomToolbar/BottomToolbarButtons.svelte

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,56 @@
55
import AudioButton from '$ui/BottomToolbar/AudioButton.svelte';
66
import SettingsButton from '$ui/BottomToolbar/SettingsButton.svelte';
77
import MushafMinimalMode from '$ui/BottomToolbar/MushafMinimalMode.svelte';
8-
import { __currentPage } from '$utils/stores';
8+
import MenuBold from '$svgs/MenuBold.svelte';
9+
import Search2Bold from '$svgs/Search2Bold.svelte';
10+
import SupplicationBold from '$svgs/SupplicationBold.svelte';
11+
import MorphologyBold from '$svgs/MorphologyBold.svelte';
12+
import BookBold from '$svgs/BookBold.svelte';
13+
import Tooltip from '$ui/flowbite-svelte/tooltip/Tooltip.svelte';
14+
import { term } from '$utils/terminologies';
15+
import { __currentPage, __siteNavigationModalVisible, __quranNavigationModalVisible, __lastRead } from '$utils/stores';
916
</script>
1017

11-
<LeftNavigationButton />
12-
<DisplayChangeButton />
13-
<AudioButton />
18+
{#if $__currentPage === 'home'}
19+
<button class="opacity-70 inline-flex flex-col items-center rounded-s-full justify-center px-5 hover:bg-lightGray group" on:click={() => __quranNavigationModalVisible.set(true)}>
20+
<Search2Bold size={4} />
21+
<span class="sr-only">Search</span>
22+
</button>
23+
<Tooltip arrow={false} type="light" class="hidden md:block font-filter font-normal">Search</Tooltip>
1424

15-
{#if $__currentPage === 'page'}
16-
<MushafMinimalMode />
25+
<a href={`/${term('supplications').toLowerCase()}`} class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-lightGray group">
26+
<SupplicationBold size={4} />
27+
<span class="sr-only">Supplication</span>
28+
</a>
29+
<Tooltip arrow={false} type="light" class="hidden md:block font-filter font-normal">{term('supplications')}</Tooltip>
30+
31+
<div class="flex items-center justify-center">
32+
<a href={$__lastRead.hasOwnProperty('page') ? `/page/${$__lastRead.page}` : '/page/1'} class="inline-flex flex-col items-center justify-center w-12 h-12 bg-black/15 rounded-full group focus:ring-2 focus:ring-gray-300 focus:outline-none">
33+
<span class="opacity-70"><BookBold size={5} /></span>
34+
<span class="sr-only">Mushaf</span>
35+
</a>
36+
</div>
37+
<Tooltip arrow={false} type="light" class="hidden md:block font-filter font-normal">Mushaf</Tooltip>
38+
39+
<a href="/morphology/1:1" class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-lightGray group">
40+
<MorphologyBold size={4} />
41+
<span class="sr-only">Morphology</span>
42+
</a>
43+
<Tooltip arrow={false} type="light" class="hidden md:block font-filter font-normal">Morphology</Tooltip>
44+
45+
<button class="opacity-70 inline-flex flex-col items-center justify-center px-5 hover:bg-lightGray group" on:click={() => __siteNavigationModalVisible.set(true)}>
46+
<MenuBold size={4} />
47+
<span class="sr-only">Menu</span>
48+
</button>
49+
<Tooltip arrow={false} type="light" class="hidden md:block font-filter font-normal">Menu</Tooltip>
1750
{:else}
18-
<SettingsButton />
51+
<LeftNavigationButton />
52+
<DisplayChangeButton />
53+
<AudioButton />
54+
{#if $__currentPage === 'page'}
55+
<MushafMinimalMode />
56+
{:else}
57+
<SettingsButton />
58+
{/if}
59+
<RightNavigationButton />
1960
{/if}
20-
21-
<RightNavigationButton />

‎src/components/ui/HomepageTabs.svelte

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
import Mecca from '$svgs/Mecca.svelte';
33
import Madinah from '$svgs/Madinah.svelte';
44
import CrossSolid from '$svgs/CrossSolid.svelte';
5-
import Menu from '$svgs/Menu.svelte';
65
import Tooltip from '$ui/flowbite-svelte/tooltip/Tooltip.svelte';
7-
import Search from '$svgs/Search.svelte';
86
import { updateSettings } from '$utils/updateSettings';
97
import { quranMetaData, mostRead } from '$data/quranMeta';
108
import { __lastRead, __favouriteChapters, __userBookmarks, __userNotes, __timeSpecificChapters, __siteNavigationModalVisible, __quranNavigationModalVisible } from '$utils/stores';
@@ -23,6 +21,8 @@
2321
}
2422
}
2523
24+
$: noTimeSpecificChaptersAvailable = !$__timeSpecificChapters.isFriday && !$__timeSpecificChapters.isNight;
25+
2626
// chapter cards, tab styles
2727
const cardGridClasses = 'grid md:grid-cols-2 lg:grid-cols-3 gap-3';
2828
const cardInnerClasses = 'flex justify-between md:text-left border border-black/10 transition text-sm bg-gray-100 rounded-3xl p-5 hover:cursor-pointer hover:bg-lightGray';
@@ -56,13 +56,6 @@
5656
<button on:click={() => (activeTab = 4)} class="{tabClasses} {activeTab === 4 && activeTabClasses}" type="button" role="tab" aria-controls="notes-tab-panel" aria-selected="false">Notes</button>
5757
</div>
5858
</div>
59-
60-
<!-- menu for links on right -->
61-
<div class="ml-2 align-center">
62-
<button class="flex flex-row items-center bg-lightGray rounded-3xl p-3 {tabClasses} !border-b-0" title="Menu" on:click={() => __siteNavigationModalVisible.set(true)}>
63-
<span class="text-black opacity-70"><Menu /></span>
64-
</button>
65-
</div>
6659
</div>
6760
</div>
6861

@@ -72,47 +65,40 @@
7265
<!-- chapters tab -->
7366
<div class="homepage-tab-panels {activeTab === 1 ? 'block' : 'hidden'}" id="chapters-tab-panel" role="tabpanel" aria-labelledby="chapters-tab">
7467
<!-- chapter / page etc... selector -->
75-
<div class="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between text-xs mb-0 md:mb-2">
76-
<!-- search bar -->
77-
<button class="w-full md:w-full theme-grayscale" on:click={() => __quranNavigationModalVisible.set(true)}>
78-
<span class="w-full pointer-events-none {buttonOutlineClasses}">
79-
<span class="pt-1"><Search size={4} /></span>
80-
<span class="opacity-70">Navigate or Search Quran</span>
81-
</span>
82-
</button>
83-
84-
<div class="hidden md:block mx-1"></div>
85-
86-
<!-- time specific chapter buttons and last read -->
87-
<div class="flex flex-row space-x-2">
68+
<div class="flex flex-col md:flex-row justify-between text-xs mb-0 md:mb-2">
69+
<!-- time specific chapter buttons and search -->
70+
<div class="flex flex-row space-x-1 mb-2 md:mb-0 md:space-x-2">
8871
<!-- show Al Kahf on Friday -->
8972
{#if $__timeSpecificChapters.isFriday}
9073
<div id="al-kahf" class="w-full md:w-max">
91-
<a href="/18" class="py-2.5 w-full mb-4 md:mb-0 {buttonClasses}">
74+
<a href="/18" class="py-2.5 w-full truncate {buttonClasses}">
75+
<span>It's Friday:&nbsp;</span>
9276
Al-Kahf
93-
<span class="hidden md:block">{@html '&nbsp;'}{@html '&#10230'}</span>
77+
<span class="hidden md:block">{@html '&#10230'}</span>
9478
</a>
9579
</div>
9680
{/if}
9781

9882
<!-- show Al Mulk at night/evening -->
9983
{#if $__timeSpecificChapters.isNight}
10084
<div id="al-mulk" class="w-full md:w-max">
101-
<a href="/67" class="py-2.5 w-full mb-4 md:mb-0 {buttonClasses}">
85+
<a href="/67" class="py-2.5 w-full truncate {buttonClasses}">
86+
<span>Night Reminder:&nbsp;</span>
10287
Al-Mulk
103-
<span class="hidden md:block">{@html '&nbsp;'}{@html '&#10230'}</span>
88+
<span class="hidden md:block">{@html '&#10230'}</span>
10489
</a>
10590
</div>
10691
{/if}
107-
108-
<!-- last read -->
109-
{#if $__lastRead.hasOwnProperty('key')}
110-
<div id="last-read" class="w-full md:w-max">
111-
<a href="/{lastReadChapter}/{lastReadVerse}" class="hidden md:block py-2.5 w-full mb-4 md:mb-0 truncate {buttonClasses}">Continue Reading: {quranMetaData[lastReadChapter].transliteration}, {lastReadChapter}:{lastReadVerse} {@html '&#10230'}</a>
112-
<a href="/{lastReadChapter}/{lastReadVerse}" class="block md:hidden py-2.5 w-full mb-4 md:mb-0 truncate {buttonClasses}">Continue: {lastReadChapter}:{lastReadVerse} {@html '&#10230'}</a>
113-
</div>
114-
{/if}
11592
</div>
93+
94+
<div class="hidden md:block mx-1"></div>
95+
96+
<!-- last read -->
97+
{#if $__lastRead.hasOwnProperty('key')}
98+
<div id="last-read" class="w-full md:w-max">
99+
<a href="/{lastReadChapter}/{lastReadVerse}" class="py-2.5 w-full mb-4 md:mb-0 truncate {buttonOutlineClasses}">Continue Reading: {quranMetaData[lastReadChapter].transliteration}, {lastReadChapter}:{lastReadVerse} {@html '&#10230'}</a>
100+
</div>
101+
{/if}
116102
</div>
117103

118104
<div class="{cardGridClasses} grid-cols-2">

‎src/routes/+layout.svelte

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@
3636
let wakeLock = null;
3737
3838
// custom padding depending on page
39-
$: paddingTop = $__currentPage === 'home' ? 'pt-10' : defaultPaddingTop;
40-
$: paddingBottom = $__currentPage === 'chapter' ? 'pb-24' : defaultPaddingBottom;
41-
$: paddingX = $__currentPage === 'page' ? 'px-0 md:px-4' : $__currentPage === 'home' ? 'px-0' : 'px-4';
39+
$: paddingTop = 0;
40+
$: paddingBottom = 0;
41+
$: paddingX = 0;
42+
43+
setDefaultPaddings();
4244
4345
// if settings drawer is open, hide body scroll
4446
$: $__settingsDrawerHidden ? document.body.classList.remove('overflow-y-hidden') : document.body.classList.add('overflow-y-hidden');
@@ -54,14 +56,13 @@
5456
5557
// distraction free mushaf mode, that is, hiding the top & bottom bar
5658
$: {
57-
if ($__mushafMinimalModeEnabled) {
59+
if ($__mushafMinimalModeEnabled && $__currentPage === 'page') {
5860
paddingTop = 'pt-0';
5961
paddingBottom = 'pb-0';
6062
__topNavbarVisible.set(false);
6163
__bottomToolbarVisible.set(false);
6264
} else {
63-
paddingTop = defaultPaddingTop;
64-
paddingBottom = defaultPaddingBottom;
65+
setDefaultPaddings();
6566
__topNavbarVisible.set(true);
6667
__bottomToolbarVisible.set(true);
6768
}
@@ -110,6 +111,13 @@
110111
}
111112
}
112113
114+
// custom padding depending on page
115+
function setDefaultPaddings() {
116+
paddingTop = $__currentPage === 'home' ? 'pt-10' : defaultPaddingTop;
117+
paddingBottom = $__currentPage === 'chapter' ? 'pb-24' : $__currentPage === 'home' ? 'pb-16' : defaultPaddingBottom;
118+
paddingX = $__currentPage === 'page' ? 'px-0 md:px-4' : $__currentPage === 'home' ? 'px-0' : 'px-4';
119+
}
120+
113121
// toggle bottom nav on scroll
114122
document.getElementsByTagName('body')[0].onscroll = () => {
115123
debounce(toggleNavbar, 0);

0 commit comments

Comments
 (0)