Skip to content

New design/layout for page_title block for all twig files #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexmerlin merged 6 commits into from
Jul 27, 2026
Merged

New design/layout for page_title block for all twig files #22

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b10f243
New design/layout for page_title block for all twig files
OStefan2001 Jul 23, 2026
13b8b4f
Reusable partial and used in twigs
OStefan2001 Jul 24, 2026
f4034a2
passing the entire article
OStefan2001 Jul 27, 2026
aa3dff3
passing the entire article
OStefan2001 Jul 27, 2026
6ad8440
passing the entire article
OStefan2001 Jul 27, 2026
4aa2fa3
title-section partial modified
OStefan2001 Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

257 changes: 88 additions & 169 deletions src/App/assets/scss/components/_blog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,175 +89,6 @@ $bp-tablet: 900px;
}
}

// ---------- Sidebar & widgets ----------
.sidebar {
display: flex;
flex-direction: column;
gap: 34px;

@media (max-width: $bp-tablet) {
order: 2;
}
}

.widget {
border-bottom: 1px solid var(--border-soft);
padding-bottom: 28px;

&:last-child {
border-bottom: none;
padding-bottom: 0;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}
}

.widget-title {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 16px;
}

.search-form {
display: flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;

input {
flex: 1;
min-width: 0;
background: none;
border: none;
padding: 10px 12px;
color: var(--text);
font-family: var(--sans);
font-size: 14px;

&:focus {
outline: none;
}
}

button {
background: var(--surface-2);
border: none;
padding: 0 14px;
color: var(--text-muted);
cursor: pointer;
font-family: var(--mono);
font-size: 12px;

&:hover {
color: var(--amber);
}
}
}

.widget-recent {
ul {
display: flex;
flex-direction: column;
gap: 14px;
}

li {
a {
font-size: 14px;
color: var(--text);
display: block;
line-height: 1.4;

&:hover {
color: var(--amber);
}
}

.post-date {
display: block;
font-family: var(--mono);
font-size: 11px;
color: var(--text-dim);
margin-top: 4px;
}
}
}

.widget-categories {
li {
border-bottom: 1px solid var(--border-soft);

&:last-child {
border-bottom: none;
}

a {
display: block;
padding: 9px 0;
font-size: 14px;
color: var(--text-muted);

&:hover {
color: var(--text);
}
}

&.current a {
color: var(--amber);
font-weight: 600;
}
}
}

.widget-connect {
ul {
display: flex;
flex-direction: column;
gap: 12px;
}

li {
a {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-muted);

&:hover {
color: var(--text);
}
}

svg {
width: 17px;
height: 17px;
flex-shrink: 0;
color: var(--teal);
}
}
}

.widget-approach {
p {
font-size: 13.5px;
line-height: 1.7;
margin-bottom: 12px;
color: var(--text-muted);

&:last-child {
margin-bottom: 0;
}
}
}

// ---------- Article entry ----------
.entry {
max-width: 720px;
Expand Down Expand Up @@ -549,4 +380,92 @@ $bp-tablet: 900px;
resize: vertical;
min-height: 120px;
}
}

// ---------- Post hero v2 (experimental redesign, single page for now) ----------
.post-hero-v2 {
padding: 20px 0 16px;
position: relative;

&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--amber), var(--teal), transparent 85%);
}

h1 {
font-size: 38px;
line-height: 1.2;
margin: 12px 0 0;
max-width: none;

@media (max-width: $bp-tablet) {
font-size: 28px;
}
}
}

.hero-top-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 18px;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 10px;
border-radius: 999px;
background: var(--teal-dim);
border: 1px solid var(--teal);
color: var(--teal);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;

svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
}

.post-meta-v2 {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
align-items: center;
font-family: var(--mono);
font-size: 13px;
color: var(--text-dim);

a {
color: var(--text-muted);

&:hover {
color: var(--amber);
}
}
}

.meta-item {
display: inline-flex;
align-items: center;
gap: 6px;

svg {
width: 14px;
height: 14px;
color: var(--text-dim);
flex-shrink: 0;
}
}
2 changes: 1 addition & 1 deletion src/App/assets/scss/components/_custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ img {
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 28px;
padding: 0;
}

.eyebrow {
Expand Down
23 changes: 23 additions & 0 deletions src/App/assets/scss/components/_left_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,16 +99,39 @@
}

.widget-categories {
li {
border-bottom: 1px solid var(--border-soft);

&:last-child {
border-bottom: none;
}

&.current a {
color: var(--amber);
font-weight: 600;
}
}

li a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 9px 0;
font-size: 14px;
color: var(--text-muted);

&:hover {
color: var(--text);
}
}

.cat-count {
display: inline-block;
min-width: 28px;
font-family: var(--mono);
font-size: 11px;
text-align: center;
color: var(--text-dim);
background: var(--surface-2);
border: 1px solid var(--border-soft);
Expand Down
33 changes: 17 additions & 16 deletions src/Blog/templates/page/author-resource.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,28 @@

{% block page_title %}
<div class="wrap">
<div class="post-hero">
<a href="{{ url('page::blog') }}" class="breadcrumb-back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
Back to Blog
</a>
<div><span class="eyebrow">Author</span></div>
<div class="post-hero-v2">
<div class="hero-top-row">
<a href="{{ url('page::blog') }}" class="breadcrumb-back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
Back to Blog
</a>
<div class="hero-badge">
<span>Author</span>
</div>
</div>
<h1>Articles by {{ author.name }}</h1>
<div class="post-meta author-meta">
<span class="author-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="8" r="4"/>
<path d="M4 20c0-3.3 3.6-5 8-5s8 1.7 8 5"/>
</svg>
<div class="post-meta-v2 mt-3">
<span class="meta-item">
Also on
</span>
{% if author.github %}
<a href="https://github.com/{{ author.github }}" target="_blank" rel="noopener noreferrer" class="author-github d-inline-flex align-items-center gap-2 text-decoration-none">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true" class="flex-shrink-0">
<span class="meta-item">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
<path d="M12 .5C5.73.5.5 5.73.5 12c0 5.09 3.29 9.4 7.86 10.93.57.1.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.88-1.36-3.88-1.36-.52-1.34-1.28-1.7-1.28-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.27 5.69.42.36.78 1.07.78 2.16 0 1.56-.01 2.82-.01 3.2 0 .31.21.66.8.55A11.5 11.5 0 0 0 23.5 12c0-6.27-5.23-11.5-11.5-11.5z"/>
</svg>
<span class="fs-6">{{ author.github }}</span>
</a>
<a href="https://github.com/{{ author.github }}" target="_blank" rel="noopener noreferrer">{{ author.github }}</a>
</span>
{% endif %}
</div>
</div>
Expand Down
28 changes: 18 additions & 10 deletions src/Blog/templates/page/blog-resource/android/listen-for-android-install-referrer.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,25 @@

{% block page_title %}
<div class="wrap">
<div class="post-hero">
<a href="{{ url('page::blog') }}" class="breadcrumb-back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
Back to Blog
</a>
<div><span class="eyebrow">Android</span></div>
<div class="post-hero-v2">
<div class="hero-top-row">
<a href="{{ url('page::blog') }}" class="breadcrumb-back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
Back to Blog
</a>
<div class="hero-badge">
<span>Android</span>
</div>
</div>
<h1>{{ article.title }}</h1>
<div class="post-meta">
<span class="text-muted small">
By <a href="{{ path('page::author-resource', {slug: article.author.slug}) }}" class="fw-bold link-dark text-decoration-none">{{ article.author.name }}</a>
&nbsp;.&nbsp; {{ article.postDate|date('M d, Y') }}
<div class="post-meta-v2 mt-3">
<span class="meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/></svg>
By <a href="{{ path('page::author-resource', {slug: article.author.slug}) }}">{{ article.author.name }}</a>
</span>
<span class="meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
{{ article.postDate|date('M d, Y') }}
</span>
</div>
</div>
Expand Down
Loading