minor #1127 [Site] Font optimization (3/3) (smnandre)

weaverryan · weaverryan · commit d15c67ea80ea · 2023-09-22T08:45:51.000-04:00
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Font optimization (3/3) | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | License | MIT Last PR on the website fonts * load title font (Ubuntu & Playfair) from jsDeliver * use local font if installed (+ fixed missing ``code`` tags and compress the homepage hero image) Commits ------- 2cad60f [Site] Font optimization (3/3)
diff --git a/ux.symfony.com/assets/images/background_homepage.png b/ux.symfony.com/assets/images/background_homepage.png
diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss
@@ -54,6 +54,7 @@
 @import "../../vendor/twbs/bootstrap/scss/utilities/api";
 
 // Base
+@import "app/font";
 @import "app/html";
 @import "app/root";
 @import "app/typography";
diff --git a/ux.symfony.com/assets/styles/app/_font.scss b/ux.symfony.com/assets/styles/app/_font.scss
@@ -0,0 +1,33 @@
+/* ubuntu-latin-500-normal */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src:  local("Ubuntu Medium"),
+        local("Ubuntu-Medium"),
+        url("https://cdn.jsdelivr.net/npm/@fontsource/ubuntu@5.0.8/files/ubuntu-latin-500-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;
+}
+/* ubuntu-latin-700-normal */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:  local("Ubuntu Bold"),
+        local("Ubuntu-Bold"),
+        url("https://cdn.jsdelivr.net/npm/@fontsource/ubuntu@5.0.8/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/playfair-display@5.0.12/files/playfair-display-latin-700-italic.woff2") format('woff2');
+}
diff --git a/ux.symfony.com/assets/styles/app/_root.scss b/ux.symfony.com/assets/styles/app/_root.scss
@@ -14,7 +14,8 @@
   --space-larger: 2rem;
 
   // Fonts
-  //  --font-family-title: "Ubuntu";
+  --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;
 
diff --git a/ux.symfony.com/assets/styles/app/_typography.scss b/ux.symfony.com/assets/styles/app/_typography.scss
@@ -21,18 +21,10 @@ h2.ubuntu {
   letter-spacing: -2px;
 }
 
-h2.playfair {
-  font-size: 38px;
-  font-style: italic;
-  font-weight: 700;
-  line-height: 51px;
-  letter-spacing: -2px;
-}
-
 h3, a.component-title {
-  font-family: Ubuntu;
+  font-family: var(--font-family-title);
+  font-weight: 700;
   font-size: 28px !important;
-  font-weight: 700 !important;
   line-height: 32px !important;
   letter-spacing: -1px;
   color: #0A0A0A;
@@ -63,27 +55,27 @@ h4.ubuntu {
 }
 
 .ubuntu-header {
-  font-family: Ubuntu;
-  font-size: 24px;
+  font-family: var(--font-family-title);
   font-weight: 700;
+  font-size: 24px;
   line-height: 24px;
   letter-spacing: -1px;
   text-decoration: none;
 }
 
 .ubuntu-title {
-  font-family: Ubuntu;
-  font-size: 19px;
+  font-family: var(--font-family-title);
   font-weight: 700;
+  font-size: 19px;
   line-height: 22px;
   letter-spacing: -0.668767511844635px;
 }
 
 .eyebrows {
   text-transform: uppercase;
   font-family: var(--font-family-text);
-  font-size: 0.7rem;
   font-weight: 600;
+  font-size: 0.7rem;
   line-height: 1.6;
   letter-spacing: 0.125rem;
 }
@@ -108,12 +100,6 @@ h4.ubuntu {
     letter-spacing: -1px;
   }
 
-  h2.playfair {
-    font-size: 28px;
-    line-height: 37px;
-    letter-spacing: -1px;
-  }
-
   h3, a.component-title {
     font-size: 22px;
     line-height: 25px;
diff --git a/ux.symfony.com/assets/styles/components/_PackageHeader.scss b/ux.symfony.com/assets/styles/components/_PackageHeader.scss
@@ -1,6 +1,11 @@
 .PackageHeader {
   h1 {
     text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
+
+    em {
+      font-family: var(--font-family-decorative);
+      padding-inline-start: .5rem;
+    }
   }
 
   .AppHeader + * &  {
@@ -13,9 +18,9 @@
   }
 
   .nav-options {
-    font-family: Ubuntu;
-    font-size: 15px;
+    font-family: var(--font-family-title);
     font-weight: 700;
+    font-size: 15px;
     line-height: 20px;
     letter-spacing: 0px;
     color: #fff;
diff --git a/ux.symfony.com/assets/styles/components/_Terminal.scss b/ux.symfony.com/assets/styles/components/_Terminal.scss
@@ -48,6 +48,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     padding-inline-start: .25rem;
+
+    code {
+        font-size: inherit;
+        opacity: .8;
+    }
 }
 
 .Terminal_controls {
@@ -58,8 +63,8 @@
 }
 .Terminal_controls span {
     display: inline-block;
-    width: .75rem;
-    height: .75rem;
+    width: .65rem;
+    height: .65rem;
     border-radius: 50%;
 
     &.red {
@@ -71,8 +76,13 @@
     &.green {
         background: $green;
     }
+    [data-bs-theme="dark"] & {
+        opacity: .85;
+        filter: grayscale(.4);
+    }
 }
 
+
 .Terminal_body {
     background-color: $n-800;
     height: 100%;
diff --git a/ux.symfony.com/assets/styles/utilities/_font.scss b/ux.symfony.com/assets/styles/utilities/_font.scss
@@ -1,9 +1,9 @@
 .ubuntu {
-  font-family: Ubuntu;
+  font-family: var(--font-family-title);
 }
 
 .playfair {
-  font-family: Playfair Display;
+  font-family: var(--font-family-decorative);
 }
 
 .font-title {
diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig
@@ -10,9 +10,8 @@
         <link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="color-scheme" content="light dark">
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" />
         {% block stylesheets %}
-            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700i|Ubuntu:400,700&display=swap">
             {{ ux_controller_link_tags() }}
             <link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
         {% endblock %}
diff --git a/ux.symfony.com/templates/components/CodeBlock.html.twig b/ux.symfony.com/templates/components/CodeBlock.html.twig
@@ -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">
-            <a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title">{{ filename }}</a>
+            <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 }}" />
             </div>
diff --git a/ux.symfony.com/templates/components/Terminal.html.twig b/ux.symfony.com/templates/components/Terminal.html.twig
@@ -9,8 +9,8 @@
         </div>
     </div>
     <div class="Terminal_body">
-        <pre class="Terminal_content ps-4 pt-3" style="padding-bottom: {{ bottomPadding }}px; height: {{ height }}">
+        <pre class="Terminal_content ps-4 pt-3" style="padding-bottom: {{ bottomPadding }}px; height: {{ height }}"><code>
             {{- this.process(block('content'))|raw -}}
-        </pre>
+        </code></pre>
     </div>
 </div>
diff --git a/ux.symfony.com/templates/ux_packages/autocomplete.html.twig b/ux.symfony.com/templates/ux_packages/autocomplete.html.twig
@@ -7,7 +7,7 @@
     } %}
         {% block title_header %}
             Ajax-Powered Autocomplete
-            <span class="playfair ps-2">&lt;select&gt;</span>
+            <em>&lt;select&gt;</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/chartjs.html.twig b/ux.symfony.com/templates/ux_packages/chartjs.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Charts from PHP'
     } %}
         {% block title_header %}
-            Render beautiful graphs with
-            <span class="playfair ps-2">chart.js</span>
+            Render beautiful graphs with <em>chart.js</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/cropperjs.html.twig b/ux.symfony.com/templates/ux_packages/cropperjs.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Craft the perfect image'
     } %}
         {% block title_header %}
-            Crop Photos with
-            <span class="playfair ps-2">Cropper.js</span>
+            Crop Photos with <em>Cropper.js</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/dropzone.html.twig b/ux.symfony.com/templates/ux_packages/dropzone.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Styled Upload Zone'
     } %}
         {% block title_header %}
-            Native Upload Dropzone
-            <span class="playfair ps-2">with style</span>
+            Native Upload Dropzone <em>with style</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/form-collection.html.twig b/ux.symfony.com/templates/ux_packages/form-collection.html.twig
diff --git a/ux.symfony.com/templates/ux_packages/lazy-image.html.twig b/ux.symfony.com/templates/ux_packages/lazy-image.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Images that Zoom',
     } %}
         {% block title_header %}
-            Load fast with
-            <span class="playfair ps-2">Lazy Images</span>
+            Load fast with <em>Lazy Images</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/live_component.html.twig b/ux.symfony.com/templates/ux_packages/live_component.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Reactive Twig Templates'
     } %}
         {% block title_header %}
-            An Interactive UI
-            <span class="playfair ps-2">entirely built in Twig</span>
+            An Interactive UI <em>entirely built in Twig</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/notify.html.twig b/ux.symfony.com/templates/ux_packages/notify.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Native Browser Notifications'
     } %}
         {% block title_header %}
-            Notify users from
-            <span class="playfair ps-2">inside PHP</span>
+            Notify users from <em>inside PHP</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/react.html.twig b/ux.symfony.com/templates/ux_packages/react.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'React Component Rendering'
     } %}
         {% block title_header %}
-            Render React from
-            <span class="playfair ps-2">inside Twig</span>
+            Render React from <em>inside Twig</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/svelte.html.twig b/ux.symfony.com/templates/ux_packages/svelte.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Svelte Component Rendering'
     } %}
         {% block title_header %}
-            Render Svelte from
-            <span class="playfair ps-2">inside Twig</span>
+            Render Svelte from <em>inside Twig</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/swup.html.twig b/ux.symfony.com/templates/ux_packages/swup.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Slick Page Transitions'
     } %}
         {% block title_header %}
-            Ajax Page Transitions with
-            <span class="playfair ps-2">Swup</span>
+            Ajax Page Transitions with <em>Swup</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/toggle_password.html.twig b/ux.symfony.com/templates/ux_packages/toggle_password.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Switch between password & text'
     } %}
         {% block title_header %}
-            From password to text
-            <span class="playfair ps-2">&amp; vice versa</span>
+            From password to text <em>&amp; vice versa</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/translator.html.twig b/ux.symfony.com/templates/ux_packages/translator.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'JavaScript-enabled Translation'
     } %}
         {% block title_header %}
-            Translations directly imported in
-            <span class="playfair ps-2">JavaScript</span>
+            Translations directly imported in <em>JavaScript</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/turbo.html.twig b/ux.symfony.com/templates/ux_packages/turbo.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Speed of an SPA'
     } %}
         {% block title_header %}
-            Turbo your
-            <span class="playfair ps-2">website</span>
+            Turbo your <em>website</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/twig-component.html.twig b/ux.symfony.com/templates/ux_packages/twig-component.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Object-Oriented Templates'
     } %}
         {% block title_header %}
-            PHP Classes that render:
-            <span class="playfair ps-2">Twig Components</span>
+            PHP Classes that render: <em>Twig Components</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/typed.html.twig b/ux.symfony.com/templates/ux_packages/typed.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'A Library that Types'
     } %}
         {% block title_header %}
-            Typed brings text
-            <span class="playfair ps-2">to life</span>
+            Typed brings text <em>to life</em>
         {% endblock %}
 
         {% block sub_content %}
diff --git a/ux.symfony.com/templates/ux_packages/vue.html.twig b/ux.symfony.com/templates/ux_packages/vue.html.twig
@@ -6,8 +6,7 @@
         eyebrowText: 'Vue.js Component Rendering'
     } %}
         {% block title_header %}
-            Render Vue.js from
-            <span class="playfair ps-2">inside Twig</span>
+            Render Vue.js from <em>inside Twig</em>
         {% endblock %}
 
         {% block sub_content %}

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`.ubuntu {`
`2`		`- font-family: Ubuntu;`
	`2`	`+ font-family: var(--font-family-title);`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.playfair {`
`6`		`- font-family: Playfair Display;`
	`6`	`+ font-family: var(--font-family-decorative);`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.font-title {`