OpenAI/labyricorn-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move article sharing into sidebar
Deploy production / deploy (push) Successful in 20s
Details

Browse Source
This commit is contained in:
Labyricorn
2026-08-22 21:23:13 -07:00
parent 1d9dd212bf
commit 37c8b444e5
4 changed files with 164 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/static/style.css
+142 -29
View File
@@ -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; }
}
templates/base.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
<link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=16">
<link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=17">
<script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
<script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
<script src="{{ '/static/hero-circuit.js'|url }}?v=2" defer></script>
templates/entry.html
+1 -1
View File
@@ -103,6 +103,7 @@
{% endif %}
</dl>
</aside>
{{ share_controls(this, 'article') }}
{{ narration_player(this) }}
</div>
@@ -110,7 +111,6 @@
{{ this.body }}
{% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
</div>
{{ share_controls(this, 'article') }}
</article>
{% else %}
<article>
templates/macros/social-sharing.html
+20 -8
View File
@@ -129,16 +129,28 @@
{% set bluesky_text = (share_title|truncate(210, true, '…')) ~ ' ' ~ canonical_url %}
<aside class="share-panel" aria-labelledby="share-heading" data-share-component data-share-url="{{ canonical_url }}" data-share-title="{{ share_title }}" data-share-description="{{ share_description }}">
<div class="share-panel-heading">
<p class="share-kicker">Share</p>
<h2 id="share-heading">Send this {{ content_kind }}</h2>
<h2 id="share-heading">Share <span aria-hidden="true">// Transmit</span><span class="visually-hidden"> this {{ content_kind }}</span></h2>
<span class="share-panel-signal" aria-hidden="true"></span>
</div>
<div class="share-actions">
<a class="share-action share-action-primary" href="{{ canonical_url }}" data-share-native aria-label="Share {{ share_title }}">Share</a>
<a class="share-action" href="https://www.facebook.com/sharer/sharer.php?u={{ canonical_url|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Facebook">Facebook</a>
<a class="share-action" href="https://www.linkedin.com/sharing/share-offsite/?url={{ canonical_url|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on LinkedIn">LinkedIn</a>
<a class="share-action" href="https://www.reddit.com/submit?url={{ canonical_url|urlencode }}&amp;title={{ share_title|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Reddit">Reddit</a>
<a class="share-action" href="https://bsky.app/intent/compose?text={{ bluesky_text|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Bluesky">Bluesky</a>
<a class="share-action" href="{{ canonical_url }}" data-share-copy aria-label="Copy the link to {{ share_title }}">Copy Link</a>
<a class="share-action share-action-primary" href="{{ canonical_url }}" data-share-native aria-label="Share {{ share_title }}" title="Share using device controls">
<svg class="share-icon share-icon-stroke" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="18" cy="5" r="2.2"/><circle cx="6" cy="12" r="2.2"/><circle cx="18" cy="19" r="2.2"/><path d="m8 11 7.9-4.7M8 13l7.9 4.7"/></svg>
</a>
<a class="share-action" href="https://www.facebook.com/sharer/sharer.php?u={{ canonical_url|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Facebook" title="Share on Facebook">
<svg class="share-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.525 13.5l.667-4.344h-4.167V6.337c0-1.189.582-2.348 2.448-2.348h1.894V.29S16.648 0 15.003 0c-3.426 0-5.665 2.077-5.665 5.838v3.318H5.53V13.5h3.808V24h4.687V13.5z"/></svg>
</a>
<a class="share-action" href="https://www.linkedin.com/sharing/share-offsite/?url={{ canonical_url|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on LinkedIn" title="Share on LinkedIn">
<svg class="share-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.124 2.062 2.062 0 0 1 0 4.124zM6.962 20.452H3.71V9h3.252z"/></svg>
</a>
<a class="share-action" href="https://www.reddit.com/submit?url={{ canonical_url|urlencode }}&amp;title={{ share_title|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Reddit" title="Share on Reddit">
<svg class="share-icon share-icon-stroke" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.3 10.2A8.9 8.9 0 0 1 12 7.6a8.9 8.9 0 0 1 6.7 2.6A2.3 2.3 0 1 1 20 14.4c-.8 2.8-4 4.8-8 4.8s-7.2-2-8-4.8a2.3 2.3 0 1 1 1.3-4.2ZM14.7 7.9l.9-4.1 3.3.8"/><circle cx="20.4" cy="4.9" r="1.6"/><circle cx="8.5" cy="13.2" r="1" class="share-icon-fill"/><circle cx="15.5" cy="13.2" r="1" class="share-icon-fill"/><path d="M8.8 16.1c1.7 1.2 4.7 1.2 6.4 0"/></svg>
</a>
<a class="share-action" href="https://bsky.app/intent/compose?text={{ bluesky_text|urlencode }}" target="_blank" rel="noopener noreferrer" aria-label="Share {{ share_title }} on Bluesky" title="Share on Bluesky">
<svg class="share-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 10.8c-1.09-2.11-4.05-6.05-6.8-8C2.57.94 1.56 1.27.9 1.57.14 1.91 0 3.08 0 3.77c0 .69.38 5.65.62 6.48.82 2.74 3.71 3.66 6.38 3.36-4.68.69-8.83 2.39-3.38 8.46 6 6.36 8.22-1.69 3.19-3.38 2.05 1.7 6.5 3.77 6.5 3.77s4.45-2.07 6.5-3.77c-1.69 5.02.53 7.69 3.38 8.22 5.45-6.07 1.3-7.77-3.38-8.46 2.67.3 5.57-.62 6.38-3.36.25-.83.62-5.79.62-6.48 0-.69-.14-1.86-.9-2.2-.66-.3-1.66-.62-4.3 1.24-2.75 1.94-5.71 5.88-6.8 8Z"/></svg>
</a>
<a class="share-action" href="{{ canonical_url }}" data-share-copy aria-label="Copy the link to {{ share_title }}" title="Copy link">
<svg class="share-icon share-icon-stroke" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m10.4 13.6 3.2-3.2M8.1 16l-1.4 1.4a4 4 0 0 1-5.7-5.7l3.4-3.4A4 4 0 0 1 10 8m5.9 0 1.4-1.4a4 4 0 0 1 5.7 5.7l-3.4 3.4A4 4 0 0 1 14 16"/></svg>
</a>
</div>
<p class="share-status" data-share-status role="status" aria-live="polite"></p>
</aside>