This commit is contained in:
+142
-29
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user