trle5/hexo_s
trle5/hexo_s
1
Fork 0
Code Pull Requests Activity

style(home container): 💄 set max-width to 900px

Browse Source
This commit is contained in:
Hubert 2024-01-24 00:55:27 +08:00
parent dd08a49e1e
commit 14fcfbfef5
Signed by: trle5
GPG Key ID: 2935B4DE0D6F7720
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.pcss
View File

@ -193,3 +193,9 @@ pre.twoslash data-lsp:hover::before {
max-width: 1024px;
}
}
@media (min-width: 1728px) {
.custom-1728-max-w-home-900 {
max-width: 900px;
}
}

6
src/lib/components/extra/sections.svelte
View File

@ -51,13 +51,13 @@
<div
in:fly={{ x: 25, duration: 300, delay: 500 }}
out:fly={{ x: 25, duration: 300 }}
class="flex-1 w-full max-w-screen-md custom-1728-max-w-screen-lg order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
class="flex-1 w-full max-w-screen-md custom-1728-max-w-home-900 order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
<Profile />
</div>
<div
in:fly={{ x: -25, duration: 300, delay: 500 }}
out:fly={{ x: -25, duration: 300 }}
class="flex-1 w-full max-w-screen-md custom-1728-max-w-screen-lg xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md mask-r md-mask-r">
class="flex-1 w-full max-w-screen-md custom-1728-max-w-home-900 xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md mask-r md-mask-r">
<!-- TODO: add box with "{section.id} related tags:" -->
{#if allTags && Object.keys(allTags).length > 0}
<div
@ -75,7 +75,7 @@
</div>
{/if}
</div>
<div class="flex-none w-full max-w-screen-md custom-1728-max-w-screen-lg mx-auto xl:mx-0">
<div class="flex-none w-full max-w-screen-md custom-1728-max-w-home-900 mx-auto xl:mx-0">
{#key posts}
<!-- {:else} is not used because there is a problem with the transition -->
{#if loaded && posts.length === 0}

6
src/routes/+page.svelte
View File

@ -44,13 +44,13 @@
<div
in:fly={{ x: 25, duration: 300, delay: 500 }}
out:fly={{ x: 25, duration: 300 }}
class="flex-1 w-full max-w-screen-md custom-1728-max-w-screen-lg order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
class="flex-1 w-full max-w-screen-md custom-1728-max-w-home-900 order-first mx-auto xl:mr-0 xl:ml-8 xl:max-w-md">
<Profile />
</div>
<div
in:fly={{ x: -25, duration: 300, delay: 500 }}
out:fly={{ x: -25, duration: 300 }}
class="flex-1 w-full max-w-screen-md custom-1728-max-w-screen-lg xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md mask-r md-mask-r">
class="flex-1 w-full max-w-screen-md custom-1728-max-w-home-900 xl:order-last mx-auto xl:ml-0 xl:mr-8 xl:max-w-md mask-r md-mask-r">
{#if allTags && Object.keys(allTags).length > 0}
<div
class="flex xl:flex-wrap gap-2 overflow-x-auto xl:overflow-x-hidden overflow-y-hidden max-h-24 my-auto mb-1 xl:max-h-fit max-w-fit xl:max-w-full px-6 md:px-0 xl:pl-8 xl:pt-8">
@ -67,7 +67,7 @@
</div>
{/if}
</div>
<div class="flex-none w-full max-w-screen-md custom-1728-max-w-screen-lg mx-auto xl:mx-0">
<div class="flex-none w-full max-w-screen-md custom-1728-max-w-home-900 mx-auto xl:mx-0">
{#key posts}
<!-- {:else} is not used because there is a problem with the transition -->
{#if loaded && posts.length === 0}