aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-21 16:44:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: move publication date to top-right corner

Browse Source 
- Position publication date in top-right corner of article header
- Works for both hero image and non-image layouts
- Add subtle background and border for better visibility
- On hero images: dark semi-transparent background with backdrop blur
- On regular headers: uses surface-secondary background
- Remove date from inline metadata (reading time and highlights remain)
This commit is contained in:
Gigi
2025-10-09 15:53:46 +01:00
parent 3c1114ad21
commit 4504377c36
2 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ReaderHeader.tsx
View File

@@ -27,17 +27,17 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
return (
<div className="reader-hero-image">
<img src={image} alt={title || 'Article image'} />
{formattedDate && (
<div className="publish-date-topright">
<FontAwesomeIcon icon={faCalendar} />
<span>{formattedDate}</span>
</div>
)}
{title && (
<div className="reader-header-overlay">
<h2 className="reader-title">{title}</h2>
{summary && <p className="reader-summary">{summary}</p>}
<div className="reader-meta">
{formattedDate && (
<div className="publish-date">
<FontAwesomeIcon icon={faCalendar} />
<span>{formattedDate}</span>
</div>
)}
{readingTimeText && (
<div className="reading-time">
<FontAwesomeIcon icon={faClock} />
@@ -61,15 +61,15 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
<>
{title && (
<div className="reader-header">
<h2 className="reader-title">{title}</h2>
{summary && <p className="reader-summary">{summary}</p>}
<div className="reader-meta">
{formattedDate && (
<div className="publish-date">
<div className="publish-date-topright">
<FontAwesomeIcon icon={faCalendar} />
<span>{formattedDate}</span>
</div>
)}
<h2 className="reader-title">{title}</h2>
{summary && <p className="reader-summary">{summary}</p>}
<div className="reader-meta">
{readingTimeText && (
<div className="reading-time">
<FontAwesomeIcon icon={faClock} />

29
src/index.css
View File

@@ -502,6 +502,7 @@ body {
.reader-header {
margin-bottom: 2rem;
position: relative;
}
.reader-title {
@@ -538,6 +539,27 @@ body {
opacity: 0.6;
}
.publish-date-topright {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.813rem;
color: rgba(136, 136, 136, 0.8);
padding: 0.4rem 0.75rem;
background: var(--surface-secondary);
border-radius: 6px;
border: 1px solid var(--border-color);
z-index: 10;
}
.publish-date-topright svg {
font-size: 0.75rem;
opacity: 0.7;
}
.reading-time {
display: flex;
align-items: center;
@@ -1140,6 +1162,13 @@ body {
opacity: 0.7;
}
.reader-hero-image .publish-date-topright {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.85);
}
.reader-header-overlay .reading-time,
.reader-header-overlay .highlight-indicator {
background: rgba(255, 255, 255, 0.15);