Refactor sidebar profile to author card with enhanced styling and social links

This commit is contained in:
interlope committed 2026-06-01 21:26:45 +02:00
1 parent 7f2ed60a89
commit 824cd6ffa0
3 files changed
+74 -22

No files matched your search

+51 -14
View File
@@ -977,38 +977,75 @@ img.nav-svg-icon {
font-size: 0.9rem; font-size: 0.9rem;
} }
/* Compact profile card inside the sidebar (article view) */ /* Author card inside the sidebar (article view) */
.sidebar-profile { .sidebar-author {
padding-bottom: 1.2rem; padding-bottom: 1.2rem;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
} }
.sidebar-profile-avatar { .sidebar-author-label {
width: 84px; display: block;
height: 84px; font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 0.6rem;
}
.sidebar-author-identity {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.sidebar-author-avatar {
width: 52px;
height: 52px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
border: 3px solid var(--bg-surface); flex-shrink: 0;
box-shadow: var(--shadow-sm); border: 2px solid var(--border-color);
margin-bottom: var(--space-sm);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.sidebar-profile-avatar:hover { .sidebar-author-avatar:hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
.sidebar-profile-name { .sidebar-author-name {
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 0.95rem;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.3;
} }
.sidebar-profile-bio { .sidebar-author-bio {
color: var(--text-secondary); color: var(--text-secondary);
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
margin: 0.35rem 0 0; margin: 0.2rem 0 0;
line-height: 1.4;
}
.sidebar-author-social {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.sidebar-social-icon {
width: 1.1rem;
height: 1.1rem;
opacity: 0.55;
transition: opacity 0.2s ease, transform 0.2s ease;
filter: var(--social-icon-filter);
}
.sidebar-author-social a:hover .sidebar-social-icon {
opacity: 1;
transform: translateY(-2px);
} }
.plugin { .plugin {
+1 -1
View File
@@ -5,7 +5,7 @@
<!-- Set the colour theme as early as possible to avoid a white flash. <!-- Set the colour theme as early as possible to avoid a white flash.
Sets data-theme AND paints the html background/color-scheme inline, so the Sets data-theme AND paints the html background/color-scheme inline, so the
very first frame (before style.css loads) already uses the theme colour. --> very first frame (before style.css loads) already uses the theme colour. -->
<script> <script data-cfasync="false">
window.BLOWDIT_THEME_BG = { window.BLOWDIT_THEME_BG = {
light: '#ffffff', light: '#ffffff',
dark: '#171717', dark: '#171717',
+22 -7
View File
@@ -6,13 +6,28 @@
$isArticle = ($WHERE_AM_I === 'page' && isset($page) && !$page->isStatic() && !$url->notFound()); $isArticle = ($WHERE_AM_I === 'page' && isset($page) && !$page->isStatic() && !$url->notFound());
?> ?>
<?php if ($isArticle) : ?> <?php if ($isArticle) : ?>
<div class="sidebar-profile text-center"> <div class="sidebar-author">
<a href="<?php echo Theme::siteUrl() ?>"> <span class="sidebar-author-label">Author</span>
<img class="sidebar-profile-avatar" src="<?php echo DOMAIN_THEME . 'img/spleenftw.jpeg' ?>" alt="<?php echo htmlspecialchars($site->title(), ENT_QUOTES, 'UTF-8') ?>" /> <div class="sidebar-author-identity">
</a> <a href="<?php echo Theme::siteUrl() ?>">
<div class="sidebar-profile-name"><?php echo htmlspecialchars($site->title(), ENT_QUOTES, 'UTF-8') ?></div> <img class="sidebar-author-avatar" src="<?php echo DOMAIN_THEME . 'img/spleenftw.jpeg' ?>" alt="<?php echo htmlspecialchars($page->username(), ENT_QUOTES, 'UTF-8') ?>" />
<?php if ($site->slogan()) : ?> </a>
<p class="sidebar-profile-bio"><?php echo htmlspecialchars($site->slogan(), ENT_QUOTES, 'UTF-8') ?></p> <div>
<div class="sidebar-author-name"><?php echo htmlspecialchars($page->username(), ENT_QUOTES, 'UTF-8') ?></div>
<?php if ($site->slogan()) : ?>
<p class="sidebar-author-bio"><?php echo htmlspecialchars($site->slogan(), ENT_QUOTES, 'UTF-8') ?></p>
<?php endif ?>
</div>
</div>
<?php $networks = Theme::socialNetworks(); ?>
<?php if (!empty($networks)) : ?>
<div class="sidebar-author-social">
<?php foreach ($networks as $key => $label) : ?>
<a href="<?php echo $site->{$key}(); ?>" target="_blank" rel="noopener" title="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>">
<img class="sidebar-social-icon" src="<?php echo DOMAIN_THEME . 'img/' . $key . '.svg' ?>" alt="<?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?>" />
</a>
<?php endforeach ?>
</div>
<?php endif ?> <?php endif ?>
</div> </div>
<?php endif ?> <?php endif ?>