Skip to content

Commit 7a4b0be

Browse files
smnandresmnandre
committed
[Site] Update Banner
1 parent 8fcac2a commit 7a4b0be

File tree

3 files changed

+112
-71
lines changed

3 files changed

+112
-71
lines changed

‎ux.symfony.com/assets/styles/components/_Banner.scss‎

Lines changed: 93 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,26 @@
33
// -----------------------------------------------------------------
44

55
.Banner {
6-
background: #0A0A0A;
7-
color: #fff;
8-
transition: transform 250ms linear;
6+
--color-front: #fff;
7+
--color-back: #0A0A0A;
8+
--color-text: color-mix(in oklab, var(--color-front) 80%, var(--color-back) 20%);
9+
--color-light: color-mix(in oklab, var(--color-front) 50%, var(--color-back) 50%);
10+
11+
--space-block: .5rem;
12+
--space-inline: 2rem;
13+
--font-size: .8rem;
14+
15+
@media screen and (min-width: 768px) {
16+
--font-size: .9rem;
17+
--space-inline: 1rem;
18+
}
19+
20+
background: var(--color-back);
21+
color: var(--color-front);
22+
z-index: 10;
23+
position: relative;
924
}
25+
1026
.Banner + .App {
1127
position: relative;
1228
}
@@ -15,84 +31,102 @@
1531
transform: translateY(-100%);
1632
}
1733

18-
.BannerInner {
34+
.Banner_inner {
1935
display: flex;
2036
flex-direction: row;
2137
flex-wrap: nowrap;
22-
padding-block: .5rem;
23-
gap: 1rem;
38+
padding-block: var(--space-block);
39+
gap: var(--space-inline);
2440
position: relative;
2541
}
2642

27-
.BannerContent {
43+
.Banner::after {
44+
height: 2px;
45+
backdrop-filter: blur(4px);
46+
width: 100%;
47+
content: "";
48+
background: rgb(255 255 255 / .1);
49+
}
50+
51+
.Banner_content {
2852
flex: 1;
2953
display: flex;
30-
flex-direction: column;
31-
place-content: center;
54+
flex-direction: row;
55+
align-items: center;
56+
justify-content: space-between;
3257
gap: 0.25rem;
3358
text-wrap: balance;
3459
}
3560

36-
.BannerText {
37-
text-align: center;
61+
.Banner_text {
3862
margin: 0;
39-
font-size: 0.8rem;
63+
font-size: var(--font-size);
4064
line-height: 1.3;
41-
font-weight: 400;
42-
color: #fffd;
43-
}
44-
.BannerText em {
45-
text-decoration: underline;
46-
text-underline-offset: .25rem;
47-
font-weight: 600;
48-
font-style: normal;
65+
font-weight: 300;
66+
color: var(--color-text, var(--color-front));
67+
.Icon {
68+
transform: translateY(-12%);
69+
margin-inline: calc(var(--space-inline) / 2);
70+
}
4971
}
5072

51-
.BannerAction {
52-
display: grid;
53-
place-content: center;
54-
justify-content: center;
73+
.Banner_link {
74+
color: var(--color-front);
75+
font-weight: 400;
76+
transition: all 300ms ease-out;
77+
transform: none;
78+
display: inline-flex;
79+
text-decoration: underline 1px;
80+
text-underline-offset: 0.2em;
81+
text-decoration-color: var(--color-back);
82+
83+
&:hover {
84+
transition: all 150ms ease-out;
85+
transform: translateY(-6%);
86+
text-decoration-color: var(--color-text);
87+
text-underline-offset: 0.3em;
88+
}
89+
90+
strong {
91+
font-weight: 600;
92+
}
5593
}
5694

57-
.BannerButton {
95+
.Banner_cta {
5896
display: flex;
97+
flex-direction: row;
98+
gap: .75em;
5999
align-items: center;
60-
padding: .15em .5em;
61-
align-self: center;
62-
color: #fffc;
63-
font-size: .9em;
64-
font-family: var(--font-family-title);
65-
gap: .35em;
66-
justify-content: center;
67-
background: linear-gradient(#000e, #000d) padding-box,
68-
linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
69-
border-radius: 2em;
70-
border: 2px solid transparent;
71-
transition: all 250ms linear;
72-
}
73-
.BannerButton:hover {
74-
color: #fff;
75-
}
76-
.BannerButton:after {
77-
content: "";
78-
position: absolute;
79-
inset: 0;
80-
}
100+
flex-wrap: nowrap;
101+
flex-shrink: 0;
81102

82-
.BannerButton svg {
83-
width: 1em;
84-
height: 1em;
85-
color: currentColor;
86-
transition: all 250ms linear;
87-
}
88-
.BannerButton:hover svg {
89-
transform: scale(1.1);
103+
span {
104+
transition: all 350ms ease-out;
105+
}
106+
107+
&:hover {
108+
span {
109+
transition: all 150ms linear;
110+
transform: translateY(-0.1em);
111+
}
112+
}
113+
114+
.Icon {
115+
width: 1.5em;
116+
height: 1.5em;
117+
}
90118
}
91-
@media screen and (min-width: 768px) {
92-
.BannerInner {
93-
padding: .5rem 2rem;
119+
120+
@media screen and (max-width: 768px) {
121+
.Banner_text .Icon,
122+
.Banner_text .more,
123+
.Banner_cta span {
124+
display: none;
94125
}
95-
.BannerText {
96-
font-size: .9rem;
126+
.Banner_cta:after {
127+
content: '';
128+
position: absolute;
129+
inset: 0;
130+
z-index: 100;
97131
}
98132
}

‎ux.symfony.com/assets/styles/sections/_nav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161

6262
@media (max-width: 859px) {
6363
.AppNav_menu {
64-
transform: translateY(-20%);
64+
transform: translateY(-40%);
6565
opacity: 0;
6666
z-index: -1;
6767
transition: transform 350ms ease-out;

‎ux.symfony.com/templates/_banner.html.twig‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
<aside class="Banner">
2-
<div class="container-xxl">
3-
<div class="BannerInner">
4-
<div class="BannerContent">
5-
<p class="BannerText">
6-
Ryan is the lead maintainer of Symfony UX. Now he <em>needs your help</em>.
1+
<aside class="Banner" style="--color-back: {{ color_back ?? '#D5054EFF' }}; --color-front: #ffffffdd;">
2+
<div class="container-xxl px-4 px-md-5">
3+
<div class="Banner_inner">
4+
<div class="Banner_content">
5+
<p class="Banner_text">
6+
<span>
7+
Get ready for an unforgettable
8+
<a href="https://live.symfony.com/2025-chicago/" class="Banner_link"><strong>SymfonyDay Chicago 2025</strong></a>!
9+
<twig:ux:icon name="si:heart-fill" />
10+
</span>
11+
<span class="more">
12+
Join us for a full day dedicated to
13+
<a href="https://gofund.me/44ecdba2" rel="external" class="Banner_link">Ryan Weaver</a>
14+
& Symfony UX!
15+
</span>
716
</p>
8-
</div>
9-
<div class="BannerAction">
10-
<a href="https://gofund.me/44ecdba2" class="BannerButton" rel="external">
11-
<twig:ux:icon name="heart" aria-hidden="true"/>
12-
Donate
17+
<a href="https://live.symfony.com/2025-chicago/" class="Banner_cta" rel="external">
18+
<twig:ux:icon name="ion:ticket" />
19+
<span>Get Your Tickets!</span>
1320
</a>
1421
</div>
1522
</div>

0 commit comments

Comments
 (0)