feat(web): update footer location

This commit is contained in:
arkohut 2024-11-14 15:25:39 +08:00
parent 602d4fa955
commit aa0974e037

View File

@ -285,6 +285,9 @@
<svelte:window on:keydown={handleKeydown} />
<!-- 添加一个最外层的容器来管理整体布局 -->
<div class="min-h-screen flex flex-col">
<!-- Header 部分 -->
<header
class="sticky top-0 z-10 transition-all duration-300"
bind:this={headerElement}
@ -314,8 +317,10 @@
<!-- 添加一个动态调整高度的空白区域 -->
<div style="height: {isScrolled ? '100px' : '0px'}"></div>
<!-- 主要内容区域 -->
<main class="flex-grow">
<div class="mx-auto flex flex-col sm:flex-row">
<!-- Left panel for tags and created_date -->
<!-- 左侧面板 -->
{#if searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0}
<div class="xl:w-1/7 lg:w-1/6 md:w-1/5 sm:w-full pr-4">
{#each searchResult.facet_counts as facet}
@ -330,7 +335,7 @@
</div>
{/if}
<!-- Right panel for search results -->
<!-- 右侧面板 -->
<div class="{searchResult && searchResult.facet_counts && searchResult.facet_counts.length > 0 ? 'xl:w-6/7 lg:w-5/6 md:w-4/5' : 'w-full'}">
{#if isLoading}
<p class="text-center">{$_('loading')}</p>
@ -387,6 +392,28 @@
{/if}
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full mx-auto mt-8">
<div class="container mx-auto">
<div class="border-t border-slate-900/5 py-10 text-center">
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('slogan')}</p>
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('copyright')}</p>
<div class="mt-2 flex justify-center items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
<a href="https://github.com/arkohut/memos"
target="_blank"
rel="noopener noreferrer"
class="hover:text-slate-900 transition-colors">
<Github size={16} />
</a>
<div class="h-4 w-px bg-slate-500/20" />
<LanguageSwitcher />
</div>
</div>
</div>
</footer>
</div>
{#if searchResult && searchResult.hits.length && showModal}
<Figure
@ -408,17 +435,3 @@
openModal((selectedImage - 1 + searchResult.hits.length) % searchResult.hits.length)}
/>
{/if}
<footer class="mx-auto mt-32 w-full container text-center">
<div class="border-t border-slate-900/5 py-10">
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('slogan')}</p>
<p class="mt-2 text-sm leading-6 text-slate-500">{$_('copyright')}</p>
<div class="mt-2 flex justify-center items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
<a href="https://github.com/arkohut/memos" target="_blank" rel="noopener noreferrer">
<Github size={16} />
</a>
<div class="h-4 w-px bg-slate-500/20" />
<LanguageSwitcher />
</div>
</div>
</footer>