Styles for hearts, composer footer, card author/likes, news scroll
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+276
-80
@@ -109,6 +109,34 @@ a.sow-card:hover {
|
|||||||
border-color: var(--wg-gold-soft);
|
border-color: var(--wg-gold-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Whole card acts as the article link: the title link stretches over the
|
||||||
|
// card, chips stay clickable above it.
|
||||||
|
.sow-card-link {
|
||||||
|
position: relative;
|
||||||
|
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
|
||||||
|
|
||||||
|
h3 a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-chip {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-within {
|
||||||
|
border-color: var(--wg-gold-soft);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
box-shadow: 0 0 0 2px var(--wg-gold-soft), var(--wg-velvet-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sow-card-body {
|
.sow-card-body {
|
||||||
padding: var(--wg-space-md);
|
padding: var(--wg-space-md);
|
||||||
|
|
||||||
@@ -125,7 +153,8 @@ a.sow-card:hover {
|
|||||||
|
|
||||||
.sow-meta {
|
.sow-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--wg-space-2xs);
|
align-items: center;
|
||||||
|
gap: var(--wg-space-xs);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
@@ -188,14 +217,7 @@ a.sow-card:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// News: newspaper front page — double rule, featured story, ruled rows
|
// News: newspaper front page — featured story card, article-row cards
|
||||||
.sow-double-rule {
|
|
||||||
height: 7px;
|
|
||||||
border-top: 3px solid var(--wg-gold);
|
|
||||||
border-bottom: 1px solid var(--wg-gold);
|
|
||||||
margin-bottom: var(--wg-space-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sow-list-date {
|
.sow-list-date {
|
||||||
font-family: var(--wg-font-code);
|
font-family: var(--wg-font-code);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
@@ -204,61 +226,62 @@ a.sow-card:hover {
|
|||||||
color: var(--wg-text-muted);
|
color: var(--wg-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-title {
|
.sow-featured {
|
||||||
text-align: center;
|
> .sow-banner {
|
||||||
margin: 0 0 var(--wg-space-md);
|
height: 320px;
|
||||||
|
|
||||||
a {
|
|
||||||
font-family: var(--wg-font-display);
|
|
||||||
font-size: clamp(2rem, 4.5vw, 3rem);
|
|
||||||
line-height: 1.15;
|
|
||||||
color: inherit;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-body {
|
.sow-featured-body {
|
||||||
display: grid;
|
padding: var(--wg-space-md) var(--wg-space-lg) var(--wg-space-lg);
|
||||||
grid-template-areas:
|
}
|
||||||
'meta media'
|
|
||||||
'excerpt media';
|
|
||||||
grid-template-columns: 3fr 2fr;
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
gap: 10px var(--wg-space-lg);
|
|
||||||
|
|
||||||
.sow-banner {
|
// .sow-page h2 sets --wg-text; needs the extra class to win back gold.
|
||||||
height: 100%;
|
.sow-page .sow-featured-title {
|
||||||
min-height: 260px;
|
text-align: center;
|
||||||
border-radius: 8px;
|
margin: 0 0 var(--wg-space-sm);
|
||||||
border: 1px solid var(--wg-border);
|
color: var(--wg-gold);
|
||||||
|
font-family: var(--wg-font-display);
|
||||||
|
font-size: clamp(2rem, 4.5vw, 3rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-meta {
|
.sow-featured-meta {
|
||||||
grid-area: meta;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full lead story inside the featured card: keep the article-body type
|
||||||
|
// styles but drop its ledger-panel chrome (the card already frames it).
|
||||||
|
.sow-featured-story.sow-article-body {
|
||||||
|
max-width: 72ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-excerpt {
|
.sow-featured-excerpt {
|
||||||
grid-area: excerpt;
|
max-width: 62ch;
|
||||||
|
margin: 0 auto;
|
||||||
font-size: 1.0625rem;
|
font-size: 1.0625rem;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-media {
|
// Shared by news (history below the featured story) and the dev blog list:
|
||||||
grid-area: media;
|
// plain ruled rows, built to flick through.
|
||||||
display: block;
|
.sow-article-rows {
|
||||||
}
|
|
||||||
|
|
||||||
.sow-news-rows {
|
|
||||||
margin-top: var(--wg-space-lg);
|
margin-top: var(--wg-space-lg);
|
||||||
border-top: 1px solid var(--wg-border);
|
border-top: 1px solid var(--wg-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-news-row {
|
.sow-article-row {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 120px;
|
|
||||||
gap: var(--wg-space-md);
|
|
||||||
align-items: start;
|
|
||||||
padding: var(--wg-space-md) 0;
|
padding: var(--wg-space-md) 0;
|
||||||
border-bottom: 1px solid var(--wg-border);
|
border-bottom: 1px solid var(--wg-border);
|
||||||
|
|
||||||
@@ -268,17 +291,12 @@ a.sow-card:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
max-width: 72ch;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-news-row-thumb .sow-banner {
|
|
||||||
height: 90px;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid var(--wg-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sow-devblog-invite {
|
.sow-devblog-invite {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: var(--wg-space-lg);
|
margin-top: var(--wg-space-lg);
|
||||||
@@ -562,17 +580,8 @@ a.sow-card:hover {
|
|||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-featured-body {
|
.sow-featured > .sow-banner {
|
||||||
grid-template-areas:
|
height: 200px;
|
||||||
'meta'
|
|
||||||
'media'
|
|
||||||
'excerpt';
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
|
|
||||||
.sow-banner {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -581,13 +590,6 @@ a.sow-card:hover {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-news-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sow-news-row-thumb {
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Banners: first post image, or the shared velvet gradient
|
// Banners: first post image, or the shared velvet gradient
|
||||||
@@ -736,23 +738,221 @@ a.sow-card:hover {
|
|||||||
color: var(--wg-text-muted);
|
color: var(--wg-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-article-neighbors .sow-article-arrow {
|
.sow-article-neighbors strong {
|
||||||
font-size: 1.5rem;
|
font-size: 0.875rem;
|
||||||
line-height: 1;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-related {
|
.sow-related {
|
||||||
margin-top: var(--wg-space-xl);
|
margin-top: var(--wg-space-xl);
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
margin-bottom: var(--wg-space-xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-related-grid {
|
.sow-related-list a {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
align-items: baseline;
|
||||||
gap: var(--wg-space-sm);
|
gap: var(--wg-space-sm);
|
||||||
|
padding: var(--wg-space-sm) 0;
|
||||||
|
border-top: 1px solid var(--wg-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-related-grid .sow-banner {
|
.sow-related-list .sow-list-date {
|
||||||
height: 90px;
|
flex-shrink: 0;
|
||||||
|
font-family: var(--wg-font-code);
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-related-title {
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-related-list a:hover .sow-related-title {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comments {
|
||||||
|
margin-top: var(--wg-space-xl);
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
margin-bottom: var(--wg-space-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment {
|
||||||
|
padding: var(--wg-space-md) 0;
|
||||||
|
border-top: 1px solid var(--wg-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--wg-space-xs);
|
||||||
|
margin-bottom: var(--wg-space-xs);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-body {
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
line-height: 1.7;
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-heart {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.voted {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-article-like {
|
||||||
|
margin-top: var(--wg-space-sm);
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.sow-heart {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-meta .sow-heart {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-card-author {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
// Keep the avatar from stretching the meta row and pushing the
|
||||||
|
// date/tags line down.
|
||||||
|
margin: -5px 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-news-entry {
|
||||||
|
margin-bottom: var(--wg-space-lg);
|
||||||
|
|
||||||
|
.sow-featured-story.sow-article-body {
|
||||||
|
max-width: 90%;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-card-likes {
|
||||||
|
margin-top: var(--wg-space-xs);
|
||||||
|
text-align: right;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
|
||||||
|
.fa-heart {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-form {
|
||||||
|
margin-top: var(--wg-space-md);
|
||||||
|
padding-top: var(--wg-space-md);
|
||||||
|
border-top: 1px solid var(--wg-border);
|
||||||
|
|
||||||
|
.sow-comment-form-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--wg-space-sm);
|
||||||
|
margin-top: var(--wg-space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-form-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-comment-form-name {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--wg-space-sm);
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
font: inherit;
|
||||||
|
background: var(--wg-ledger-panel);
|
||||||
|
border: 1px solid var(--wg-ledger-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
resize: vertical;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--wg-gold-soft);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-article-back {
|
||||||
|
margin-top: var(--wg-space-xl);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-pagination a {
|
.sow-pagination a {
|
||||||
@@ -770,10 +970,6 @@ a.sow-card:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
.sow-related-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sow-article-neighbors {
|
.sow-article-neighbors {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user