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

Open
OStefan2001 wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 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
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
1 change: 1 addition & 0 deletions src/App/templates/layout/default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
<li class="nav-item"><a class="nav-link" href="https://docs.dotkernel.org/" target="_blank" rel="noopener">Documentation</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('page::dotkernel-packages-oss-lifecycle') }}">Packages Lifecycle</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('page::category-resource', {slug: 'how-to'}) }}">How to's</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/orgs/dotkernel/discussions" target="_blank" rel="noopener">Discussion</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('page::blog') }}">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('page::categories') }}">Categories</a></li>
<li class="nav-item"><a class="nav-link nav-cta mx-2 " href="{{ url('page::contact') }}">Contact us</a></li>
Expand Down
51 changes: 51 additions & 0 deletions src/App/templates/partial/title-section.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<div class="wrap">
<div class="post-hero-v2">
{% if back_href is defined %}
<div class="hero-top-row">
<a href="{{ back_href }}" 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_label }}
</a>
<div class="hero-badge">
<span>{{ badge }}</span>
</div>
</div>
{% else %}
<div class="hero-badge">
<span>{{ badge }}</span>
</div>
{% endif %}

<h1>{{ title }}</h1>

{% if author_name is defined %}
<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: author_slug}) }}">{{ author_name }}</a>
</span>
{% if post_date is defined %}
<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>
{{ post_date|date('M d, Y') }}
</span>
{% endif %}
</div>
{% endif %}
{% if also_on is defined %}
<div class="post-meta-v2 mt-3">
<span class="meta-item">
Also on
</span>
{% if author_github is defined and author_github %}
<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>
<a href="https://github.com/{{ author_github }}" target="_blank" rel="noopener noreferrer">{{ author_github }}</a>
</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
Loading