v0.2.11: 커스텀 공유 모달과 레이아웃 수정 반영

Made-with: Cursor
2026-04-17 16:14:34 +09:00
parent 8bbb2c73f1
commit 12a1c450ae
13 changed files with 435 additions and 32 deletions
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -660,11 +660,7 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
 }

 .topbar {
-    position: sticky;
-    top: 0;
-    z-index: 20;
    height: var(--topbar-height);
-    width: 100%;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
 }
@@ -686,7 +682,6 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
 }

 .topbar__brand {
-    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
@@ -810,7 +805,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
-    padding: 0 16px;
    height: 100%;
 }

@@ -1242,6 +1236,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.45;
+    line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
@@ -1912,6 +1907,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
 }

 .search-result__excerpt {
+    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
@@ -1926,13 +1922,170 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
    gap: 0;
 }

-@media (max-width: 1023px) {
-    .topbar {
-        padding: 0 14px;
-        border-left: 0;
-        border-right: 0;
+body.share-modal-open {
+    overflow: hidden;
 }

+.share-modal[hidden] {
+    display: none;
+}
+
+.share-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    padding: 14px;
+}
+
+.share-modal__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(10, 10, 10, 0.42);
+    backdrop-filter: blur(4px);
+}
+
+.share-modal__dialog {
+    position: relative;
+    width: min(calc(100% - 2rem), 480px);
+    margin: 56px auto 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    transform: translateY(24px) scale(0.95);
+    opacity: 0;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.share-modal.is-open .share-modal__dialog {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+}
+
+.share-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 24px;
+    height: 24px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    opacity: 0.35;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+    font-size: 18px;
+    line-height: 1;
+    color: inherit;
+}
+
+.share-modal__close:hover {
+    opacity: 0.7;
+}
+
+.share-modal__eyebrow {
+    display: block;
+    align-self: flex-start;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-soft);
+    font-size: 11px;
+    font-weight: 700;
+}
+
+.share-modal__preview {
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.share-modal__image-wrap {
+    width: 100%;
+    aspect-ratio: 2 / 1;
+    background: var(--surface-muted);
+}
+
+.share-modal__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.share-modal__meta {
+    padding: 16px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.share-modal__title {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.35;
+}
+
+.share-modal__description {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--text-soft);
+    line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+.share-modal__actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 8px;
+}
+
+.share-modal__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    padding: 9px 12px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--surface-muted);
+    color: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+}
+
+.share-modal__action:hover {
+    opacity: 0.75;
+}
+
+.share-modal__action--x {
+    min-width: 44px;
+    padding-inline: 10px;
+}
+
+.share-modal__action--copy {
+    justify-content: flex-start;
+    gap: 8px;
+}
+
+.share-modal__action--copy.is-success {
+    background: #111111;
+    border-color: #111111;
+    color: #ffffff;
+}
+
+@media (max-width: 1023px) {
    .topbar__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
@@ -2067,11 +2220,6 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
 }

@media (max-width: 640px) {
-    .topbar {
-        padding-inline: 16px;
-        height: 60px;
-    }
-
    .button--accent {
        padding-inline: 12px;
        min-height: 38px;
--- a/assets/built/tailwind.css
+++ b/assets/built/tailwind.css
--- a/assets/built/theme.js
+++ b/assets/built/theme.js
@@ -699,6 +699,217 @@
        });
    }

+    function copyTextToClipboard(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            return navigator.clipboard.writeText(text);
+        }
+
+        return new Promise(function (resolve, reject) {
+            var textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.setAttribute("readonly", "readonly");
+            textArea.style.position = "fixed";
+            textArea.style.opacity = "0";
+            textArea.style.pointerEvents = "none";
+
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                var copied = document.execCommand("copy");
+                document.body.removeChild(textArea);
+
+                if (!copied) {
+                    reject(new Error("Copy command was rejected"));
+                    return;
+                }
+
+                resolve();
+            } catch (error) {
+                document.body.removeChild(textArea);
+                reject(error);
+            }
+        });
+    }
+
+    function setShareButtonFeedback(button, label) {
+        if (!button) {
+            return;
+        }
+
+        var originalLabel = button.dataset.shareOriginalLabel || button.getAttribute("aria-label") || "Share this post";
+        button.dataset.shareOriginalLabel = originalLabel;
+        button.setAttribute("aria-label", label);
+
+        if (button.dataset.shareFeedbackTimer) {
+            window.clearTimeout(Number(button.dataset.shareFeedbackTimer));
+        }
+
+        button.dataset.shareFeedbackTimer = String(window.setTimeout(function () {
+            button.setAttribute("aria-label", originalLabel);
+            delete button.dataset.shareFeedbackTimer;
+        }, 1600));
+    }
+
+    var shareModal = document.querySelector("[data-share-modal]");
+    var shareModalDialog = shareModal ? shareModal.querySelector(".share-modal__dialog") : null;
+    var shareModalTitle = shareModal ? shareModal.querySelector("[data-share-modal-title]") : null;
+    var shareModalDescription = shareModal ? shareModal.querySelector("[data-share-modal-description]") : null;
+    var shareModalImage = shareModal ? shareModal.querySelector("[data-share-modal-image]") : null;
+    var shareModalCopyButton = shareModal ? shareModal.querySelector("[data-share-copy-button]") : null;
+    var shareModalCopyLabel = shareModal ? shareModal.querySelector("[data-share-copy-label]") : null;
+    var activeShareMetadata = null;
+
+    function buildShareHrefMap(metadata) {
+        var encodedUrl = encodeURIComponent(metadata.url || "");
+        var encodedTitle = encodeURIComponent(metadata.title || "");
+
+        return {
+            x: "https://twitter.com/intent/tweet?text=" + encodedTitle + "&url=" + encodedUrl
+        };
+    }
+
+    function renderShareModal(metadata) {
+        if (!shareModal) {
+            return;
+        }
+
+        activeShareMetadata = metadata;
+        var hrefMap = buildShareHrefMap(metadata);
+
+        if (shareModalTitle) {
+            shareModalTitle.textContent = metadata.title || document.title || "Post";
+        }
+
+        if (shareModalDescription) {
+            shareModalDescription.textContent = metadata.description || "이 글을 공유해보세요.";
+        }
+
+        if (shareModalImage) {
+            if (metadata.image) {
+                shareModalImage.src = metadata.image;
+                shareModalImage.alt = metadata.title || "Post image";
+                shareModalImage.classList.remove("hidden");
+            } else {
+                shareModalImage.removeAttribute("src");
+                shareModalImage.classList.add("hidden");
+            }
+        }
+
+        Object.keys(hrefMap).forEach(function (key) {
+            var link = shareModal.querySelector("[data-share-link='" + key + "']");
+            if (!link) {
+                return;
+            }
+
+            link.href = hrefMap[key];
+        });
+
+        if (shareModalCopyLabel) {
+            shareModalCopyLabel.textContent = "주소 복사";
+        }
+    }
+
+    function openShareModal(metadata) {
+        if (!shareModal || !metadata || !metadata.url) {
+            return;
+        }
+
+        renderShareModal(metadata);
+        shareModal.hidden = false;
+        body.classList.add("share-modal-open");
+
+        window.requestAnimationFrame(function () {
+            shareModal.classList.add("is-open");
+        });
+    }
+
+    function closeShareModal() {
+        if (!shareModal || shareModal.hidden) {
+            return;
+        }
+
+        shareModal.classList.remove("is-open");
+        body.classList.remove("share-modal-open");
+
+        window.setTimeout(function () {
+            if (!shareModal.classList.contains("is-open")) {
+                shareModal.hidden = true;
+            }
+        }, 180);
+    }
+
+    function getShareMetadata(button) {
+        return {
+            url: (button.dataset.shareUrl || window.location.href || "").trim(),
+            title: (button.dataset.shareTitle || document.title || "").trim(),
+            description: (button.dataset.shareDescription || "").trim(),
+            image: (button.dataset.shareImage || "").trim()
+        };
+    }
+
+    function initializeShareButtons() {
+        document.querySelectorAll("[data-post-share-toggle]").forEach(function (button) {
+            if (button.dataset.shareBound === "true") {
+                return;
+            }
+
+            button.dataset.shareBound = "true";
+
+            button.addEventListener("click", function (event) {
+                event.preventDefault();
+                openShareModal(getShareMetadata(button));
+            });
+        });
+    }
+
+    if (shareModal) {
+        shareModal.querySelectorAll("[data-share-modal-close]").forEach(function (button) {
+            button.addEventListener("click", closeShareModal);
+        });
+
+        shareModal.addEventListener("click", function (event) {
+            if (shareModalDialog && !shareModalDialog.contains(event.target)) {
+                closeShareModal();
+            }
+        });
+
+        document.addEventListener("keydown", function (event) {
+            if (event.key === "Escape" && !shareModal.hidden) {
+                closeShareModal();
+            }
+        });
+
+        if (shareModalCopyButton) {
+            shareModalCopyButton.addEventListener("click", function () {
+                if (!activeShareMetadata || !activeShareMetadata.url) {
+                    return;
+                }
+
+                copyTextToClipboard(activeShareMetadata.url)
+                    .then(function () {
+                        setShareButtonFeedback(shareModalCopyButton, "복사 완료");
+                        shareModalCopyButton.classList.add("is-success");
+                        window.setTimeout(function () {
+                            shareModalCopyButton.classList.remove("is-success");
+                        }, 1400);
+                        if (shareModalCopyLabel) {
+                            shareModalCopyLabel.textContent = "복사 완료";
+                            window.setTimeout(function () {
+                                if (shareModalCopyLabel) {
+                                    shareModalCopyLabel.textContent = "주소 복사";
+                                }
+                            }, 1400);
+                        }
+                    })
+                    .catch(function () {});
+            });
+        }
+    }
+
+    initializeShareButtons();
+
    function updateLoadMoreState(pagination, nextUrl, loading) {
        var trigger = pagination.querySelector("[data-load-more-trigger]");
        if (!trigger) {
@@ -767,6 +978,7 @@
                        list.appendChild(item.cloneNode(true));
                    });

+                    initializeShareButtons();
                    updateLoadMoreState(pagination, nextPagination ? nextPagination.dataset.nextUrl : "", false);
                })
                .catch(function () {
--- a/default.hbs
+++ b/default.hbs
@@ -23,6 +23,45 @@
            {{> "site/sidebar-right"}}
        </div>
    </div>
+    <div class="share-modal" data-share-modal hidden>
+        <div class="share-modal__backdrop" data-share-modal-close></div>
+        <div class="share-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="share-modal-title">
+            <button class="share-modal__close" type="button" data-share-modal-close aria-label="Close share modal">×</button>
+            <span class="share-modal__eyebrow">Share this post</span>
+            <div class="share-modal__preview">
+                <figure class="share-modal__image-wrap">
+                    <img class="share-modal__image hidden" data-share-modal-image alt="">
+                </figure>
+                <div class="share-modal__meta">
+                    <h2 class="share-modal__title" id="share-modal-title" data-share-modal-title></h2>
+                    <p class="share-modal__description" data-share-modal-description></p>
+                </div>
+            </div>
+            <div class="share-modal__actions">
+                <a class="share-modal__action share-modal__action--x" data-share-link="x" target="_blank" rel="noopener noreferrer" aria-label="Share on X">
+                    <i class="icon icon-brand-x size-4 stroke-2" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
+                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
+                        </svg>
+                    </i>
+                    <span class="sr-only">Share on X</span>
+                </a>
+                <button class="share-modal__action share-modal__action--copy" type="button" data-share-copy-button aria-label="주소 복사">
+                    <i class="icon icon-link size-4 stroke-2" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <path d="M9 15l6 -6"></path>
+                            <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                            <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+                        </svg>
+                    </i>
+                    <span data-share-copy-label>주소 복사</span>
+                </button>
+            </div>
+        </div>
+    </div>

    {{ghost_foot}}
    <script defer src="{{asset "built/alpine.js"}}"></script>
--- a/docs/map.md
+++ b/docs/map.md
@@ -4,7 +4,7 @@
 - `v0.2.11`

 ## 공통 레이아웃
- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드
+- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드, 전역 공유 모달(`share-modal`) 마크업 포함
 - [partials/site/sidebar-left.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-left.hbs): 좌측 탐색(Primary `{{navigation}}`, Secondary `{{navigation type="secondary"}}`·`@site.secondary_navigation` 있을 때만)/Tags/카테고리 아코디언/푸터
 - [page-tags.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/page-tags.hbs): `slug=tags` 페이지용 태그 디렉터리
 - [tags-index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/tags-index.hbs): `/tags/` 커스텀 라우트용 태그 디렉터리
@@ -18,7 +18,7 @@
 - [partials/lists/post-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed.hbs): 홈 Featured 슬라이드, Latest 리스트, Categories(태그별 상위 5글) 묶음
 - [partials/lists/home-categories.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/home-categories.hbs): 홈 Latest 하단 태그별 최신 글 5개(텍스트 링크·우선순위 목록과 동일 정렬)
 - [partials/lists/post-feed-archive.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed-archive.hbs): 태그·작성자 아카이브용 글 목록 + Load More(페이지네이션)
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): Tailwind 기반 리스트형 포스트 카드(요약·메타·`post-card-content` 세로 정렬), 댓글 아이콘, 우측 공유 액션, 태그 accent 배지
+- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): Tailwind 기반 리스트형 포스트 카드(요약·메타·`post-card-content` 세로 정렬), 댓글 아이콘, 우측 공유 액션(`data-share-*` 메타데이터 전달), 태그 accent 배지

 ## 상세 및 아카이브
 - [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -53,6 +53,7 @@
 - `post-items` 카드 본문(`post-card-content`)은 요약 문단이 실제 텍스트 높이만 차지하며(`flex-1`·고정 `min-h` 없음), 요약이 있을 때만 메타 줄에 `mt-auto`를 주어 이미지와 높이를 맞출 때 생기던 요약 블록 내부 빈 여백을 줄임. 요약이 없으면 요약 노드를 렌더하지 않음
 - 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
 - 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
+- 포스트 상세/목록 공유 버튼(`data-post-share-toggle`)은 각 글의 `data-share-title/description/image/url` 메타데이터를 공통 공유 모달(`data-share-modal`)에 전달해 프리뷰 카드와 공유 액션(X, 주소 복사)을 렌더링함. 모달 닫기(배경/버튼/ESC)와 body scroll lock을 지원하며, 주소 복사 성공 시 버튼은 잠깐 검정 배경/흰 텍스트 상태로 바뀜
 - 포스트 본문은 `prose prose-theme` 클래스를 사용하며, Typography 플러그인 대신 Tailwind 입력 파일에서 원본 기준 타이포그래피 규칙을 직접 제공함
 - 포스트 댓글 영역은 `comments` 활성 여부를 우선 기준으로 노출하며, 활성 시 로그인 멤버는 댓글 0개 상태에서도 `{{comments}}` 입력 UI를 사용함
 - 본문 `ul`, `ol`은 전역 리스트 리셋과 별개로 `prose` 범위 안에서 실제 마커와 들여쓰기를 다시 적용함
--- a/docs/update.md
+++ b/docs/update.md
@@ -3,6 +3,9 @@
 ## v0.2.11 - 2026-04-17
 - `package.json` 버전을 `0.2.11`로 증가.
 - `assets/built/screen.css`: `topbar__inner` 그리드를 `minmax(0, var(--content-column))` 중앙 열로 복구해 데스크톱 3열 배치를 안정화. `minmax(260px, min(720px, 1fr))`·검색 트리거 강제 `min-width` 제거. 브랜드 `overflow: hidden` 제거 및 로고 `max-width: 100%` 보정. `1023px` 이하에서는 `topbar__inner`를 `minmax(0,1fr) auto` 2열로 두고 검색 숨김 시 액션을 그리드 2열에 배치(절대 위치 제거). `1024px` 이상에서만 `.topbar__search`에 `min-width: min(--topbar-search-min, 100%)` 적용.
+- `post.hbs`, `partials/lists/post-items.hbs`, `assets/built/theme.js`: 공유 버튼(`data-post-share-toggle`)에 실제 URL/제목 데이터를 연결하고, 클릭 시 Web Share API 우선 호출 후 미지원 환경에서는 링크 복사 fallback이 동작하도록 보정.
+- `default.hbs`, `post.hbs`, `partials/lists/post-items.hbs`, `assets/built/theme.js`, `assets/built/screen.css`: 포스트 공유를 커스텀 공유 모달(`share-modal`) 방식으로 전환. 공유 버튼 클릭 시 공통 모달에서 X와 주소 복사만 제공하고, 카드·포스트 데이터(`data-share-title/description/image/url`)를 모달 프리뷰와 공유 URL에 동기화.
+- `default.hbs`, `assets/built/theme.js`, `assets/built/screen.css`: 공유 모달 액션 아이콘을 SVG로 통일하고, 주소 복사 성공 시 버튼을 잠깐 검정 배경/흰 텍스트(`is-success`)로 표시해 피드백을 강화.
 - `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.11`로 동기화.

 ## v0.2.10 - 2026-04-17
--- a/home.hbs
+++ b/home.hbs
@@ -1,6 +1,6 @@
 {{!< default}}

-<main class="content-area">
+<main class="">
    {{> "home/hero"}}
    {{> "lists/post-feed" posts=posts}}
 </main>
--- a/partials/lists/home-categories.hbs
+++ b/partials/lists/home-categories.hbs
@@ -1,5 +1,5 @@
 {{!-- 홈 Latest 하단: 태그별 최신 글 최대 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
-<section class="px-5 sm:px-6 py-4 mb-8 home-categories" data-home-categories>
+<section class="px-4 sm:px-5 lg:px-6 py-4 mb-8 home-categories" data-home-categories>
    <div class="max-w-content mx-auto">
        <div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
            <h2 class="text-sm uppercase font-medium text-typ-tone">Categories</h2>
@@ -28,7 +28,7 @@
                                    <a href="{{url}}" class="home-categories__view-all mt-0.5 flex items-center gap-1 text-sm font-semibold leading-snug text-typ-tone hover:opacity-75">
                                        <span>View all</span>
                                        <i class="icon icon-arrow-up-right size-3.5 shrink-0 stroke-2" role="presentation" aria-hidden="true">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M17 7l-10 10"></path>
                                                <path d="M8 7l9 0l0 9"></path>
--- a/partials/lists/post-feed.hbs
+++ b/partials/lists/post-feed.hbs
@@ -1,4 +1,4 @@
-<section class="px-5 sm:px-6 py-4" data-home-featured>
+<section class="px-4 sm:px-5 lg:px-6 py-4" data-home-featured>
    <div class="max-w-content mx-auto">
        {{#get "posts" filter="featured:true" limit="12" include="authors,tags"}}
            {{#if posts}}
@@ -50,7 +50,7 @@
    </div>
 </section>

-<section class="px-5 sm:px-6 py-4" data-home-latest>
+<section class="px-4 sm:px-5 lg:px-6 py-4 " data-home-latest>
    <div class="max-w-content mx-auto">
        <div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
            <h2 class="text-sm uppercase font-medium text-typ-tone">Latest</h2>
--- a/partials/lists/post-items.hbs
+++ b/partials/lists/post-items.hbs
@@ -48,7 +48,7 @@
                        <span class="pointer-events-none">{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}</span>
                    </a>
                </div>
-                <button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
+                <button data-post-share-toggle data-share-url="{{url absolute="true"}}" data-share-title="{{title}}" data-share-description="{{#if excerpt}}{{excerpt words='24'}}{{else}}{{@site.description}}{{/if}}" data-share-image="{{#if feature_image}}{{img_url feature_image size='m'}}{{/if}}" class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
                    <i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
                    </i>
--- a/partials/site/topbar.hbs
+++ b/partials/site/topbar.hbs
@@ -1,6 +1,6 @@
-<header class="topbar border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
-    <div class="topbar__inner mx-auto">
-        <div class="topbar__brand flex h-full items-center gap-3 px-4 lg:px-0">
+<header class="topbar px-3 xl:px-0 sticky top-0 z-20 w-full border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
+    <div class="w-full max-w-[1294px] h-full flex justify-between items-center mx-auto gap-4">
+        <div class="topbar__brand flex h-full items-center gap-3">
            <button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme group" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open">
                    <i class="icon icon-layout-sidebar size-6 stroke-2" role="presentation">
@@ -31,7 +31,7 @@
                {{/if}}
            </a>
        </div>
-        <div class="topbar-search topbar__search flex h-full min-w-0 items-center justify-center px-4">
+        <div class="topbar-search topbar__search flex h-full min-w-0 items-center justify-center flex-1">
            <button class="search-trigger flex w-full min-w-0 max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
                <i class="icon icon-search shrink-0 size-5 md:size-4 stroke-2 md:stroke-[2.25] fill-bgr-tone [&amp;&gt;svg]:fill-inherit" role="presentation">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -44,7 +44,7 @@
                <span class="search-shortcut shrink-0">/</span>
            </button>
        </div>
-        <div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4 lg:px-0">
+        <div class="topbar__actions relative flex h-full items-center justify-end gap-2">
            <button class="w-8 h-8 cursor-pointer icon-button--user-menu inline-flex items-center justify-center rounded-theme overflow-hidden {{#unless @member}}bg-bgr hover:bg-bgr-tone{{/unless}}" type="button" aria-label="Open user menu" data-user-menu-toggle>
                {{#if @member}}
                    <figure class="relative w-8 h-8 pointer-events-none" data-member-avatar-figure>
--- a/post.hbs
+++ b/post.hbs
@@ -29,7 +29,7 @@
                        {{!-- {{/if}} --}}
                    </div>

-                    <button data-post-share-toggle class="absolute bottom-4 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer" type="button" aria-label="Share this post">
+                    <button data-post-share-toggle data-share-url="{{url absolute="true"}}" data-share-title="{{title}}" data-share-description="{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="24"}}{{/if}}" data-share-image="{{#if feature_image}}{{img_url feature_image size='m'}}{{/if}}" class="absolute bottom-4 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer" type="button" aria-label="Share this post">
                        <i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
                        </i>