Skip to content

Commit 0f8b952

Browse files
javiereguiluzjaviereguiluz
committed
minor #1696 [Site] Solidarity banner (smnandre)
This PR was merged into the 2.x branch. Discussion ---------- [Site] Solidarity banner Solidarity banner Commits ------- d90ee78 Solidarity banner
2 parents 71412bc + d90ee78 commit 0f8b952

File tree

7 files changed

+143
-0
lines changed

7 files changed

+143
-0
lines changed

‎ux.symfony.com/assets/images/clock.png

21.1 KB
Loading

‎ux.symfony.com/assets/images/clock.webp

13.9 KB
Binary file not shown.

‎ux.symfony.com/assets/images/icons/heart.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ux.symfony.com/assets/styles/app.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
@import "layouts/section";
6666

6767
// Components
68+
@import "components/Banner";
6869
@import "components/DataList";
6970
@import "components/demo-container";
7071
@import "components/DemoCard";

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// -----------------------------------------------------------------
2+
// Banner
3+
// -----------------------------------------------------------------
4+
5+
.Banner {
6+
background: #0A0A0A;
7+
}
8+
9+
.BannerInner {
10+
display: flex;
11+
flex-direction: column;
12+
padding: 2rem 1rem;
13+
gap: 1rem;
14+
position: relative;
15+
}
16+
17+
.Banner + .App {
18+
position: relative;
19+
}
20+
21+
.BannerMedia {
22+
align-self: center;
23+
justify-self: center;
24+
}
25+
26+
.BannerMedia img {
27+
height: 92px;
28+
width: auto;
29+
}
30+
31+
.BannerContent {
32+
flex: 1;
33+
display: flex;
34+
flex-direction: column;
35+
place-content: center;
36+
color: #fff;
37+
font-family: var(--font-family-text);
38+
}
39+
40+
.BannerTitle {
41+
text-align: center;
42+
font-size: 1.5rem;
43+
font-family: var(--font-family-title);
44+
}
45+
46+
.BannerText {
47+
margin-block-end: 0.5rem;
48+
}
49+
50+
.BannerText em {
51+
text-decoration: underline;
52+
text-underline-offset: .25rem;
53+
text-underline-style: double;
54+
}
55+
56+
.BannerAction {
57+
display: grid;
58+
place-content: center;
59+
justify-content: center;
60+
}
61+
62+
.BannerButton {
63+
position: relative;
64+
display: flex;
65+
align-items: center;
66+
padding: .75rem 1.5rem;
67+
align-self: center;
68+
color: #fffc;
69+
font-size: 1.5rem;
70+
font-family: var(--font-family-title);
71+
gap: .5rem;
72+
justify-content: center;
73+
background: linear-gradient(#000e, #000d) padding-box,
74+
linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
75+
border-radius: 2rem;
76+
border: 4px solid transparent;
77+
transition: all 250ms linear;
78+
}
79+
80+
.BannerButton:hover {
81+
color: #fff;
82+
}
83+
84+
.BannerButton svg {
85+
width: 1em;
86+
height: 1em;
87+
color: currentColor;
88+
transition: all 250ms linear;
89+
}
90+
91+
.BannerButton:hover svg {
92+
transform: scale(1.1);
93+
}
94+
95+
@media screen and (min-width: 768px) {
96+
.BannerImage {
97+
width: 128px;
98+
}
99+
.BannerInner {
100+
flex-direction: row;
101+
padding: 4rem 2rem;
102+
gap: 2rem;
103+
}
104+
.BannerTitle {
105+
text-align: left;
106+
}
107+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<aside class="Banner">
2+
<div class="container-xxl">
3+
<div class="BannerInner">
4+
<div class="BannerMedia">
5+
<picture>
6+
<source type="image/webp" srcset="{{ asset('images/clock.webp') }}"/>
7+
<img src="{{ asset('images/clock.png') }}" alt="Clock" class="BannerImage" width="256" height="256">
8+
</picture>
9+
</div>
10+
<div class="BannerContent">
11+
<p class="BannerTitle">Help <a href="https://twitter.com/weaverryan/">Ryan</a> Get The Treatment He
12+
Needs!</p>
13+
<p class="BannerText">
14+
Ryan is the lead maintainer of Symfony UX and always gives so much to the community.
15+
</p>
16+
<p class="BannerText">
17+
Now he <em>needs your help</em>. Please donate to support him in this battle.
18+
</p>
19+
</div>
20+
<div class="BannerAction">
21+
<a href="https://gofund.me/44ecdba2" class="BannerButton" rel="external">
22+
<twig:Icon name="heart" aria-hidden="true"/>
23+
Donate
24+
</a>
25+
</div>
26+
</div>
27+
</div>
28+
</aside>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
{% endblock %}
3737
</head>
3838
<body>
39+
{% block banner %}
40+
{{ include('_banner.html.twig') }}
41+
{% endblock %}
42+
3943
{% block body %}
4044
<div class="App">
4145
{% block header %}

0 commit comments

Comments
 (0)