zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.58: 메인·우측 사이드 간격 및 가로 넘침 수정

Browse Source 
그리드 중앙을 1fr로 두고 column-gap을 적용하며, site-main 고정 720px 제거로 패딩·gap이 있을 때 본문이 오른쪽으로 삐져나가지 않게 했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-11 12:08:42 +09:00
parent 8daec2806b
commit 2f7ce64391
9 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/default.vue
View File

@@ -45,12 +45,12 @@ onBeforeUnmount(() => {
/>
</Transition>
<div
class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
:class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,1fr)_287px] lg:items-start lg:gap-x-4 lg:px-5 lg:transition-[grid-template-columns,max-width,gap] lg:duration-300 lg:ease-out xl:gap-x-5 xl:px-6 2xl:px-0"
:class="menuOpen ? '' : 'lg:max-w-[1007px] lg:!gap-x-0 lg:[grid-template-columns:0_minmax(0,1fr)_287px]'"
>
<main
class="site-main min-w-0 w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:w-[720px]"
:class="{ 'site-main--menu-closed': !menuOpen }"
class="site-main min-w-0 w-full max-w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:max-w-[720px] lg:justify-self-start"
:class="[{ 'site-main--menu-closed': !menuOpen }, !menuOpen ? 'lg:pr-4 xl:pr-5' : '']"
>
<slot />
</main>

8
layouts/post.vue
View File

@@ -45,12 +45,12 @@ onBeforeUnmount(() => {
/>
</Transition>
<div
class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
:class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,1fr)_287px] lg:items-start lg:gap-x-4 lg:px-5 lg:transition-[grid-template-columns,max-width,gap] lg:duration-300 lg:ease-out xl:gap-x-5 xl:px-6 2xl:px-0"
:class="menuOpen ? '' : 'lg:max-w-[1007px] lg:!gap-x-0 lg:[grid-template-columns:0_minmax(0,1fr)_287px]'"
>
<main
class="site-main min-w-0 w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:w-[720px]"
:class="{ 'site-main--menu-closed': !menuOpen }"
class="site-main min-w-0 w-full max-w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:max-w-[720px] lg:justify-self-start"
:class="[{ 'site-main--menu-closed': !menuOpen }, !menuOpen ? 'lg:pr-4 xl:pr-5' : '']"
>
<slot />
</main>