minor #1077 [Site] New Icon component + assets optimisation (smnandre)

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

Discussion
----------

[Site] New Icon component + assets optimisation

* new Icon twig component to handle SVG icons (and remove all FontAwesome scripts + fonts)
* clean & compress favicons
* expand header full-width on big screens
* clean footer
* fix layout + add UI effects on component list
* fix some minor misalignments

Commits
-------

a2b5d3b [Site] New Icon component + assets optimisation

Author: weaverryan

ux.symfony.com/assets/images/icons/arrow-down.svg

@@ -37,12 +37,7 @@
     border-radius: 12px;
 }
 
-.component-container-shadow {
-    box-shadow: 0px 8px 16px -10px rgba(0, 0, 0, 0.12);
-}
-.component-container-shadow:hover {
-    box-shadow: 2px 3px 9px 4px rgb(0 0 0 / 12%);
-}
+
 
 .demo-container {
     background-color: white;
@@ -143,55 +138,49 @@
     line-height: 50px;
 }
 
+
+.file-tree ul {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.file-tree li > span {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
 .file-tree-main::before {
     background: none!important;
 }
 
-.file-tree ul>:not(ul),
 .file-tree ul {
   position: relative;
+  padding-inline-start: 1rem;
 }
-.file-tree ul :not(span) {
-  margin-left: 20px;
-}
-.file-tree ul span {
-  display: inline;
-}
+
 .file-tree .tooltip-inner {
     max-width: 350px;
 }
 .file-tree.nodots ul :not(span) {
   margin-left: 12px;
 }
-.file-tree ul::before,
-.file-tree ul>:not(ul)::before {
+.file-tree ul::before {
   content: '';
-  width: 10px;
+  width: 1rem;
+  background: url(../images/dot.svg) left top / 2px 2px;
   display: block;
   position: absolute;
 }
-.file-tree ul::before,
-.file-tree ul>:not(ul)::before {
-  background: url(../images/dot.svg) left top / 2px 2px;
-}
-
-.file-tree.nodots ul::before,
-.file-tree.nodots ul>:not(span)::before {
-  background-image: none;
-}
 .file-tree ul::before {
   top: 0;
   height: 100%;
   background-repeat: repeat-y;
-  left: 5px;
+  background-position: center;
+  left: 0;
   z-index: -1;
 }
-.file-tree ul>:not(ul)::before {
-  top: 8px;
-  height: calc(100% - 8px);
-  background-repeat: repeat-x;
-  left: -15px;
-}
 
 
 

ux.symfony.com/assets/images/icons/arrow-left.svg

@@ -26,15 +26,17 @@
 
 .terminal-wrapper .terminal-controls {
     position: absolute;
-    top: 6px;
+    top: 8px;
     left: 12px;
+    display: flex;
+    align-items: center;
+    gap: .5rem;
 }
 .terminal-wrapper .terminal-controls span {
     display: inline-block;
-    width: 12px;
-    height: 12px;
+    width: .75rem;
+    height: .75rem;
     border-radius: 50%;
-    margin-right: 10px;
 }
 
 .red {

ux.symfony.com/assets/images/icons/arrow-right.svg

@@ -114,10 +114,10 @@ h4.ubuntu {
 .eyebrows {
     text-transform: uppercase;
     font-family: Inter;
-    font-size: 11px;
+    font-size: 0.7rem;
     font-weight: 600;
-    line-height: 17px;
-    letter-spacing: 2px;
+    line-height: 1.6;
+    letter-spacing: 0.125rem;
 }
 
 .info-tooltips {

ux.symfony.com/assets/images/icons/arrow-up.svg

@@ -11,4 +11,24 @@ $n-800: #262626;
 $n-900: #0D0D0D;
 $red: #FB4040;
 $yellow: #FBC640;
-$green: #84DE2C;
+$green: #84DE2C;
+
+
+
+
+@at-root :root {
+
+  // Borders
+  --border-radius-small: .5rem;
+  --border-radius: 1rem;
+  --border-radius-large: 1.5rem;
+  --border-color: #{$n-100};
+
+  // Spaces
+  --space-smaller: .5rem;
+  --space-small: .75rem;
+  --space-regular: 1rem;
+  --space-large: 1.5rem;
+  --space-larger: 2rem;
+
+}

ux.symfony.com/assets/images/icons/chevron-down.svg

@@ -9,6 +9,9 @@
 @import './highlight';
 @import './live_demos';
 
+@import './components/Icon';
+@import './components/ComponentBox';
+
 body {
     font-family: Inter;
     font-size: 16px;

ux.symfony.com/assets/images/icons/circle-check.svg

@@ -0,0 +1,133 @@
+.ComponentBox {
+  --space-large: 1.5rem;
+
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  display: flex;
+  gap: var(--space-large);
+  padding: var(--space-large);
+  position: relative;
+  place-self: stretch;
+  background: rgba(255, 255, 255, .98);
+  transition:
+          border-color 750ms ease-in-out,
+          transform 750ms ease-in-out;
+
+  &:hover {
+    transition:
+            border-color 200ms ease-in-out,
+            transform 200ms ease-in-out;
+    border-color: rgba(230, 222, 222, 0.8);
+    transform: translateY(-.25rem);
+  }
+}
+
+.ComponentBox::before {
+  content: "";
+  position: absolute;
+  inset: .25rem 0 -.25rem 0;
+  border-radius: var(--border-radius);
+  opacity: 0;
+  filter: blur(.75rem);
+  transform: translateZ(-1em);
+  background: var(--gradient);
+  transition: opacity 600ms ease-in-out;
+  z-index: -1;
+}
+.ComponentBox:hover::before {
+  transition: opacity 250ms ease-in-out;
+  opacity: .25;
+  z-index: -1;
+}
+
+.ComponentBox::after {
+  content: "";
+  position: absolute;
+  inset: 0 0;
+  background: #fff;
+  border-radius: var(--border-radius);
+  z-index: -1;
+  transition: opacity 600ms ease-in-out;
+  opacity: .95;
+}
+.ComponentBox:hover::after {
+  transition: opacity 250ms ease-in-out;
+  opacity: .99;
+  z-index: -1;
+}
+
+
+.ComponentBox_logo {
+  --logo-size: 6rem;
+
+  background: var(--gradient);
+  width: var(--logo-size);
+  height: var(--logo-size);
+  border-radius: var(--border-radius-large);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  img {
+    width: calc(0.4 * var(--logo-size));
+    height: auto;
+    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0));
+    transition:
+            filter 600ms ease-in-out,
+            transform 600ms ease-in-out;
+
+    .ComponentBox:hover & {
+      filter: drop-shadow(0 .25rem 1rem rgba(0, 0, 0, .3));
+      transform: scale(1.05);
+      transition:
+            filter 250ms ease-in-out,
+            transform 250ms ease-in-out;
+    }
+
+  }
+}
+
+.ComponentBox_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+}
+
+.ComponentBox_title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: .75rem;
+}
+
+.ComponentBox_link {
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0 0;
+    z-index: 40;
+  }
+}
+
+.ComponentBox_arrow {
+  color: gray;
+  font-size: 1.5rem;
+  opacity: .5;
+  transition: opacity 600ms ease-in-out;
+  .ComponentBox:hover & {
+    transition: opacity 250ms ease-in-out;
+    opacity: 1;
+  }
+}
+
+.ComponentBox_description {
+  p {
+    line-height: 1.4;
+  }
+
+  :last-child {
+    margin-bottom: 0;
+  }
+}