Issue #3312943 by philip_stier, jldust, pixelwhip, b-ry: Update Frontend Tooling

.babelrc

-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "corejs": 3,
-        "shippedProposals": true,
-        "useBuiltIns": "usage"
-      }
-    ]
-  ]
-}

.browserslistrc

-last 4 version
+last 4 versions
 > .5%
 not IE 10
 not IE_mob 10

.env-example

-BS_PROXY='drupalvm.test'
+BS_PROXY='example.lndo.site'
+BS_BROWSER='google chrome'
\ No newline at end of file

.nvmrc

-12.13.0
+16.17.0

.postcssrc.js

-const postcssPresetEnv = require('postcss-preset-env');
-const postcssInlineSvg = require('postcss-inline-svg');
-const pxtorem = require('postcss-pxtorem');
-const postcssSvgo = require('postcss-svgo');
-const tailwindcss = require('tailwindcss');
-
-// Encode SVG files.
-function encode(code) {
-  return code
-    .replace(/\%/g, '%25')
-    .replace(/\</g, '%3C')
-    .replace(/\>/g, '%3E')
-    .replace(/\s/g, '%20')
-    .replace(/\!/g, '%21')
-    .replace(/\*/g, '%2A')
-    .replace(/\'/g, '%27')
-    .replace(/\"/g, '%22')
-    .replace(/\(/g, '%28')
-    .replace(/\)/g, '%29')
-    .replace(/\;/g, '%3B')
-    .replace(/\:/g, '%3A')
-    .replace(/\@/g, '%40')
-    .replace(/\&/g, '%26')
-    .replace(/\=/g, '%3D')
-    .replace(/\+/g, '%2B')
-    .replace(/\$/g, '%24')
-    .replace(/\,/g, '%2C')
-    .replace(/\//g, '%2F')
-    .replace(/\?/g, '%3F')
-    .replace(/\#/g, '%23')
-    .replace(/\[/g, '%5B')
-    .replace(/\]/g, '%5D');
-}
-
-module.exports = (ctx) => ({
-  plugins: [
-    tailwindcss(),
-    postcssInlineSvg({
-      paths: ['./images'],
-      encode,
-    }),
-    postcssSvgo(),
-    pxtorem({
-      propList: ['--font*', 'font', 'font*'],
-    }),
-    postcssPresetEnv({
-      stage: 1,
-      features: {
-        // Custom properties get poyfilled for IE so no need to process them.
-        'custom-properties': false,
-        'custom-media-queries': {
-          importFrom: ['./libraries/global/settings/media-query.css'],
-        },
-      },
-    }),
-  ],
-});

.prettierrc.yml

-trailingComma: "es5"
-tabs: false
-tabWidth: 2
-semi: true
-singleQuote: true
-quoteProps: "as-needed"
-bracket-spacing: true

README.md

+CONTENTS OF THIS FILE
+---------------------
+
+* About
+* Requirements
+* Installation
+* Use / Commands
+* Configuration
+* Maintainers
+
+ABOUT
+-----
+
+The files and directories of this theme are meant to use components as the base
+philosophy for building websites.
+
+All the build tools are set up in a way so that developers working on this project
+are utilizing the same global assets and versions, file compilation is easy to get
+started with and compilation itself is fast and efficient.
+
+REQUIREMENTS
+------------
+
+This theme and it's build tools require the following local development tools:
+
+* [Node.js](https://nodejs.org/en/)
+* [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+* [NVM](https://github.com/nvm-sh/nvm/blob/master/README.md)
+
+INSTALLATION
+------------
+
+1. Before installing any node modules, first be sure you are using the
+defined version of Node for this project. The following command requires the 
+tool NVM Node package manager. If you do not have the recommended version of Node
+installed on your computer, NVM will prompt you to download and install the 
+correct version -- `nvm use`
+2. Once you are using the recommended version of Node, you may install all Node
+modules defined in the package.json file -- `npm install`
+3. To correctly utilize Browsersync, copy the `.env-example` file and rename it `.env`. Within this file
+specify both your local website address and default browser.
+
+USE / COMMANDS
+--------------
+
+**Local Development**
+
+In order to watch file changes and compile files during local development, input
+the following command and allow both Gulp and Webpack to watch for changes and/or
+additions to the libraries directory. -- `npm run watch`
+
+**Production**
+
+When local development is finished and ready to be pushed to a remote environment,
+build and minify all files, readying all assets for production. In order to minify
+and optimize all files and assets, run the following command. -- `npm run build`
+
+CONFIGURATION
+-------------
+
+**Browser Support:** This theme uses PostCSS and Babel to provide cross-browser support for newer CSS
+and JS features. Both of these tools rely upon the following files for configuration and settings.
+
+- `postcss.config.js` - This file contains all settings, overrides and extra plugins for the PostCSS
+module, including PostCSS Preset Env and PostCSS Inline SVG, as detailed below.
+- `babel.config.js` - This file contains all settings, overrides and extra plugins for the Babel
+module, as well as settings for caching JavaScript in Babel.
+- `.browserslistrc` - This file contains instructions to other modules like Babel and PostCSS on what
+browsers to support when transpiling frontend assets. Currently, Prototype is supporting the last 4
+versions (`last 4 versions`) of any browser that more than 0.5% of the population is using (`> .5%`)
+and am also disregarding Internet Explorer (`not IE 10`, `not IE_mob 10`).
+
+**PostCSS Inline SVG**  
+Prototype now offers an easy way to inject inline SVG's into your CSS. In order to take advantage of
+the PostCSS Inline SVG plugin, simple utilize the predefined function from this plugin, with path to
+the SVG and any inline styles that you need to add.
+
+Example: `background: svg-load('image.svg', fill=#000000);`
+
+**Resources**
+- [PostCSS](https://github.com/postcss/postcss)
+- [PostCSS Preset Env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)
+- [PostCSS Inline SVG](https://github.com/TrySound/postcss-inline-svg)
+- [Babel](https://babeljs.io/)
+
+
+MAINTAINERS
+-----------
+
+* Philip Stier - philip@aten.io
+* Jennifer Dust - jennifer@aten.io
+* Bryon Urbanec - bryon@aten.io
+* John Ferris - john@aten.io
\ No newline at end of file

README.txt

-Prototype D8
-------------
-
-What is it?
-A component-based theme for Drupal by Aten Design Group
-
-Requirements
- * Components module version 1.x-dev (https://www.drupal.org/project/components)
- * This patch (https://www.drupal.org/files/issues/2707849-8.patch)
-# Tooling
-This contains the front-end compiling tools needed for this theme.  It is recommended to run the development commands while working locally.
-
-If your project utilizes CI, it is recommended all build artifacts get ignored from the git repository. These should be generated in as part of the artifact build process. There is no need to run a minified build command locally for any other reason than testing.
-
-## Installation
-Before proceeding with the installation, it is recommended that you use [nvm](https://github.com/creationix/nvm) to help ensure everyone on the project is using a consistent version of node.js.
-
-*note: All of the following commands should be run from the theme directory*
-
-1. If you don't have nvm installed, follow these [instructions](https://github.com/creationix/nvm#install-script). Windows users may need to use [nvm-windows](https://github.com/coreybutler/nvm-windows) instead.
-1. `nvm install` This will install the version of Node that's defined in `.nvmrc`
-1. `nvm use` This will set the correct version of node.js by checking this project's `.nvmrc` file.
-1. `npm install` This installs all the correct packages for this project.
-
-*note: nvm should be the only global dependencies needed for this project*
-
-
-## Usage
-At the beginning of each development session, it's recommended to run `nvm use` to ensure you are developing with the correct version of node.
-
-```
-nvm use
-```
-
-
-### Development
-To compile CSS and JS run the following command.
-
-```
-npm run dev
-```
-
-This will automatically start a [Browsersync](https://browsersync.io/) proxy server which will watch the theme CSS and JS source files, build the corresponding artifacts and inject them into the browser so you don't need to manually refresh. See the Browsersync documentation for available options and `gulpfile.js/browsersync.js` for different methods of passing this configuration in.
-
-If there is an option you might need to override, it's likely the domain for your local site that you would like to proxy. By default Browsersync is configured to proxy `local.test`. If you need to change it, you can create a `.env` file in the `prototype` theme directory. See the `.env-example` file.
-
-Example `.env` file
-
-```
-BS_PROXY='drupalvm.test'
-```
-
-To cancel the Browsersync server, type `Ctrl+c`.
-
-The `dev` command should cover everything you need and it's pretty fast. The following additional commands are provided only as a convenience and are unlikely needed.
-
-### Build
-The following command is what will be run when the theme assets are built for production. This will remove sourcemaps and execute webpack in production mode.
-
-```
-npm run build
-```
-
-### CSS
-To compile CSS run the following command.
-
-```
-npm run css
-```
-
-To automatically compile CSS when files are changed, run:
-
-```
-npm run css:watch
-```
-
-
-### JS
-To compile JS run the following command.
-
-```
-npm run js
-```
-
-To automatically compile JS when files are changed, run:
-
-```
-npm run js -- --watch
-```
-
-To cancel the watch process, type `Ctrl+c`
-
-
-### Icons
-SVG icons can be inlined and colored via the [postcss-svg-inline](https://github.com/TrySound/postcss-inline-svg) plugin.
-
-Example usage:
-```
-a {
-  background-image: svg-load("img/arrow.svg", fill=#000, stroke=#fff);
-}
-```
-
-The above will search for `img/arrow.svg` within `prototype/images` and base64 encode it directly in the stylesheet.
-
-## Configuration
-
-### Browser Support
-This theme uses PostCSS and Babel to provide cross-browser support for newer CSS and JS features. The level of support for both can be configured in `.browserlistrc`. See [https://www.npmjs.com/package/browserslist]
-
-### Babel
-Customizing Babel's plugins and presets can be done in `.babelrc`.
-
-### Webpack
-Customizing the Webpack build process can be done in `webpack.config.js`.
-
-### Prettier
-Prettier can be configured to automatically format your JS and CSS files when saved. This can be further controlled in `.prettierrc.yml`
-
-## Media Queries
-Both custom media declarations and media range queries are supported via PostCSS.
-
-```
-@custom-media --mobile (width < 768px);
-
-@media (--mobile) {
-  /* ... */
-}
-```
-
-`@custom-media` declarations added to `libraries/global/settings.media-query.css` will be available across all stylesheets.

babel.config.js

+/*
+ * Babel Configurations and Plugins
+ * This is the configuration file, using the JavaScript version of configurations for Babel, which includes access
+ * to specific API variables and settings. All of which can be reviewed at https://babeljs.io/docs/en/config-files
+ * - 01 - Exports
+ */
+
+
+/*------------------------------------*\
+  01 - Exports
+  Although Babel does not inherently require any other plugins or settings in order to operate, other plugins are
+  used to make the build step of JavaScript files better and allow developers access to additional tools and functions.
+
+  * Babel Preset Env - https://babeljs.io/docs/en/babel-preset-env
+    - Plugin Pack for Babel which leverages a list of features and applies plugins, so you can use those new features
+      without having to worry about browser support.
+\*------------------------------------*/
+
+'use strict'
+
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = [
+    [
+      "@babel/preset-env", {
+        "corejs": 3, // https://babeljs.io/docs/en/babel-preset-env#corejs
+        "shippedProposals": true, // https://babeljs.io/docs/en/babel-preset-env#shippedproposals
+        "useBuiltIns": "usage", // https://babeljs.io/docs/en/babel-preset-env#usebuiltins-usage
+      }
+    ]
+  ]
+
+  const plugins = [] // Additional Babel plugins can be added here
+
+  return {
+    presets,
+    plugins
+  }
+}
\ No newline at end of file

build/components/breadcrumbs/breadcrumbs.component.css

-.breadcrumb__list {
-  list-style: none;
-  margin-left: 0;
-  padding-left: 0;
-}
-
-.breadcrumb__list > li {
-  display: inline-block;
-}
-
-.breadcrumb__separator {
-  color: var(--border-color);
-}
\ No newline at end of file

build/components/card/card.js

-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t){}]);
\ No newline at end of file

build/components/field/field.component.css

-.field__label {
-  font-weight: var(--font-weight-bold);
-}
\ No newline at end of file

build/components/header/header.css

-@media (max-width: 767px) {
-  .js-prevent-scroll {
-    position: fixed;
-    height: 100%;
-    overflow: hidden;
-    width: 100%;
-  }
-}
-
-.header {
-  background-color: #fff;
-  height: 60px;
-  position: relative;
-  z-index: 2;
-}
-
-.header__inner {
-  background-color: #fff;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-          flex-direction: row;
-  flex-wrap: nowrap;
-  -webkit-box-pack: justify;
-          justify-content: space-between;
-}
-
-@media (max-width: 1279px) {
-  .header__inner {
-    -webkit-box-align: center;
-            align-items: center;
-    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  }
-}
-
-.header__logo {
-  -webkit-box-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: center;
-          justify-content: center;
-  margin: 12px 0;
-  padding: 0;
-  width: 160px;
-  z-index: 1;
-}
-
-.header__logo a,
-.header__logo img {
-  display: block;
-  width: 100%;
-}
-
-@media (1280px <= width) {
-  .header__logo {
-    width: 180px;
-    margin: 24px 0;
-  }
-}
-
-.header__site-navigation {
-  position: fixed;
-}
-
-@media (max-width: 1279px) {
-  .header__site-navigation {
-    background-color: #f0eff0;
-    border-top: 1px solid var(--border-color);
-    width: 100%;
-    top: 60px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-}
-
-@media (1280px <= width) {
-  .header__site-navigation {
-    -webkit-box-align: end;
-            align-items: flex-end;
-    display: -webkit-box;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-            flex-direction: row;
-    flex-wrap: none;
-    position: relative;
-  }
-}
-
-.header__utilities {
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-          flex-direction: column;
-  height: 90px;
-  -webkit-box-pack: end;
-          justify-content: flex-end;
-  margin-bottom: 22px;
-  width: 126px;
-}
-
-@media (min-width: 1280px) and (max-width: 1439px) {
-  .header__utilities {
-    width: 90px;
-    height: 66px;
-  }
-}
-
-.nav-trigger {
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-}
-
-label[for=nav-trigger] {
-  cursor: pointer;
-  height: 30px;
-  margin: auto;
-  position: absolute;
-  right: 30px;
-  top: 18px;
-  width: 30px;
-  z-index: 2;
-}
-
-@media (768px <= width) {
-  label[for=nav-trigger] {
-    top: 1rem;
-  }
-}
-
-@media (1280px <= width) {
-  label[for=nav-trigger] {
-    display: none;
-  }
-}
-
-.nav-trigger__icon--expand {
-  opacity: 1;
-  position: absolute;
-  -webkit-transform: rotate(0) scale(1);
-      -ms-transform: rotate(0) scale(1);
-          transform: rotate(0) scale(1);
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
-
-.nav-trigger__icon--collapse {
-  margin-left: em(2px);
-  opacity: 0;
-  position: absolute;
-  -webkit-transform: rotate(-90deg) scale(0);
-      -ms-transform: rotate(-90deg) scale(0);
-          transform: rotate(-90deg) scale(0);
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
-
-@media (max-width: 1279px) {
-  .header__site-navigation {
-    opacity: 0;
-    -webkit-transform: translateY(-100%);
-        -ms-transform: translateY(-100%);
-            transform: translateY(-100%);
-    -webkit-transition: all 0.3s ease-in-out;
-    -o-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
-  }
-
-  .nav-trigger:checked ~ .header__site-navigation {
-    opacity: 1;
-    overflow-y: auto;
-    -webkit-transform: translateY(0);
-        -ms-transform: translateY(0);
-            transform: translateY(0);
-  }
-
-  .nav-trigger:checked ~ label .nav-trigger__icon--collapse {
-    opacity: 1;
-    -webkit-transform: rotate(0) scale(1);
-        -ms-transform: rotate(0) scale(1);
-            transform: rotate(0) scale(1);
-  }
-
-  .nav-trigger:checked ~ label .nav-trigger__icon--expand {
-    opacity: 0;
-    -webkit-transform: rotate(90deg) scale(0);
-        -ms-transform: rotate(90deg) scale(0);
-            transform: rotate(90deg) scale(0);
-  }
-}
\ No newline at end of file

build/components/header/header.js

-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([,,function(e,t,n){e.exports=n(3)},function(e,t){var n;(n=jQuery)(document).ready((function(){n(".js-mobile-nav-trigger").on("change",(function(e){n("body")[e.target.checked?"addClass":"removeClass"]("js-prevent-scroll")}))}))}]);
\ No newline at end of file

build/components/messages/messages.component.css

-.messages {
-  -webkit-box-align: stretch;
-          align-items: stretch;
-  border-radius: var(--size-radius, 0);
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: stretch;
-          justify-content: stretch;
-}
-
-.messages:not(:last-child) {
-  margin-bottom: 2em;
-}
-
-.messages__content {
-  font-size: var(--font-size-small);
-  padding: 1em;
-}
-
-.messages__content ul {
-  margin: 0;
-  padding-left: 3em;
-}
-
-.messages__content a {
-  text-decoration: underline;
-}
-
-.messages__icon {
-  -webkit-box-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-flex: 0;
-          flex: none;
-  -webkit-box-pack: center;
-          justify-content: center;
-  width: 3em;
-}
-
-.messages__icon > .icon {
-  height: 1em;
-  width: 1em;
-}
-
-.messages__icon svg {
-  height: 1em;
-  width: 1em;
-}
-
-.messages--full-screen {
-  -webkit-box-align: center;
-          align-items: center;
-  bottom: 0;
-  color: #fff;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: center;
-          justify-content: center;
-  left: 0;
-  margin: 0 !important;
-  padding: 4em;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  top: 0;
-  z-index: 6;
-}
-
-.messages--full-screen .messages__icon {
-  background: transparent;
-  height: 3em;
-  width: 3em;
-}
-
-.messages--full-screen .messages__icon > .icon {
-  height: 3em;
-  width: 3em;
-}
-
-.messages--full-screen .messages__icon svg {
-  height: 3em;
-  width: 3em;
-}
-
-.messages--full-screen .messages__content {
-  font-size: 2.5em;
-  line-height: 1;
-}
\ No newline at end of file

build/components/messages/messages.theme.css

-.messages__content {
-  color: var(--color-text);
-  font-family: var(--font-family-interface);
-  background-color: rgba(255, 255, 255, 0.92);
-  -webkit-box-flex: 1;
-          flex: 1;
-}
-
-.messages__content a {
-  color: inherit;
-  font-weight: bold;
-}
-
-.messages {
-  background-color: var(--color-background);
-  border-radius: var(--size-radius);
-  overflow: hidden;
-}
-
-.messages .messages__icon {
-  background-color: var(--color-background);
-}
-
-.messages--status {
-  --color-background: var(--color-feedback-status);
-}
-
-.messages--warning {
-  --color-background: var(--color-feedback-warning);
-}
-
-.messages--error {
-  --color-background: var(--color-feedback-error);
-}
-
-.messages--full-screen {
-  background-color: var(--color-background);
-  color: #fff;
-}
-
-.messages--full-screen .messages__icon {
-  background: transparent;
-}
-
-.messages--full-screen .messages__content {
-  color: #fff;
-}
\ No newline at end of file

build/components/more-link/more-link.component.css

-.more-link {
-  font-size: var(--font-size-small);
-  display: inline-block;
-  font-weight: var(--font-weight-bold);
-  line-height: 1;
-  text-decoration: none;
-  text-transform: uppercase;
-  -webkit-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-  white-space: normal;
-}
-
-.more-link:hover .more-link__arrow, .more-link:focus .more-link__arrow {
-  -webkit-transform: translateX(0.5em);
-      -ms-transform: translateX(0.5em);
-          transform: translateX(0.5em);
-}
-
-.more-link:not(:last-child) {
-  margin-bottom: var(--space-gap);
-}
-
-.more-link__arrow {
-  display: inline-block;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-  transition: -webkit-transform 0.2s ease-out;
-  -o-transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
-  white-space: nowrap;
-}
-
-.more-link__wrapper {
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: justify;
-          justify-content: space-between;
-}
-
-.more-link__wrapper > .more-link {
-  margin-bottom: var(--space-gap);
-}
-
-.more-link__wrapper > .more-link:first-child {
-  margin-right: var(--space-gap);
-}
-
-.more-link--back:hover .more-link__arrow, .more-link--back:focus .more-link__arrow {
-  -webkit-transform: translateX(-0.5em);
-      -ms-transform: translateX(-0.5em);
-          transform: translateX(-0.5em);
-}
\ No newline at end of file

build/components/page-title/page-title.component.css

-.page-title {
-  font-size: var(--font-size-h1);
-  font-weight: var(--font-line-height-tight);
-  margin-bottom: var(--space-gap-y);
-  padding-bottom: var(--space-gap-y);
-}
-
-.page-title--small {
-  font-size: var(--font-size-display);
-}
\ No newline at end of file

build/components/pager/pager.component.css

-.pager__items {
-  margin: 0;
-  text-align: center;
-}
-
-.pager__item {
-  display: inline-block;
-  margin: 0 0.25rem;
-}
-
-.pager__item.is-active a {
-  color: #363136;
-}
-
-.pager__link {
-  text-decoration: none;
-}
-
-.pager__link:hover {
-  text-decoration: underline;
-}
\ No newline at end of file