From ff3457cdd761d950fdc54848b2c305c2103c95b3 Mon Sep 17 00:00:00 2001 From: johneybi Date: Tue, 11 Nov 2025 13:13:11 +0900 Subject: [PATCH 1/5] fix div --- assets/css/compiled/main.css | 30 +++-------- layouts/index.html | 97 ++++++++++++++++++------------------ 2 files changed, 56 insertions(+), 71 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 7a2d2a4..26dbe0e 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -265,7 +265,6 @@ body.zen-mode-enable { --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); - --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; @@ -1232,8 +1231,11 @@ body.zen-mode-enable { .mb-20 { margin-bottom: calc(var(--spacing) * 20); } - .mb-21 { - margin-bottom: calc(var(--spacing) * 21); + .mb-26 { + margin-bottom: calc(var(--spacing) * 26); + } + .mb-28 { + margin-bottom: calc(var(--spacing) * 28); } .mb-\[2px\] { margin-bottom: 2px; @@ -1648,9 +1650,6 @@ body.zen-mode-enable { .items-end { align-items: flex-end; } - .items-start { - align-items: flex-start; - } .justify-between { justify-content: space-between; } @@ -2191,24 +2190,9 @@ body.zen-mode-enable { .pb-6 { padding-bottom: calc(var(--spacing) * 6); } - .pb-7 { - padding-bottom: calc(var(--spacing) * 7); - } - .pb-8 { - padding-bottom: calc(var(--spacing) * 8); - } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } - .pb-11 { - padding-bottom: calc(var(--spacing) * 11); - } - .pb-12 { - padding-bottom: calc(var(--spacing) * 12); - } - .pb-21 { - padding-bottom: calc(var(--spacing) * 21); - } .pb-24 { padding-bottom: calc(var(--spacing) * 24); } @@ -3411,9 +3395,9 @@ body.zen-mode-enable { padding-inline: calc(var(--spacing) * 28); } } - .xl\:text-\[160px\] { + .xl\:text-\[152px\] { @media (width >= 1280px) { - font-size: 160px; + font-size: 152px; } } .\32 xl\:block { diff --git a/layouts/index.html b/layouts/index.html index 11724ca..ba6353b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,62 +1,63 @@ {{ define "main" }} -
-
-
-
- Product -
-
- & - Product -
-
-
-
+
+
+ Product +
+
+ & + Product +
+
+
+ -
+ + + + + + + + + + +
+

From 8a7903ae5f5173053ab2c2fc4aa1d5381e088865 Mon Sep 17 00:00:00 2001 From: johneybi Date: Tue, 11 Nov 2025 16:13:06 +0900 Subject: [PATCH 2/5] fix spacing --- assets/css/compiled/main.css | 43 ++++++++++++ assets/js/main.js | 33 +++++++++ layouts/index.html | 97 ++++++++++++++------------- layouts/partials/home/background.html | 2 +- themes/blowfish/i18n/ko.yaml | 2 +- 5 files changed, 127 insertions(+), 50 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 26dbe0e..147252a 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -665,6 +665,9 @@ body.zen-mode-enable { .me-4 { margin-inline-end: calc(var(--spacing) * 4); } + .me-50 { + margin-inline-end: calc(var(--spacing) * 50); + } .prose { color: var(--tw-prose-body); max-width: 65ch; @@ -1486,6 +1489,9 @@ body.zen-mode-enable { .max-w-\[267px\] { max-width: 267px; } + .max-w-\[376px\] { + max-width: 376px; + } .max-w-\[1600px\] { max-width: 1600px; } @@ -1540,6 +1546,9 @@ body.zen-mode-enable { .flex-shrink { flex-shrink: 1; } + .flex-shrink-0 { + flex-shrink: 0; + } .shrink-0 { flex-shrink: 0; } @@ -2160,6 +2169,12 @@ body.zen-mode-enable { .pt-28 { padding-top: calc(var(--spacing) * 28); } + .pt-40 { + padding-top: calc(var(--spacing) * 40); + } + .pt-90 { + padding-top: calc(var(--spacing) * 90); + } .pt-\[2px\] { padding-top: 2px; } @@ -2178,6 +2193,9 @@ body.zen-mode-enable { .pb-0 { padding-bottom: calc(var(--spacing) * 0); } + .pb-1 { + padding-bottom: calc(var(--spacing) * 1); + } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } @@ -3185,6 +3203,11 @@ body.zen-mode-enable { justify-content: flex-start; } } + .md\:gap-11 { + @media (width >= 853px) { + gap: calc(var(--spacing) * 11); + } + } .md\:p-\[10vh\] { @media (width >= 853px) { padding: 10vh; @@ -3200,6 +3223,11 @@ body.zen-mode-enable { padding-inline: calc(var(--spacing) * 24); } } + .md\:pt-90 { + @media (width >= 853px) { + padding-top: calc(var(--spacing) * 90); + } + } .md\:text-\[98px\] { @media (width >= 853px) { font-size: 98px; @@ -3280,6 +3308,11 @@ body.zen-mode-enable { height: calc(var(--spacing) * 72); } } + .lg\:h-\[880px\] { + @media (width >= 1024px) { + height: 880px; + } + } .lg\:h-full { @media (width >= 1024px) { height: 100%; @@ -3370,6 +3403,11 @@ body.zen-mode-enable { padding-inline-start: calc(var(--spacing) * 8); } } + .lg\:text-\[98px\] { + @media (width >= 1024px) { + font-size: 98px; + } + } .xl\:-mx-28 { @media (width >= 1280px) { margin-inline: calc(var(--spacing) * -28); @@ -3385,6 +3423,11 @@ body.zen-mode-enable { width: calc(1/4 * 100%); } } + .xl\:w-\[376px\] { + @media (width >= 1280px) { + width: 376px; + } + } .xl\:grid-cols-4 { @media (width >= 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); diff --git a/assets/js/main.js b/assets/js/main.js index 354875e..d6d1ac1 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -147,6 +147,39 @@ document.addEventListener("DOMContentLoaded", () => { // 3.0초 ~ 3.733초 : 대각선 십자가 스핀 (원본 t=120~164, 315° 회전) tl.to("#diagonal", { rotation: 405, duration: 0.733, ease: "power4.inOut" }, 4.5); + // 메인 애니메이션 완료 후 실행 + gsap.delayedCall(8.5, () => { + function rotateSequence() { + const tl = gsap.timeline({ + onComplete: () => { + gsap.delayedCall(3, rotateSequence); // 3초 후 다시 실행 + } + }); + // 1단계 + tl.to(["#diagonal", "#leftClose"], { + rotation: "+=45", + duration: 0.4, + ease: "power2.inOut" + }) + // 2초 대기 + .to({}, { duration: 3 }) + // 2단계 + .to(["#diagonal", "#upClose"], { + rotation: "+=45", + duration: 0.4, + ease: "power2.inOut" + }) + // 2초 대기 + .to({}, { duration: 3 }) + // 3단계 + .to(["#center", "#diagonal"], { + rotation: "+=45", + duration: 0.4, + ease: "power2.inOut" + }); + } + rotateSequence(); + }); }); \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index ba6353b..ab0aa76 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,58 +1,59 @@ {{ define "main" }} - -

-
-
- Product -
-
- & - Product +
+
+
+
+ Product +
+
+ & + Product +
-
-
-
+ + + + + + + +
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html index 36d30ec..64e0bc7 100644 --- a/layouts/partials/home/background.html +++ b/layouts/partials/home/background.html @@ -7,7 +7,7 @@ */}} {{ end }} -
+
Date: Tue, 11 Nov 2025 16:19:47 +0900 Subject: [PATCH 3/5] fix spacing --- assets/css/compiled/main.css | 23 +++++++++++++++++++++++ layouts/index.html | 6 +++--- layouts/partials/home/background.html | 2 +- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 147252a..715fd78 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -2172,6 +2172,9 @@ body.zen-mode-enable { .pt-40 { padding-top: calc(var(--spacing) * 40); } + .pt-60 { + padding-top: calc(var(--spacing) * 60); + } .pt-90 { padding-top: calc(var(--spacing) * 90); } @@ -3403,6 +3406,11 @@ body.zen-mode-enable { padding-inline-start: calc(var(--spacing) * 8); } } + .lg\:pb-1 { + @media (width >= 1024px) { + padding-bottom: calc(var(--spacing) * 1); + } + } .lg\:text-\[98px\] { @media (width >= 1024px) { font-size: 98px; @@ -3418,6 +3426,11 @@ body.zen-mode-enable { margin-inline: calc(var(--spacing) * 28); } } + .xl\:h-\[880px\] { + @media (width >= 1280px) { + height: 880px; + } + } .xl\:w-1\/4 { @media (width >= 1280px) { width: calc(1/4 * 100%); @@ -3438,6 +3451,16 @@ body.zen-mode-enable { padding-inline: calc(var(--spacing) * 28); } } + .xl\:pt-90 { + @media (width >= 1280px) { + padding-top: calc(var(--spacing) * 90); + } + } + .xl\:pb-2 { + @media (width >= 1280px) { + padding-bottom: calc(var(--spacing) * 2); + } + } .xl\:text-\[152px\] { @media (width >= 1280px) { font-size: 152px; diff --git a/layouts/index.html b/layouts/index.html index ab0aa76..1813dd4 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ {{ define "main" }} -
-
+
+
@@ -14,7 +14,7 @@ Product
-
+
+
Date: Tue, 11 Nov 2025 16:48:20 +0900 Subject: [PATCH 4/5] fix spacing --- assets/css/compiled/main.css | 85 +++++++++++++++++++++++++++ assets/js/main.js | 19 ++---- layouts/index.html | 11 ++-- layouts/partials/home/background.html | 2 +- 4 files changed, 97 insertions(+), 20 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 715fd78..392a0a7 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -620,6 +620,9 @@ body.zen-mode-enable { .mx-1 { margin-inline: calc(var(--spacing) * 1); } + .mx-4 { + margin-inline: calc(var(--spacing) * 4); + } .mx-12 { margin-inline: calc(var(--spacing) * 12); } @@ -1159,6 +1162,9 @@ body.zen-mode-enable { .mt-20 { margin-top: calc(var(--spacing) * 20); } + .mt-40 { + margin-top: calc(var(--spacing) * 40); + } .mt-90 { margin-top: calc(var(--spacing) * 90); } @@ -1372,6 +1378,12 @@ body.zen-mode-enable { .h-\[150px\] { height: 150px; } + .h-\[480px\] { + height: 480px; + } + .h-\[560px\] { + height: 560px; + } .h-\[680px\] { height: 680px; } @@ -1480,6 +1492,9 @@ body.zen-mode-enable { .max-w-\[5rem\] { max-width: 5rem; } + .max-w-\[40vw\] { + max-width: 40vw; + } .max-w-\[64rem\] { max-width: 64rem; } @@ -1665,6 +1680,9 @@ body.zen-mode-enable { .justify-center { justify-content: center; } + .justify-end { + justify-content: flex-end; + } .gap-4 { gap: calc(var(--spacing) * 4); } @@ -1738,6 +1756,9 @@ body.zen-mode-enable { .self-center { align-self: center; } + .self-end { + align-self: flex-end; + } .\!overflow-hidden { overflow: hidden !important; } @@ -2169,9 +2190,15 @@ body.zen-mode-enable { .pt-28 { padding-top: calc(var(--spacing) * 28); } + .pt-30 { + padding-top: calc(var(--spacing) * 30); + } .pt-40 { padding-top: calc(var(--spacing) * 40); } + .pt-50 { + padding-top: calc(var(--spacing) * 50); + } .pt-60 { padding-top: calc(var(--spacing) * 60); } @@ -2297,6 +2324,9 @@ body.zen-mode-enable { .text-\[0\.6rem\] { font-size: 0.6rem; } + .text-\[40px\] { + font-size: 40px; + } .text-\[60px\] { font-size: 60px; } @@ -3043,11 +3073,26 @@ body.zen-mode-enable { transition-property: none; } } + .sm\:mx-12 { + @media (width >= 640px) { + margin-inline: calc(var(--spacing) * 12); + } + } .sm\:me-7 { @media (width >= 640px) { margin-inline-end: calc(var(--spacing) * 7); } } + .sm\:me-50 { + @media (width >= 640px) { + margin-inline-end: calc(var(--spacing) * 50); + } + } + .sm\:mt-0 { + @media (width >= 640px) { + margin-top: calc(var(--spacing) * 0); + } + } .sm\:mt-16 { @media (width >= 640px) { margin-top: calc(var(--spacing) * 16); @@ -3063,6 +3108,11 @@ body.zen-mode-enable { display: block; } } + .sm\:flex { + @media (width >= 640px) { + display: flex; + } + } .sm\:hidden { @media (width >= 640px) { display: none; @@ -3083,6 +3133,21 @@ body.zen-mode-enable { flex-direction: row; } } + .sm\:items-center { + @media (width >= 640px) { + align-items: center; + } + } + .sm\:items-end { + @media (width >= 640px) { + align-items: flex-end; + } + } + .sm\:justify-between { + @media (width >= 640px) { + justify-content: space-between; + } + } .sm\:self-end { @media (width >= 640px) { align-self: flex-end; @@ -3124,6 +3189,11 @@ body.zen-mode-enable { line-height: var(--tw-leading, var(--text-lg--line-height)); } } + .sm\:text-\[60px\] { + @media (width >= 640px) { + font-size: 60px; + } + } .sm\:last\:me-0 { @media (width >= 640px) { &:last-child { @@ -3131,6 +3201,11 @@ body.zen-mode-enable { } } } + .md\:mx-12 { + @media (width >= 853px) { + margin-inline: calc(var(--spacing) * 12); + } + } .md\:-me-16 { @media (width >= 853px) { margin-inline-end: calc(var(--spacing) * -16); @@ -3176,6 +3251,11 @@ body.zen-mode-enable { height: 200px; } } + .md\:h-\[680px\] { + @media (width >= 853px) { + height: 680px; + } + } .md\:h-\[880px\] { @media (width >= 853px) { height: 880px; @@ -3406,6 +3486,11 @@ body.zen-mode-enable { padding-inline-start: calc(var(--spacing) * 8); } } + .lg\:pt-60 { + @media (width >= 1024px) { + padding-top: calc(var(--spacing) * 60); + } + } .lg\:pb-1 { @media (width >= 1024px) { padding-bottom: calc(var(--spacing) * 1); diff --git a/assets/js/main.js b/assets/js/main.js index d6d1ac1..05f37e1 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -21,20 +21,11 @@ document.addEventListener("DOMContentLoaded", () => { const typingSecondElement = document.getElementById("typingSecond"); if (typingSecondElement) { - gsap.matchMedia().add({ - // 1280px 초과 뷰포트 - isDesktop: "(min-width: 1281px)", - // 1280px 이하 뷰포트 - isMobile: "(max-width: 1280px)" - }, (context) => { - let { isDesktop } = context.conditions; - - gsap.to(typingSecondElement, { - delay: 1.4, - duration: 1.5, - x: isDesktop ? 268 : 160, // 화면 너비에 따라 x값 변경 - ease: "power2.inOut" - }); + gsap.to(typingSecondElement, { + delay: 1.4, + duration: 1.5, + x: '20vw', // Use viewport width unit + ease: "power2.inOut" }); } diff --git a/layouts/index.html b/layouts/index.html index 1813dd4..2bc5381 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,20 +1,21 @@ {{ define "main" }} -
-
+
+
-
Product
& Product
-
+
+
Date: Tue, 11 Nov 2025 16:52:22 +0900 Subject: [PATCH 5/5] fix spacing --- assets/js/main.js | 2 +- layouts/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 05f37e1..426dbb7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -24,7 +24,7 @@ document.addEventListener("DOMContentLoaded", () => { gsap.to(typingSecondElement, { delay: 1.4, duration: 1.5, - x: '20vw', // Use viewport width unit + x: '10vw', // Use viewport width unit ease: "power2.inOut" }); } diff --git a/layouts/index.html b/layouts/index.html index 2bc5381..5882195 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -9,7 +9,7 @@ Product
& Product