Skip to content

Commit 1b77b08

Browse files
pusewiczpusewicz
committed
Refactor reusable components
1 parent 9ca34f8 commit 1b77b08

9 files changed

Lines changed: 271 additions & 410 deletions

File tree

‎_layouts/post.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@
66
<body>
77
{% include redesign_nav.html %}
88
<main>
9-
<header class="article-header">
10-
<div class="article-header__inner">
9+
<header class="page-header page-header--article">
10+
<div class="page-header__inner">
1111
{% assign first_cat = page.categories | first %}
1212
{% if first_cat.size > 1 %}
1313
{% assign display_cat = first_cat | capitalize %}
1414
{% elsif page.categories %}
1515
{% assign display_cat = page.categories | capitalize %}
1616
{% endif %}
1717
{% if display_cat or page.date %}
18-
<div class="article-header__meta">
19-
{% if display_cat %}<span class="article-header__category">{{ display_cat }}</span>{% endif %}
20-
{% if display_cat and page.date %}<span class="article-header__meta-sep" aria-hidden="true">—</span>{% endif %}
21-
{% if page.date %}<time class="article-header__date" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%d %b %Y" }}</time>{% endif %}
18+
<div class="page-header__meta">
19+
{% if display_cat %}<span class="page-header__meta-category">{{ display_cat }}</span>{% endif %}
20+
{% if display_cat and page.date %}<span class="page-header__meta-sep" aria-hidden="true">—</span>{% endif %}
21+
{% if page.date %}<time class="page-header__meta-date" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%d %b %Y" }}</time>{% endif %}
2222
</div>
2323
{% endif %}
24-
<h1 class="article-header__title">{{ page.title }}</h1>
24+
<h1 class="page-header__heading">{{ page.title }}</h1>
2525
</div>
2626
</header>
2727

‎_sass/_page-header.scss‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
/* ============================================================
2+
.page-header — Unified BEM Component
3+
Variants: --hero, --plain, --article, --split
4+
============================================================ */
5+
6+
/* ------------------------------------------------------------
7+
Base
8+
------------------------------------------------------------ */
9+
.page-header {
10+
background: var(--color-bg-warm);
11+
border-bottom: 1px solid var(--color-border);
12+
padding: 80px var(--container-padding) 56px;
13+
14+
/* --plain: no background, no border (downloads) */
15+
&--plain {
16+
background: transparent;
17+
border-bottom: none;
18+
}
19+
20+
/* --hero: larger padding, tighter heading line-height */
21+
&--hero {
22+
padding-top: 88px;
23+
padding-bottom: 100px;
24+
}
25+
26+
/* --article: tighter top padding, used in post layout */
27+
&--article {
28+
padding-top: 64px;
29+
padding-bottom: 56px;
30+
}
31+
32+
/* --split: flex split with aside on right */
33+
&--split &__inner {
34+
display: flex;
35+
align-items: flex-end;
36+
justify-content: space-between;
37+
gap: 40px;
38+
}
39+
}
40+
41+
/* ------------------------------------------------------------
42+
Inner Container
43+
------------------------------------------------------------ */
44+
.page-header__inner {
45+
max-width: var(--container-max-width);
46+
margin: 0 auto;
47+
}
48+
49+
/* Left column in split layouts (implicit — no special style needed) */
50+
.page-header__content {
51+
min-width: 0;
52+
}
53+
54+
/* Right column in split layouts */
55+
.page-header__aside {
56+
flex-shrink: 0;
57+
padding-bottom: 4px;
58+
}
59+
60+
/* ------------------------------------------------------------
61+
Eyebrow
62+
------------------------------------------------------------ */
63+
.page-header__eyebrow {
64+
display: flex;
65+
align-items: center;
66+
gap: 8px;
67+
font-family: var(--font-heading);
68+
font-size: 12px;
69+
font-weight: 500;
70+
letter-spacing: 0.08em;
71+
text-transform: uppercase;
72+
color: var(--color-red);
73+
margin-bottom: 20px;
74+
}
75+
76+
.page-header__eyebrow-dot {
77+
width: 8px;
78+
height: 8px;
79+
border-radius: 50%;
80+
background: var(--color-red);
81+
flex-shrink: 0;
82+
}
83+
84+
/* ------------------------------------------------------------
85+
Heading
86+
------------------------------------------------------------ */
87+
.page-header__heading {
88+
font-family: var(--font-heading);
89+
font-size: 56px;
90+
font-weight: 700;
91+
letter-spacing: -0.03em;
92+
line-height: 1.1;
93+
color: var(--color-black);
94+
margin-bottom: 20px;
95+
96+
.page-header--hero & {
97+
font-size: 64px;
98+
line-height: 1.0;
99+
margin-bottom: 28px;
100+
}
101+
102+
.page-header--article & {
103+
margin-bottom: 0;
104+
max-width: 800px;
105+
}
106+
}
107+
108+
/* ------------------------------------------------------------
109+
Description
110+
------------------------------------------------------------ */
111+
.page-header__description {
112+
font-size: 17px;
113+
line-height: 1.65;
114+
color: var(--color-muted);
115+
max-width: 560px;
116+
117+
.page-header--hero & {
118+
max-width: 460px;
119+
margin-bottom: 40px;
120+
}
121+
122+
a {
123+
color: var(--color-red);
124+
transition: opacity 0.15s ease;
125+
126+
&:hover {
127+
opacity: 0.75;
128+
}
129+
}
130+
}
131+
132+
/* ------------------------------------------------------------
133+
Actions (hero CTA buttons)
134+
------------------------------------------------------------ */
135+
.page-header__actions {
136+
display: flex;
137+
align-items: center;
138+
gap: 12px;
139+
flex-wrap: wrap;
140+
}
141+
142+
/* ------------------------------------------------------------
143+
Meta line (article layout: category · sep · date)
144+
------------------------------------------------------------ */
145+
.page-header__meta {
146+
display: flex;
147+
align-items: center;
148+
gap: 10px;
149+
font-size: 13px;
150+
line-height: 1;
151+
margin-bottom: 24px;
152+
}
153+
154+
.page-header__meta-category {
155+
font-weight: 500;
156+
color: var(--color-muted);
157+
}
158+
159+
.page-header__meta-sep {
160+
color: var(--color-muted-secondary);
161+
}
162+
163+
.page-header__meta-date {
164+
color: var(--color-muted);
165+
}
166+
167+
/* ------------------------------------------------------------
168+
Responsive — ≤1024px
169+
------------------------------------------------------------ */
170+
@media (max-width: 1024px) {
171+
.page-header--hero .page-header__heading {
172+
font-size: 48px;
173+
}
174+
175+
.page-header__heading {
176+
font-size: 40px;
177+
}
178+
179+
.page-header--split .page-header__inner {
180+
flex-direction: column;
181+
align-items: flex-start;
182+
gap: 24px;
183+
}
184+
}
185+
186+
/* ------------------------------------------------------------
187+
Responsive — ≤768px
188+
------------------------------------------------------------ */
189+
@media (max-width: 768px) {
190+
.page-header--hero {
191+
padding: 56px var(--container-padding) 64px;
192+
}
193+
194+
.page-header--hero .page-header__heading {
195+
font-size: 36px;
196+
}
197+
198+
.page-header__heading {
199+
font-size: 32px;
200+
}
201+
202+
.page-header--hero .page-header__actions {
203+
flex-direction: column;
204+
align-items: stretch;
205+
}
206+
207+
.page-header--hero .page-header__actions .btn {
208+
justify-content: center;
209+
}
210+
211+
.page-header__aside {
212+
padding-bottom: 0;
213+
}
214+
}
215+
216+
/* ------------------------------------------------------------
217+
Responsive — ≤480px
218+
------------------------------------------------------------ */
219+
@media (max-width: 480px) {
220+
.page-header__heading {
221+
font-size: 28px;
222+
}
223+
}

‎about/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
title: mruby — About
44
---
55

6-
<section class="about-header">
7-
<div class="about-header__inner">
6+
<section class="page-header">
7+
<div class="page-header__inner">
88
<div class="page-header__eyebrow">
99
<span class="page-header__eyebrow-dot"></span>
1010
Project
1111
</div>
12-
<h1 class="about-heading">About mruby</h1>
13-
<p class="about-description">
12+
<h1 class="page-header__heading">About mruby</h1>
13+
<p class="page-header__description">
1414
mruby is the lightweight implementation of the Ruby language complying to (part of)
1515
the ISO standard. It can be linked and embedded within your application. We provide the interpreter
1616
<span class="inline-code">mruby</span>, the interactive shell <span class="inline-code">mirb</span>,

0 commit comments

Comments
 (0)