Skip to content

Commit f5a4078

Browse files
alexmerlinalexmerlin
authored
Merge pull request #22 from dotkernel/stefan-dev
New design/layout for page_title block for all twig files
2 parents d070f2a + 4aa2fa3 commit f5a4078

175 files changed

Lines changed: 1268 additions & 2905 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎public/css/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App/assets/scss/components/_blog.scss‎

Lines changed: 88 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -89,175 +89,6 @@ $bp-tablet: 900px;
8989
}
9090
}
9191

92-
// ---------- Sidebar & widgets ----------
93-
.sidebar {
94-
display: flex;
95-
flex-direction: column;
96-
gap: 34px;
97-
98-
@media (max-width: $bp-tablet) {
99-
order: 2;
100-
}
101-
}
102-
103-
.widget {
104-
border-bottom: 1px solid var(--border-soft);
105-
padding-bottom: 28px;
106-
107-
&:last-child {
108-
border-bottom: none;
109-
padding-bottom: 0;
110-
}
111-
112-
ul {
113-
list-style: none;
114-
margin: 0;
115-
padding: 0;
116-
}
117-
}
118-
119-
.widget-title {
120-
font-family: var(--mono);
121-
font-size: 11.5px;
122-
letter-spacing: 0.1em;
123-
text-transform: uppercase;
124-
color: var(--text-dim);
125-
margin-bottom: 16px;
126-
}
127-
128-
.search-form {
129-
display: flex;
130-
border: 1px solid var(--border);
131-
border-radius: 8px;
132-
overflow: hidden;
133-
134-
input {
135-
flex: 1;
136-
min-width: 0;
137-
background: none;
138-
border: none;
139-
padding: 10px 12px;
140-
color: var(--text);
141-
font-family: var(--sans);
142-
font-size: 14px;
143-
144-
&:focus {
145-
outline: none;
146-
}
147-
}
148-
149-
button {
150-
background: var(--surface-2);
151-
border: none;
152-
padding: 0 14px;
153-
color: var(--text-muted);
154-
cursor: pointer;
155-
font-family: var(--mono);
156-
font-size: 12px;
157-
158-
&:hover {
159-
color: var(--amber);
160-
}
161-
}
162-
}
163-
164-
.widget-recent {
165-
ul {
166-
display: flex;
167-
flex-direction: column;
168-
gap: 14px;
169-
}
170-
171-
li {
172-
a {
173-
font-size: 14px;
174-
color: var(--text);
175-
display: block;
176-
line-height: 1.4;
177-
178-
&:hover {
179-
color: var(--amber);
180-
}
181-
}
182-
183-
.post-date {
184-
display: block;
185-
font-family: var(--mono);
186-
font-size: 11px;
187-
color: var(--text-dim);
188-
margin-top: 4px;
189-
}
190-
}
191-
}
192-
193-
.widget-categories {
194-
li {
195-
border-bottom: 1px solid var(--border-soft);
196-
197-
&:last-child {
198-
border-bottom: none;
199-
}
200-
201-
a {
202-
display: block;
203-
padding: 9px 0;
204-
font-size: 14px;
205-
color: var(--text-muted);
206-
207-
&:hover {
208-
color: var(--text);
209-
}
210-
}
211-
212-
&.current a {
213-
color: var(--amber);
214-
font-weight: 600;
215-
}
216-
}
217-
}
218-
219-
.widget-connect {
220-
ul {
221-
display: flex;
222-
flex-direction: column;
223-
gap: 12px;
224-
}
225-
226-
li {
227-
a {
228-
display: flex;
229-
align-items: center;
230-
gap: 10px;
231-
font-size: 14px;
232-
color: var(--text-muted);
233-
234-
&:hover {
235-
color: var(--text);
236-
}
237-
}
238-
239-
svg {
240-
width: 17px;
241-
height: 17px;
242-
flex-shrink: 0;
243-
color: var(--teal);
244-
}
245-
}
246-
}
247-
248-
.widget-approach {
249-
p {
250-
font-size: 13.5px;
251-
line-height: 1.7;
252-
margin-bottom: 12px;
253-
color: var(--text-muted);
254-
255-
&:last-child {
256-
margin-bottom: 0;
257-
}
258-
}
259-
}
260-
26192
// ---------- Article entry ----------
26293
.entry {
26394
max-width: 720px;
@@ -549,4 +380,92 @@ $bp-tablet: 900px;
549380
resize: vertical;
550381
min-height: 120px;
551382
}
383+
}
384+
385+
// ---------- Post hero v2 (experimental redesign, single page for now) ----------
386+
.post-hero-v2 {
387+
padding: 20px 0 16px;
388+
position: relative;
389+
390+
&::after {
391+
content: "";
392+
position: absolute;
393+
left: 0;
394+
right: 0;
395+
bottom: 0;
396+
height: 2px;
397+
border-radius: 2px;
398+
background: linear-gradient(90deg, var(--amber), var(--teal), transparent 85%);
399+
}
400+
401+
h1 {
402+
font-size: 38px;
403+
line-height: 1.2;
404+
margin: 12px 0 0;
405+
max-width: none;
406+
407+
@media (max-width: $bp-tablet) {
408+
font-size: 28px;
409+
}
410+
}
411+
}
412+
413+
.hero-top-row {
414+
display: flex;
415+
flex-wrap: wrap;
416+
align-items: center;
417+
justify-content: space-between;
418+
gap: 10px 18px;
419+
}
420+
421+
.hero-badge {
422+
display: inline-flex;
423+
align-items: center;
424+
gap: 8px;
425+
padding: 6px 14px 6px 10px;
426+
border-radius: 999px;
427+
background: var(--teal-dim);
428+
border: 1px solid var(--teal);
429+
color: var(--teal);
430+
font-family: var(--mono);
431+
font-size: 12px;
432+
letter-spacing: 0.08em;
433+
text-transform: uppercase;
434+
435+
svg {
436+
width: 14px;
437+
height: 14px;
438+
flex-shrink: 0;
439+
}
440+
}
441+
442+
.post-meta-v2 {
443+
display: flex;
444+
flex-wrap: wrap;
445+
gap: 8px 22px;
446+
align-items: center;
447+
font-family: var(--mono);
448+
font-size: 13px;
449+
color: var(--text-dim);
450+
451+
a {
452+
color: var(--text-muted);
453+
454+
&:hover {
455+
color: var(--amber);
456+
}
457+
}
458+
}
459+
460+
.meta-item {
461+
display: inline-flex;
462+
align-items: center;
463+
gap: 6px;
464+
465+
svg {
466+
width: 14px;
467+
height: 14px;
468+
color: var(--text-dim);
469+
flex-shrink: 0;
470+
}
552471
}

‎src/App/assets/scss/components/_custom.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ img {
7878
.wrap {
7979
max-width: var(--maxw);
8080
margin: 0 auto;
81-
padding: 0 28px;
81+
padding: 0;
8282
}
8383

8484
.eyebrow {

‎src/App/assets/scss/components/_left_menu.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,39 @@
9999
}
100100

101101
.widget-categories {
102+
li {
103+
border-bottom: 1px solid var(--border-soft);
104+
105+
&:last-child {
106+
border-bottom: none;
107+
}
108+
109+
&.current a {
110+
color: var(--amber);
111+
font-weight: 600;
112+
}
113+
}
114+
102115
li a {
103116
display: flex;
104117
justify-content: space-between;
105118
align-items: center;
106119
gap: 10px;
120+
padding: 9px 0;
121+
font-size: 14px;
122+
color: var(--text-muted);
123+
124+
&:hover {
125+
color: var(--text);
126+
}
107127
}
108128

109129
.cat-count {
130+
display: inline-block;
131+
min-width: 28px;
110132
font-family: var(--mono);
111133
font-size: 11px;
134+
text-align: center;
112135
color: var(--text-dim);
113136
background: var(--surface-2);
114137
border: 1px solid var(--border-soft);

‎src/App/templates/layout/default.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
<li class="nav-item"><a class="nav-link" href="https://docs.dotkernel.org/" target="_blank" rel="noopener">Documentation</a></li>
5959
<li class="nav-item"><a class="nav-link" href="{{ url('page::dotkernel-packages-oss-lifecycle') }}">Packages Lifecycle</a></li>
6060
<li class="nav-item"><a class="nav-link" href="{{ url('page::category-resource', {slug: 'how-to'}) }}">How to's</a></li>
61+
<li class="nav-item"><a class="nav-link" href="https://github.com/orgs/dotkernel/discussions" target="_blank" rel="noopener">Discussion</a></li>
6162
<li class="nav-item"><a class="nav-link" href="{{ url('page::blog') }}">Blog</a></li>
6263
<li class="nav-item"><a class="nav-link" href="{{ url('page::categories') }}">Categories</a></li>
6364
<li class="nav-item"><a class="nav-link nav-cta mx-2 " href="{{ url('page::contact') }}">Contact us</a></li>

‎src/App/templates/partial/title-section.html.twig‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{% set page_title = article.title|default(title|default('')) %}
2+
{% set author_github = article.author.github|default(author_github|default(false)) %}
3+
<div class="wrap">
4+
<div class="post-hero-v2">
5+
{% if back_href is defined %}
6+
<div class="hero-top-row">
7+
<a href="{{ back_href }}" class="breadcrumb-back">
8+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
9+
{{ back_label }}
10+
</a>
11+
<div class="hero-badge">
12+
<span>{{ badge }}</span>
13+
</div>
14+
</div>
15+
{% else %}
16+
<div class="hero-badge">
17+
<span>{{ badge }}</span>
18+
</div>
19+
{% endif %}
20+
21+
<h1>{{ page_title }}</h1>
22+
23+
{% if article.author is defined and article.author %}
24+
<div class="post-meta-v2 mt-3">
25+
<span class="meta-item">
26+
<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>
27+
By <a href="{{ path('page::author-resource', {slug: article.author.slug}) }}">{{ article.author.name }}</a>
28+
</span>
29+
{% if article.postDate is defined %}
30+
<span class="meta-item">
31+
<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>
32+
{{ article.postDate|date('M d, Y') }}
33+
</span>
34+
{% endif %}
35+
</div>
36+
{% endif %}
37+
{% if also_on is defined %}
38+
<div class="post-meta-v2 mt-3">
39+
<span class="meta-item">
40+
Also on
41+
</span>
42+
{% if author_github %}
43+
<span class="meta-item">
44+
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
45+
<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"/>
46+
</svg>
47+
<a href="https://github.com/{{ author_github }}" target="_blank" rel="noopener noreferrer">{{ author_github }}</a>
48+
</span>
49+
{% endif %}
50+
</div>
51+
{% endif %}
52+
</div>
53+
</div>

0 commit comments

Comments
 (0)