Fix @font-face, make black black, add Mona Sans as default font

CHANGELOG.md

@@ -3,6 +3,11 @@
 * Demo: Prevent spaces in theme-info link
 * Fix newtheme-popos.sh script location detection
 * Check if pll_translatable is set
+* Add more clear placeholder to site-header.scss
+* Fix gulp task stripping out @font-face declaration
+* Remove postcss-discard-unused and postcss-minify-font-values
+* Make black truly black
+* Add Mona Sans variable font
 
 ### 9.4.5: 2024-10-25
 

gulp/tasks/devstyles.js

@@ -11,10 +11,8 @@ const autoprefixer = require('autoprefixer');
 const calcFunction = require('postcss-calc');
 const colormin = require('postcss-colormin');
 const discardEmpty = require('postcss-discard-empty');
-const discardUnused = require('postcss-discard-unused');
 const mergeLonghand = require('postcss-merge-longhand');
 const mergeAdjacentRules = require('postcss-merge-rules');
-const minifyFontValues = require('postcss-minify-font-values');
 const minifyGradients = require('postcss-minify-gradients');
 const normalizePositions = require('postcss-normalize-positions');
 const normalizeUrl = require('postcss-normalize-url');
@@ -24,37 +22,23 @@ const config = require('../config.js');
 
 function devstyles() {
   return src(config.styles.src)
-
-    // Try to inject CSS first
     .pipe(bs.stream())
-
-    // Init source maps
     .pipe(sourcemaps.init())
-
-    // Compile SCSS synchronously
     .pipe(sass.sync(config.styles.opts.development))
-
-    // Run PostCSS plugins
     .pipe(postcss([
       autoprefixer(),
       colormin(),
       calcFunction(),
       discardEmpty(),
-      discardUnused(),
       mergeLonghand(),
       mergeAdjacentRules(),
-      minifyFontValues(),
       minifyGradients(),
       normalizePositions(),
       normalizeUrl(),
       zIndex(),
       uniqueSelectors()
     ]))
-
-    // Write source maps
     .pipe(sourcemaps.write())
-
-    // Save expanded version for development and for BS to inject
     .pipe(dest(config.styles.development))
 }
 

gulp/tasks/prodstyles.js

@@ -13,7 +13,6 @@ const discardEmpty = require('postcss-discard-empty');
 const discardUnused = require('postcss-discard-unused');
 const mergeLonghand = require('postcss-merge-longhand');
 const mergeAdjacentRules = require('postcss-merge-rules');
-const minifyFontValues = require('postcss-minify-font-values');
 const minifyGradients = require('postcss-minify-gradients');
 const normalizePositions = require('postcss-normalize-positions');
 const normalizeUrl = require('postcss-normalize-url');
@@ -37,10 +36,8 @@ function prodstyles() {
       colormin(),
       calcFunction(),
       discardEmpty(),
-      discardUnused(),
       mergeLonghand(),
       mergeAdjacentRules(),
-      minifyFontValues(),
       minifyGradients(),
       normalizePositions(),
       normalizeUrl(),

package.json

@@ -42,10 +42,8 @@
     "postcss-calc": "^8.2.4",
     "postcss-colormin": "^5.3.0",
     "postcss-discard-empty": "^5.1.1",
-    "postcss-discard-unused": "^5.1.0",
     "postcss-merge-longhand": "^5.1.7",
     "postcss-merge-rules": "^5.1.3",
-    "postcss-minify-font-values": "^5.1.0",
     "postcss-minify-gradients": "^5.1.1",
     "postcss-normalize-positions": "^5.1.1",
     "postcss-normalize-url": "^5.1.0",

sass/gutenberg/variables/_typography.scss

@@ -1,7 +1,7 @@
 // Needed typography exceptions for Gutenberg
 
 // Variable fonts
-@include variablefont('Inter', '../../../../../content/themes/air-light/fonts/inter-variablefont', 1 999);
+@include variablefont('Mona Sans', '../../../../../content/themes/air-light/fonts/monasansvf', 1 999);
 
 // Regular fonts
 // @include font('Inter', '../../../../../content/themes/air-light/fonts/inter-400', 400);

sass/helpers/_variablefont.scss

@@ -3,11 +3,10 @@
 // Helper mixin for variable fonts
 @mixin variablefont($family, $src, $weight: normal, $style: normal) {
   @font-face {
-    // @link https://css-tricks.com/almanac/properties/f/font-display/
     font-display: auto;
     font-family: $family;
     font-style: $style;
     font-weight: $weight;
-    src: url('#{$src}.woff2') format('woff2-variations'), url('#{$src}.ttf') format('truetype-variations');
+    src: url('#{$src}.woff2') format('woff2'), url('#{$src}.woff') format('woff');
   }
 }

sass/layout/_site-header.scss

@@ -38,13 +38,11 @@
 
 .site-main::after {
   align-items: center;
-  // stylelint-disable-next-line
-  background-image: linear-gradient(var(--color-black), var(--color-science-blue)), linear-gradient(var(--color-black), var(--color-science-blue));
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
   background-size: 3px 100%;
-  border-bottom: 3px solid var(--color-science-blue);
-  border-top: 3px solid var(--color-black);
+  // stylelint-disable-next-line
+  border: 6px solid var(--color-black);
   color: var(--color-black);
   content: 'Build your website here! (Remove this bit in sass/layout/_site-header.scss)';
   display: flex;
@@ -58,7 +56,6 @@
   margin-top: calc(var(--spacing-container-padding-block) * 2);
   // stylelint-disable-next-line
   max-width: $width-grid-base - 40px;
-  opacity: .7;
   order: -1;
   padding: 4rem;
   position: relative;

sass/variables/_colors.scss

@@ -5,8 +5,7 @@
 // ------------------------------------------------------
 :root {
   // Brand color pool
-  --color-black: #222;
-  --color-black-rock: #2b303c;
+  --color-black: #000;
   --color-blue-chalk: #ece6f2;
   --color-east-bay: #545773;
   --color-pattens-blue: #eaf1f8;

sass/variables/_typography.scss

@@ -2,7 +2,7 @@
 // Remember to add these also to gutenberg/variables/_typography.scss with correct paths
 
 // Variable fonts
-@include variablefont('Inter', '../../fonts/inter-variablefont', 1 999);
+@include variablefont('Mona Sans', '../../fonts/monasansvf', 1 999);
 
 // Regular fonts
 // @include font('Inter', '../../fonts/inter-400', 400);
@@ -15,11 +15,11 @@
 // CSS Variables for responsive fonts
 :root {
   // Defined font families, replace these with your own
-  --typography-family-inter: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
+  --typography-family-main: 'Mona Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
 
   // Contexts where the fonts are used, replace this with the families defined above
-  --typography-family-paragraph: var(--typography-family-inter);
-  --typography-family-heading: var(--typography-family-inter);
+  --typography-family-paragraph: var(--typography-family-main);
+  --typography-family-heading: var(--typography-family-main);
 
   // Heading font sizes
   --typography-size-hero: 52px;