Solidarity banner

symfony · Apr 8, 2024 · d90ee78 · d90ee78
1 parent 71412bc
commit d90ee78
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 0 deletions.
diff --git a/ux.symfony.com/assets/images/clock.png b/ux.symfony.com/assets/images/clock.png
diff --git a/ux.symfony.com/assets/images/clock.webp b/ux.symfony.com/assets/images/clock.webp
diff --git a/ux.symfony.com/assets/images/icons/heart.svg b/ux.symfony.com/assets/images/icons/heart.svg
diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss
@@ -65,6 +65,7 @@
 @import "layouts/section";
 
 // Components
+@import "components/Banner";
 @import "components/DataList";
 @import "components/demo-container";
 @import "components/DemoCard";

diff --git a/ux.symfony.com/assets/styles/components/_Banner.scss b/ux.symfony.com/assets/styles/components/_Banner.scss
@@ -0,0 +1,107 @@
+// -----------------------------------------------------------------
+// Banner
+// -----------------------------------------------------------------
+
+.Banner {
+  background: #0A0A0A;
+}
+
+.BannerInner {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 1rem;
+  gap: 1rem;
+  position: relative;
+}
+
+.Banner + .App {
+  position: relative;
+}
+
+.BannerMedia {
+  align-self: center;
+  justify-self: center;
+}
+
+.BannerMedia img {
+  height: 92px;
+  width: auto;
+}
+
+.BannerContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  place-content: center;
+  color: #fff;
+  font-family: var(--font-family-text);
+}
+
+.BannerTitle {
+  text-align: center;
+  font-size: 1.5rem;
+  font-family: var(--font-family-title);
+}
+
+.BannerText {
+  margin-block-end: 0.5rem;
+}
+
+.BannerText em {
+  text-decoration: underline;
+  text-underline-offset: .25rem;
+  text-underline-style: double;
+}
+
+.BannerAction {
+  display: grid;
+  place-content: center;
+  justify-content: center;
+}
+
+.BannerButton {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: .75rem 1.5rem;
+  align-self: center;
+  color: #fffc;
+  font-size: 1.5rem;
+  font-family: var(--font-family-title);
+  gap: .5rem;
+  justify-content: center;
+  background: linear-gradient(#000e, #000d) padding-box,
+  linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
+  border-radius: 2rem;
+  border: 4px solid transparent;
+  transition: all 250ms linear;
+}
+
+.BannerButton:hover {
+  color: #fff;
+}
+
+.BannerButton svg {
+  width: 1em;
+  height: 1em;
+  color: currentColor;
+  transition: all 250ms linear;
+}
+
+.BannerButton:hover svg {
+  transform: scale(1.1);
+}
+
+@media screen and (min-width: 768px) {
+  .BannerImage {
+    width: 128px;
+  }
+  .BannerInner {
+    flex-direction: row;
+    padding: 4rem 2rem;
+    gap: 2rem;
+  }
+  .BannerTitle {
+    text-align: left;
+  }
+}
diff --git a/ux.symfony.com/templates/_banner.html.twig b/ux.symfony.com/templates/_banner.html.twig
@@ -0,0 +1,28 @@
+<aside class="Banner">
+    <div class="container-xxl">
+        <div class="BannerInner">
+            <div class="BannerMedia">
+                <picture>
+                    <source type="image/webp" srcset="{{ asset('images/clock.webp') }}"/>
+                    <img src="{{ asset('images/clock.png') }}" alt="Clock" class="BannerImage" width="256" height="256">
+                </picture>
+            </div>
+            <div class="BannerContent">
+                <p class="BannerTitle">Help <a href="https://twitter.com/weaverryan/">Ryan</a> Get The Treatment He
+                    Needs!</p>
+                <p class="BannerText">
+                    Ryan is the lead maintainer of Symfony UX and always gives so much to the community.
+                </p>
+                <p class="BannerText">
+                    Now he <em>needs your help</em>. Please donate to support him in this battle.
+                </p>
+            </div>
+            <div class="BannerAction">
+                <a href="https://gofund.me/44ecdba2" class="BannerButton" rel="external">
+                    <twig:Icon name="heart" aria-hidden="true"/>
+                    Donate
+                </a>
+            </div>
+        </div>
+    </div>
+</aside>
diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig
@@ -36,6 +36,10 @@
         {% endblock %}
     </head>
     <body>
+        {% block banner %}
+            {{ include('_banner.html.twig') }}
+        {% endblock %}
+
         {% block body %}
             <div class="App">
                 {% block header %}