minor #1827 [Site] Clean templates (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Site] Clean templates

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Issues        | Fix #
| License       | MIT

Replaces #1822

All the clean / fixes / CS   (without removing the light mode for now)

Commits
-------

3de425e [Site] Clean templates

Author: kbond

ux.symfony.com/assets/images/heart.png

@@ -1,6 +1,6 @@
 .components-container {
   background: var(--bs-body-bg);
-  border-radius: 15px;
+  border-radius: 1rem;
   border: 0.66px solid var(--bs-secondary-bg-subtle);
 
   h4 {
@@ -10,12 +10,14 @@
 
 .ux-container {
   border: 1px solid var(--bs-secondary-bg-subtle);
-  border-radius: 12px;
+  border-radius: 1rem;
 }
 
+
+
 .markdown-container {
   border: 1px solid var(--bs-secondary-bg-subtle);
-  border-radius: 5px;
+  border-radius: .75rem;
   height: 100%;
   width: 100%;
   position: relative;

ux.symfony.com/assets/images/heart.webp

@@ -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/_container.scss

@@ -4,6 +4,7 @@
 
 .Banner {
   background: #0A0A0A;
+  color: #fff;
 }
 .Banner + .App {
   position: relative;
@@ -13,55 +14,53 @@
   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;
+  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.25rem;
+  text-wrap: balance;
 }
 
 .BannerTitle {
   text-align: center;
-  font-size: 1.5rem;
+  font-size: 1.2em;
   font-family: var(--font-family-title);
-}
-.BannerTitle a {
-  text-shadow: 0 0 1px 4px red;
-  font-size: 1.05em;
+  margin: 0;
+  color: #fff;
 }
 
 .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 +72,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: 3px solid transparent;
   transition: all 250ms linear;
 }
-
 .BannerButton:hover {
   color: #fff;
 }
@@ -102,21 +100,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/app/_html.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,19 +39,18 @@
   max-height: 100%;
   width: 100%;
   display: block;
-  border-radius: .25rem;
-  opacity: .80;
+  opacity: .90;
 }
 .DemoCard:hover .DemoCard__image {
-  opacity: .90;
+  opacity: .93;
 }
 
 .DemoCard__content {
   padding: .75rem 1rem;
   flex: 1;
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
-  gap: .15rem;
+  gap: .5rem;
   display: flex;
   flex-direction: column;
 }
@@ -60,7 +60,6 @@
   font-weight: 700;
   margin: 0;
   font-family: var(--font-family-title);
-  padding: .25rem;
 }
 
 .DemoCard__description {
@@ -70,7 +69,6 @@
   transition: all 250ms ease-in-out;
   opacity: .65;
   line-height: 1.4;
-  padding: .25rem;
   margin: 0;
 }
 .DemoCard:hover .DemoCard__description {
@@ -80,4 +78,7 @@
 .DemoCard__tags {
   margin-top: auto;
   margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+    gap: .5rem;
 }

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

@@ -13,6 +13,15 @@
   border-bottom-right-radius: 12px;
 }
 
-.demo-chat > .DemoContainer-inner {
-  border-radius: 0;
+.demo-introduction {
+  max-inline-size: 800px;
+  margin-inline: auto;
+}
+
+.demo-introduction a {
+  color: var(--bs-code-color);
+  font-weight: 500;
+}
+.demo-introduction code {
+  font-size: 0.95em;
 }

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

@@ -7,6 +7,8 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-style: normal;
+  filter: brightness(102%) contrast(200%) drop-shadow(1px 1px 1px #0004);
+  letter-spacing: 0;
 }
 
 .hero-background {

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

@@ -82,7 +82,7 @@
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: 0;
-  opacity: .85;
+  opacity: .9;
   transition: opacity 250ms;
   padding: 0;
   border: none;
@@ -109,26 +109,25 @@
 
 .AppNav_badge {
   position: absolute;
-  color: lightskyblue;
   right: -1rem;
   top: -.75rem;
   text-align: right;
   padding: .2rem .4rem;
-  font-size: .75rem;
-  border: 1px solid var(--color-text);
-  font-stretch: condensed;
+  font-size: .5rem;
   font-family: var(--font-family-text);
-  height: 1rem;
-  line-height: normal;
+  text-transform: uppercase;
+  line-height: 1;
+  background: rgba(0,0,0,0.1);
+  border-radius: .25rem;
+  opacity: 0.75;
+  display: flex;
+}
+.AppNav_badge:after {
+  content: attr(data-content);
+  color: inherit;
 }
 @media (max-width: 859px) {
   .AppNav_badge {
     display: none;
   }
 }
-
-@media (max-width: 360px) {
-  .ThemeSwitcher + .AppNav_item {
-    display: none;
-  }
-}

ux.symfony.com/assets/styles/sections/_hero.scss

@@ -22,18 +22,16 @@ public function findAll(): array
     {
         return [
             new LiveDemo(
-                'auto-validating-form',
-                name: 'Auto-Validating Form',
-                description: 'Create a form that validates each field in-real-time as the user enters data!',
-                route: 'app_demo_live_component_auto_validating_form',
+                'live-memory',
+                name: 'LiveMemory Card Game',
+                description: 'A Memorable Game UX with Live Components!',
+                route: 'app_demo_live_memory',
                 longDescription: <<<EOF
-Enter a bad email or leave the password empty, and see how the
-form validates in real time!
-<br>
-This renders a normal Symfony form but with extras added on top,
-all generated from Symfony & Twig.
+A Memorable Game UX with Live Components! Discover how to use Live Components to create a game with a vibrant interface,
+ rich interactions and real-time updates. This journey will take you through many features of Live Components, and you'll
+  learn how to use them to create a fun and engaging game.
 EOF,
-                tags: ['form', 'validation', 'inline'],
+                tags: ['game', 'time', 'events', 'LiveAction'],
             ),
             new LiveDemo(
                 'infinite-scroll',
@@ -46,18 +44,6 @@ public function findAll(): array
 EOF,
                 tags: ['pattern', 'pagination', 'navigation'],
             ),
-            new LiveDemo(
-                'live-memory',
-                name: 'LiveMemory Card Game',
-                description: 'A Memorable Game UX with Live Components!',
-                route: 'app_demo_live_memory',
-                longDescription: <<<EOF
-A Memorable Game UX with Live Components! Discover how to use Live Components to create a game with a vibrant interface,
- rich interactions and real-time updates. This journey will take you through many features of Live Components, and you'll
-  learn how to use them to create a fun and engaging game.
-EOF,
-                tags: ['game', 'time', 'events', 'LiveAction'],
-            ),
             new LiveDemo(
                 'form-collection-type',
                 name: 'Embedded CollectionType Form',
@@ -71,6 +57,20 @@ public function findAll(): array
 EOF,
                 tags: ['form', 'collection'],
             ),
+            new LiveDemo(
+                'auto-validating-form',
+                name: 'Auto-Validating Form',
+                description: 'Create a form that validates each field in-real-time as the user enters data!',
+                route: 'app_demo_live_component_auto_validating_form',
+                longDescription: <<<EOF
+Enter a bad email or leave the password empty, and see how the
+form validates in real time!
+<br>
+This renders a normal Symfony form but with extras added on top,
+all generated from Symfony & Twig.
+EOF,
+                tags: ['form', 'validation', 'inline'],
+            ),
             new LiveDemo(
                 'dependent-form-fields',
                 name: 'Dependent Form Fields',