From 37c8b444e52f249651604369b590fb0e6dbfa7cd Mon Sep 17 00:00:00 2001 From: Labyricorn Date: Sat, 22 Aug 2026 21:23:13 -0700 Subject: [PATCH] Move article sharing into sidebar --- assets/static/style.css | 171 ++++++++++++++++++++++----- templates/base.html | 2 +- templates/entry.html | 2 +- templates/macros/social-sharing.html | 28 +++-- 4 files changed, 164 insertions(+), 39 deletions(-) diff --git a/assets/static/style.css b/assets/static/style.css index 0f08e9d..d843ae3 100644 --- a/assets/static/style.css +++ b/assets/static/style.css @@ -430,13 +430,20 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style: .article-post-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(230px, 280px); + gap: 34px clamp(54px, 7vw, 92px); + align-items: start; + padding-block: 68px 90px; +} +.blog-post-layout { grid-template-areas: "header info" "body info" "share info"; - gap: 34px clamp(54px, 7vw, 92px); - align-items: start; - padding-block: 68px 90px; +} +.article-post-layout { + grid-template-areas: + "header info" + "body info"; } .blog-entry-header, .article-entry-header { grid-area: header; } @@ -488,43 +495,140 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style: .publication-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .share-panel { - display: grid; - grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr); - gap: 12px 28px; - border-block: 1px solid var(--rule); - padding-block: 22px; + position: relative; + width: 100%; + max-width: 340px; + overflow: hidden; + border: 1px solid var(--rule); + background: #0b0f13; + padding: 17px; + isolation: isolate; +} +.share-panel::before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + right: 17px; + width: 42%; + height: 1px; + background: var(--teal); + box-shadow: -12px 7px 0 -0.25px rgba(81,182,165,.35); + opacity: .7; +} +.share-panel::after { + content: ""; + position: absolute; + z-index: -1; + right: 0; + bottom: 0; + width: 16px; + height: 16px; + border-right: 1px solid rgba(210,97,134,.8); + border-bottom: 1px solid rgba(210,97,134,.8); } .blog-post-layout > .share-panel, .article-post-layout > .share-panel { grid-area: share; } -.share-panel-heading { align-self: center; } -.share-kicker { - margin: 0 0 5px; - color: var(--magenta); +.post-meta > .share-panel { max-width: none; } +.share-panel-heading { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; +} +.share-panel h2 { + margin: 0; + color: var(--teal); font: 500 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; } -.share-panel h2 { margin: 0; font: 600 17px/1.3 var(--serif); } -.share-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } +.share-panel h2 span[aria-hidden] { color: var(--muted); } +.share-panel-signal { + position: relative; + flex: 1; + height: 1px; + background: var(--rule); +} +.share-panel-signal::before, +.share-panel-signal::after { + content: ""; + position: absolute; + top: 50%; + border: 1px solid var(--teal); + background: #0b0f13; + transform: translateY(-50%); +} +.share-panel-signal::before { left: 0; width: 5px; height: 5px; border-radius: 50%; } +.share-panel-signal::after { right: 0; width: 3px; height: 3px; border-color: var(--magenta); } +.share-actions { + display: grid; + grid-template-columns: repeat(6, 40px); + gap: 8px; +} +.post-meta > .share-panel .share-actions { grid-template-columns: repeat(3, 40px); } .share-action { - border: 1px solid var(--rule); - padding: 7px 9px; - color: var(--muted); - font: 500 9px var(--mono); - letter-spacing: .07em; - text-transform: uppercase; + position: relative; + display: grid; + place-items: center; + width: 40px; + height: 40px; + overflow: hidden; + border: 1px solid #30404a; + background: #090d10; + color: #8aabb0; + clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); + transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; +} +.share-action::after { + content: ""; + position: absolute; + top: 2px; + left: -70%; + width: 65%; + height: 1px; + background: var(--teal); + box-shadow: 0 0 6px rgba(81,182,165,.9); + opacity: 0; } .share-action:hover, -.share-action:focus-visible { border-color: var(--teal); color: var(--teal); outline-color: var(--teal); } -.share-action-primary { border-color: rgba(81,182,165,.6); color: var(--teal); } +.share-action:focus-visible { + border-color: var(--teal); + color: var(--teal); + outline: 2px solid var(--teal); + outline-offset: 3px; + box-shadow: 0 0 12px rgba(81,182,165,.22), inset 0 0 8px rgba(81,182,165,.08); +} +.share-action:hover::after, +.share-action:focus-visible::after { animation: share-signal-travel .55s ease-out; } +.share-action:active { border-color: var(--magenta); color: var(--magenta); transform: translateY(1px); } +.share-action-primary { border-color: rgba(81,182,165,.65); color: var(--teal); } +.share-icon { display: block; width: 18px; height: 18px; fill: currentColor; } +.share-icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } +.share-icon-stroke .share-icon-fill { fill: currentColor; stroke: none; } .share-status { - grid-column: 2; min-height: 1.3em; - margin: 0; + margin: 10px 0 0; color: var(--teal); font: 500 9px var(--mono); letter-spacing: .06em; } +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; +} +@keyframes share-signal-travel { + 0% { left: -70%; opacity: 0; } + 20%, 70% { opacity: 1; } + 100% { left: 110%; opacity: 0; } +} .narration-player { border: 1px solid var(--rule); @@ -757,17 +861,24 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style: .blog-post-layout, .article-post-layout { grid-template-columns: minmax(0, 1fr); + gap: 30px; + padding-block: 44px 65px; + } + .blog-post-layout { grid-template-areas: "header" "info" "body" "share"; - gap: 30px; - padding-block: 44px 65px; + } + .article-post-layout { + grid-template-areas: + "header" + "info" + "body"; } .post-info { padding: 20px; } - .share-panel { grid-template-columns: 1fr; } - .share-status { grid-column: 1; } + .share-panel { max-width: 100%; } .narration-player { padding: 18px; } .narration-details { align-items: flex-start; flex-direction: column-reverse; } .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 28px; } @@ -776,5 +887,7 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style: @media (prefers-reduced-motion: reduce) { .circuit-status span, - .circuit-node-main i { animation: none; } + .circuit-node-main i, + .share-action:hover::after, + .share-action:focus-visible::after { animation: none; } } diff --git a/templates/base.html b/templates/base.html index 7a39ca1..ea9dd66 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,7 @@ - + diff --git a/templates/entry.html b/templates/entry.html index 46aad73..0a97915 100644 --- a/templates/entry.html +++ b/templates/entry.html @@ -103,6 +103,7 @@ {% endif %} + {{ share_controls(this, 'article') }} {{ narration_player(this) }} @@ -110,7 +111,6 @@ {{ this.body }} {% if this.external_url %}

Visit project →

{% endif %} - {{ share_controls(this, 'article') }} {% else %}
diff --git a/templates/macros/social-sharing.html b/templates/macros/social-sharing.html index 87a03a5..2f59818 100644 --- a/templates/macros/social-sharing.html +++ b/templates/macros/social-sharing.html @@ -129,16 +129,28 @@ {% set bluesky_text = (share_title|truncate(210, true, '…')) ~ ' ' ~ canonical_url %}