minor #1804 [Site] Various small fixes / improvements (smnandre)

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

Discussion
----------

[Site] Various small fixes / improvements

A lot of small things grouped in a medium-sized PR 👼

- Lint templates
- Normalize template names
- Fix some spacings
- Fix CodeBlock expander
- SVG image for header logo
- Improve CodeBlocWithComment readability
- Rework code block expand button
- Fix terminal style
- Add missing doc cards in "footer"
- Remove unused image
- Compress 2 photos & win 8MB
- Clean clipboard controller(s)
- Fix header padding
- Fix Icon cards on Safari
- Simplify Turbo chat icon
- Remove Playfair

Commits
-------

e0bda68 [Site] Various small fixes / improvements

Author: kbond

ux.symfony.com/assets/controllers/code-expander-controller.js

@@ -4,14 +4,6 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     static targets = ['useStatements', 'expandCodeButton', 'codeContent'];
 
-    connect() {
-        if (this.hasExpandCodeButtonTarget && this.#isOverflowing(this.codeContentTarget)) {
-            this.expandCodeButtonTarget.style.display = 'block';
-            // add extra padding so the button doesn't block the code
-            this.codeContentTarget.classList.add('pb-5');
-        }
-    }
-
     expandUseStatements(event) {
         this.useStatementsTarget.style.display = 'block';
         event.currentTarget.remove();
@@ -21,7 +13,6 @@ export default class extends Controller {
         this.codeContentTarget.style.height = 'auto';
         if (this.hasExpandCodeButtonTarget) {
             this.expandCodeButtonTarget.remove();
-            this.codeContentTarget.classList.remove('pb-5');
         }
     }
 

ux.symfony.com/assets/controllers/ux-clipboard-controller.js

@@ -110,19 +110,7 @@
 @import "./container";
 @import "./images";
 
-// TODO move Terminal/CodeBlock
-.btn-expand-code {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    color: rgb(156 163 175);
-    background-color: rgb(9, 10, 11);
-}
-.btn-expand-code:hover, .btn-expand-code:active {
-    background-color: rgb(9, 10, 11) !important;
-    color: #fff !important;
-}
 .code-description a {
     text-decoration: underline;
 }
+

ux.symfony.com/assets/images/large.jpg

@@ -20,14 +20,3 @@
         url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/ubuntu-latin-700-normal.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
-/* playfair-display-latin-700-italic */
-@font-face {
-  font-family: 'Playfair Display';
-  font-style: italic;
-  font-display: swap;
-  font-weight: 700;
-  src:  local("Playfair Display Bold Italic"),
-        local("PlayfairDisplay-Bold-Italic"),
-        url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/files/playfair-display-latin-700-italic.woff2") format('woff2');
-}

ux.symfony.com/assets/images/legos.jpg

@@ -41,6 +41,9 @@ button {
   border: none;
   background: inherit;
 }
+button:active {
+  border: inherit;
+}
 
 a.link {
   --color: #d9438e;

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

@@ -15,7 +15,6 @@
 
   // Fonts
   --font-family-title: "Ubuntu";
-  --font-family-decorative: "Playfair Display";
   --font-family-text: system-ui, sans-serif;
   --font-family-code: ui-monospace, "SF Mono", SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 

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

@@ -9,11 +9,6 @@ h1.ubuntu {
   line-height: 60px;
 }
 
-h1 .playfair {
-  font-style: italic;
-  line-height: 70px;
-}
-
 h2.ubuntu {
   font-size: 42px;
   font-weight: 700;
@@ -88,12 +83,6 @@ h4.ubuntu {
     letter-spacing: -1px;
   }
 
-  h1.playfair {
-    font-size: 36px;
-    line-height: 48px;
-    letter-spacing: -1px;
-  }
-
   h2.ubuntu {
     font-size: 28px;
     line-height: 32px;

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

@@ -21,6 +21,8 @@
   aspect-ratio: 1;
   position: relative;
   transition: 150ms linear;
+  place-content: stretch;
+  align-content: center;
 }
 
 .IconCard:hover {
@@ -34,6 +36,8 @@
   place-items: center;
   align-content: center;
   position: relative;
+  aspect-ratio: 1;
+  width: 100%;
 }
 
 .IconCard__icon {
@@ -54,6 +58,7 @@
   line-height: 1.1;
   display: none;
   transition: opacity 125ms linear;
+  color: var(--bs-body-color);
 }
 
 .IconCard__name {

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

@@ -3,30 +3,16 @@
     text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
 
     em {
-      font-family: var(--font-family-decorative);
-      padding-inline-start: .5rem;
+      display: inline-flex;
+      transform: skewX(-16deg) scaleY(0.95) rotate(-.5deg);
+      font-weight: 400;
+      text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .1);
+      mix-blend-mode: luminosity;
+      font-style: normal;
     }
   }
 
   .AppHeader + * &  {
     padding-top: 3rem;
   }
-
-  [data-bs-theme="dark"] & {
-    background-blend-mode: hue !important;
-    // background-blend-mode: soft-light;
-  }
-
-  .nav-options {
-    font-family: var(--font-family-title);
-    font-weight: 700;
-    font-size: 15px;
-    line-height: 20px;
-    letter-spacing: 0px;
-    color: #fff;
-  }
-
-  .nav-options-icon {
-    font-size: 20px;
-  }
 }

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

@@ -117,7 +117,6 @@
         transition: all 250ms ease-in-out;
         &:hover {
             color: $n-100;
-            background-color: $n-800;
         }
     }
     .btn-link:hover {
@@ -145,8 +144,46 @@
     overflow-x: auto;
     overflow-y: auto;
     padding: 1rem;
-
     pre {
         overflow: visible;
     }
+    scrollbar-width: thin;
+}
+
+@media screen and (min-width: 768px) {
+    .Terminal_content::-webkit-scrollbar {
+        display: none;
+    }
+    .Terminal_content {
+        --webkit-scrollbar-width: none;
+        scrollbar-width: none;
+    }
+}
+
+.Terminal_expand {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    width: auto;
+    color: rgb(156, 163, 175);
+    background-color: rgb(9, 10, 11);
+    border-radius: 1rem;
+    font-size: smaller;
+    display: inline-flex !important;
+    align-items: center;
+    padding: .25rem .75rem;
+    flex-direction: row;
+    gap: 0.5rem;
+    opacity: .35;
+    transition: all 250ms;
+    text-transform: capitalize;
+}
+
+.Terminal:hover .Terminal_expand {
+    background-color: rgb(9, 10, 11) !important;
+    opacity: .7;
+}
+.Terminal_expand:hover, .Terminal_expand:active {
+    color: #fff !important;
+    opacity: 1;
 }

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

@@ -58,18 +58,19 @@ body.locked {
   --height: 2rem;
   height: var(--height);
   width: calc(161 / 30 * var(--height));
-  background: url(../images/sf-ux.svg);
-  background-size: 100%;
   display: block;
   transition: filter 250ms ease-in;
   flex-shrink: 0;
-  span {
-    display: none;
-  }
   .AppHeader--white &,
   [data-bs-theme="dark"] & {
     filter: invert(1);
   }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
 }
 
 .AppHeader_toggler {
@@ -86,6 +87,9 @@ body.locked {
 }
 
 @media (min-width: 860px) {
+  .AppHeader_logo {
+    --height: 2.5rem;
+  }
   .AppHeader_toggler {
     display: none !important;
   }

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

@@ -2,10 +2,6 @@
   font-family: var(--font-family-title);
 }
 
-.playfair {
-  font-family: var(--font-family-decorative);
-}
-
 .font-title {
   font-family: var(--font-family-title);
 }

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

@@ -16,7 +16,7 @@
   content: " ";
   animation: copied 450ms linear forwards;
   border-radius: 50%;
-  border: 2px dotted var(--bs-green);
+  border: 2px dotted var(--bs-body-color);
 }
 
 @keyframes copied {

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

@@ -35,5 +35,16 @@
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: var(--color);
   }
+}
+
+.btn-sm {
+  --bs-border-width: 0;
+}
+.btn-sm:hover {
+  border-color: transparent !important;
+  border-width: 0 !important;
+}
 
+.btn-copy {
+  position: relative;
 }

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

@@ -24,7 +24,7 @@ public function __invoke(UxPackageRepository $packageRepository): Response
         $package = $packageRepository->find('lazy-image');
         $legosFilePath = $this->getParameter('kernel.project_dir').'/assets/images/legos.jpg';
 
-        return $this->render('ux_packages/lazy-image.html.twig', [
+        return $this->render('ux_packages/lazy_image.html.twig', [
             'package' => $package,
             'legosFilePath' => $legosFilePath,
         ]);

ux.symfony.com/assets/styles/utilities/_font.scss

@@ -23,7 +23,7 @@ public function __invoke(UxPackageRepository $packageRepository): Response
     {
         $package = $packageRepository->find('twig-component');
 
-        return $this->render('ux_packages/twig-component.html.twig', [
+        return $this->render('ux_packages/twig_component.html.twig', [
             'package' => $package,
         ]);
     }

ux.symfony.com/assets/styles/utilities/_info-tooltips.scss

@@ -4,7 +4,7 @@
         <nav class="AppNav AppNav--white">
 
             <a class="AppHeader_logo" href="{{ path('app_homepage') }}"  aria-label="Homepage">
-                <span aria-hidden="false">Symfony UX</span>
+                <img src="{{ asset('images/sf-ux.svg') }}" alt="Symfony UX" width="161" height="30" />
             </a>
 
             <div class="AppNav_actions">

ux.symfony.com/assets/styles/vendor/_bootstrap.scss

@@ -10,13 +10,13 @@
 {% block content %}
 
     <div class="hero">
-        <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+        <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
             <h1 class="text-center ubuntu mt-5"><a href="{{ url('app_changelog') }}">Changelog</a></h1>
             <p class="text-center mt-2 mb-5">New features, bug fixes, performances and security improvements.</p>
         </div>
     </div>
 
-    <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+    <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
         <div class="Changelog">
             {% for entry in changelog %}
                 <twig:ChangelogItem item="{{ entry }}" isOpen="{{ loop.index < 6 }}" />

ux.symfony.com/src/Controller/UxPackage/LazyImageController.php

@@ -3,7 +3,7 @@
 }) }}>
 
     {% if showFilename %}
-        <div class="Terminal_header py-2 ps-4 pe-2 mb-0 d-flex justify-content-between align-items-center">
+        <div class="Terminal_header py-2 px-3 mb-0 d-flex justify-content-between align-items-center">
             <a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title"><code>{{ filename }}</code></a>
             <div class="Terminal_actions">
                 <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
@@ -35,14 +35,12 @@
         {% block code_content_bottom %}
             <button
                 type="button"
-                class="btn btn-expand-code pt-2 text-center"
+                class="Terminal_expand"
                 data-code-expander-target="expandCodeButton"
                 data-action="code-expander#expandCode"
-                style="display: none;"
             >
                 <twig:Icon name="arrow-down"/>
-                Expand code
-                <twig:Icon name="arrow-down"/>
+                <span>Expand code</span>
             </button>
         {% endblock %}
     </div>