Minor fixes

Author: smnandre

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

@@ -46,7 +46,7 @@ button:active {
 }
 
 a.link {
-  --color: #d9438e;
+  --color: var(--bs-code-color);
   color: var(--color);
   position: relative;
   &:after {

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

@@ -4,6 +4,7 @@
 
 .Banner {
   background: #0A0A0A;
+  color: #fff;
 }
 .Banner + .App {
   position: relative;
@@ -13,55 +14,57 @@
   display: none;
 }
 
-.Banner .container-xxl {
-  max-width: 1320px;
-  margin: 0 auto;
-}
-
 .BannerInner {
   display: flex;
   flex-direction: column;
-  padding: 2rem 1rem;
+  padding: 1rem 0;
   gap: 1rem;
   position: relative;
+  max-width: 920px;
+  margin: 0 auto;
 }
 
 .BannerMedia {
   align-self: center;
   justify-self: center;
 }
 .BannerImage {
-  width: 92px;
+  width: max(10vw, 40px);
   height: auto;
-  filter: drop-shadow(1px 1px 8px #000) drop-shadow(2px 2px 32px #970404);
+  filter: drop-shadow(1px 1px .5rem #000) drop-shadow(2px 2px 2rem #970404);
 }
 
 .BannerContent {
   flex: 1;
   display: flex;
   flex-direction: column;
   place-content: center;
-  color: #fff;
-  font-family: var(--font-family-text);
+  gap: 0.5rem;
+  text-wrap: balance;
 }
 
 .BannerTitle {
   text-align: center;
-  font-size: 1.5rem;
+  font-size: 1.2em;
   font-family: var(--font-family-title);
+  margin: 0;
+  color: #fff;
 }
-.BannerTitle a {
+.BannerTitle a:hover {
   text-shadow: 0 0 1px 4px red;
-  font-size: 1.05em;
 }
 
 .BannerText {
-  margin-block-end: 0.5rem;
+  text-align: center;
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.2;
+  font-weight: 300;
+  color: #fff;
 }
 .BannerText em {
   text-decoration: underline;
   text-underline-offset: .25rem;
-  text-underline-style: double;
 }
 
 .BannerAction {
@@ -73,20 +76,19 @@
 .BannerButton {
   display: flex;
   align-items: center;
-  padding: .75rem 1.5rem;
+  padding: .35em .75em;
   align-self: center;
   color: #fffc;
-  font-size: 1.5rem;
+  font-size: 1.1em;
   font-family: var(--font-family-title);
-  gap: .5rem;
+  gap: .5em;
   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;
+  border-radius: 2em;
+  border: 2px solid transparent;
   transition: all 250ms linear;
 }
-
 .BannerButton:hover {
   color: #fff;
 }
@@ -102,21 +104,16 @@
   color: currentColor;
   transition: all 250ms linear;
 }
-
 .BannerButton:hover svg {
   transform: scale(1.1);
 }
 
 @media screen and (min-width: 768px) {
   .BannerImage {
-    width: 128px;
+    width: 64px;
   }
   .BannerInner {
     flex-direction: row;
-    padding: 2rem;
-    gap: 4rem;
-  }
-  .BannerTitle {
-    text-align: left;
+    padding: 1rem 2rem;
   }
 }

ux.symfony.com/assets/styles/components/_DemoCard.scss

@@ -15,6 +15,7 @@
   transition: color 250ms ease-in-out, transform 750ms ease-in-out, box-shadow 750ms ease-in-out;
   transform: translateY(0);
   box-shadow: 0 0 0 transparent;
+  background: var(--bs-body-bg);
 }
 .DemoCard:hover {
   transition: color 250ms ease-in-out, transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
@@ -38,11 +39,10 @@
   max-height: 100%;
   width: 100%;
   display: block;
-  border-radius: .25rem;
-  opacity: .80;
+  opacity: .90;
 }
 .DemoCard:hover .DemoCard__image {
-  opacity: .90;
+  opacity: .93;
 }
 
 .DemoCard__content {

ux.symfony.com/templates/components/Demo/PrevNext.html.twig

@@ -3,13 +3,13 @@
     <div style="display: flex; gap: 3rem; flex-wrap: wrap;" class="justify-content-center justify-content-lg-between">
         {% set previous = this.previous(true) %}
         {% if previous %}
-            <div style="max-width: 360px;--bs-secondary-bg-subtle: var(--bs-dark-bg-subtle);">
+            <div style="max-width: 380px;--bs-secondary-bg-subtle: var(--bs-dark-bg-subtle);">
                 <twig:Demo:DemoCard demo="{{ previous }}" />
             </div>
         {% endif %}
         {% set next = this.next(true) %}
         {% if next %}
-            <div style="max-width: 360px;--bs-secondary-bg-subtle: var(--bs-dark-bg-subtle);">
+            <div style="max-width: 380px;--bs-secondary-bg-subtle: var(--bs-dark-bg-subtle);">
                 <twig:Demo:DemoCard demo="{{ next }}" />
             </div>
         {% endif %}

ux.symfony.com/templates/demos/live_demo.html.twig

@@ -11,7 +11,7 @@
 
     {% block demo_header %}
         <div class="hero">
-            <div class="container-fluid container-xxl px-4 px-md-5 my-5">
+            <div class="container-fluid container-xxl pt-4 px-4 px-md-5 my-5">
                 <div class="text-center mt-md-0">
                     <p class="eyebrows">
                         <a href="{{ url('app_demos') }}">DEMOS</a> /

ux.symfony.com/templates/main/packages.html.twig

@@ -9,7 +9,7 @@
 {% block content %}
 <div class="hero">
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
-        <h1 class="text-center mt-5">Symfony UX Packages</h1>
+        <h1 class="text-center mt-5">UX Packages</h1>
         <p class="text-center mt-2 mb-5">A treasure chest of bundles, components and packages</p>
     </div>
 </div>