vipassana-design-standards 0.0.37 → 1.1.0

package/dist/js/react-helpers.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VdsBootstrapThemeCssTag = VdsBootstrapThemeCssTag;
+exports.VdsBootstrapThemeJsTag = VdsBootstrapThemeJsTag;
+exports.VdsFaviconTag = VdsFaviconTag;
+exports.VdsIconAccount = VdsIconAccount;
+exports.VdsIconLocale = VdsIconLocale;
+exports.VdsIconMenu = VdsIconMenu;
+exports.VdsLogo = VdsLogo;
+var _i18n = _interopRequireDefault(require("./i18n.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function fixLocale(locale) {
+  locale = (locale || 'en').toLowerCase();
+  var mapping = {
+    zh: 'zh-HANS',
+    'zh-hans': 'zh-HANS',
+    'zh-hant': 'zh-HANT',
+    'zh-hant-hk': 'zh-HANT-HK',
+    'zh-hk': 'zh-HANT-HK',
+    'zh-cn': 'zh-HANS',
+    'zh-tw': 'zh-HANT'
+  };
+  if (mapping[locale]) locale = mapping[locale]; // zh-Hans -> zh-HANS
+  else locale = locale.split('-')[0]; // fr-CA -> fr
+  return locale;
+}
+function isRtl(locale) {
+  return ['ar', 'fa', 'he'].includes(locale);
+}
+function vdsAssetUrl(path) {
+  var localhost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  // For localhost dev, just run vscode liveserver
+  if (localhost) return "http://localhost:5500/dist/".concat(path);
+  return "https://design-standards.dhamma.org/dist/1.1.0/".concat(path);
+}
+function StylesheetLinkTag(_ref) {
+  var url = _ref.url;
+  return /*#__PURE__*/React.createElement("link", {
+    rel: "stylesheet",
+    type: "text/css",
+    href: url
+  });
+}
+function VdsFaviconTag() {
+  return /*#__PURE__*/React.createElement("link", {
+    rel: "shortcut icon",
+    type: "image/x-icon",
+    href: "https://design-standards.dhamma.org/dist/favicon.png"
+  });
+}
+function VdsBootstrapThemeCssTag(_ref2) {
+  var locale = _ref2.locale,
+    _ref2$localhost = _ref2.localhost,
+    localhost = _ref2$localhost === void 0 ? false : _ref2$localhost;
+  locale = fixLocale(locale);
+  var url = vdsAssetUrl("css/bootstrap5-theme".concat(isRtl(locale) ? '.rtl' : '', ".min.css"), localhost);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StylesheetLinkTag, {
+    url: url
+  }), ['ar', 'fa', 'gu', 'he', 'ja', 'km', 'ko', 'or', 'si', 'ta', 'te', 'th', 'zh-HANS', 'zh-HANT', 'zh-HANT-HK'].includes(locale) && /*#__PURE__*/React.createElement(StylesheetLinkTag, {
+    url: vdsAssetUrl("css/fonts-".concat(locale, ".min.css"))
+  }));
+}
+function VdsBootstrapThemeJsTag(_ref3) {
+  var _ref3$localhost = _ref3.localhost,
+    localhost = _ref3$localhost === void 0 ? false : _ref3$localhost;
+  var url = vdsAssetUrl('js/bootstrap5-theme.min.js', localhost);
+  return /*#__PURE__*/React.createElement("script", {
+    type: "text/javascript",
+    src: url
+  });
+}
+function VdsLogo(_ref4) {
+  var locale = _ref4.locale,
+    _ref4$disposition = _ref4.disposition,
+    disposition = _ref4$disposition === void 0 ? 'default' : _ref4$disposition,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? '17' : _ref4$size,
+    _ref4$tagline = _ref4.tagline,
+    tagline = _ref4$tagline === void 0 ? true : _ref4$tagline,
+    _ref4$dark = _ref4.dark,
+    dark = _ref4$dark === void 0 ? false : _ref4$dark;
+  locale = fixLocale(locale);
+  var trans = _i18n["default"][locale] || _i18n["default"].en;
+  if (disposition == 'mobile') {
+    disposition = 'left-two-lines';
+    tagline = false;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vipassana-logo",
+    "data-lang": locale,
+    "data-disposition": disposition,
+    "data-tagline": tagline,
+    "data-dark-mode": dark,
+    "data-reverse": trans.reverse,
+    style: {
+      fontSize: "".concat(size, "px")
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "logo-wheel",
+    src: "https://design-standards.dhamma.org/dist/dhamma-wheel.svg"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "logo-text"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "logo-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-start-with": trans.vipassana_meditation.charAt(0).toLowerCase()
+  }, trans.vipassana_meditation), /*#__PURE__*/React.createElement("span", {
+    className: "logo-space"
+  }, "\xA0"), /*#__PURE__*/React.createElement("span", null, trans.as_taught), /*#__PURE__*/React.createElement("span", {
+    className: "vipassana-as-taught"
+  }, trans.vipassana_as_taught)), /*#__PURE__*/React.createElement("div", {
+    className: "logo-subtitle"
+  }, trans.in_the_tradition)));
+}
+
+// Some icons from bootstrap icons, so all websites use the same
+function VdsIconLocale(_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 1.2 : _ref5$size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "".concat(size, "em"),
+    height: "".concat(size, "em"),
+    fill: "currentColor",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"
+  }));
+}
+function VdsIconAccount(_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 2.2 : _ref6$size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "".concat(size, "em"),
+    height: "".concat(size, "em"),
+    fill: "currentColor",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
+  }));
+}
+function VdsIconMenu(_ref7) {
+  var _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 1.8 : _ref7$size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "".concat(size, "em"),
+    height: "".concat(size, "em"),
+    fill: "currentColor",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+  }));
+}

package/dist/js/react-helpers.jsx

@@ -3,16 +3,16 @@ import i18n from './i18n.js'
 function fixLocale(locale) {
   locale = (locale || 'en').toLowerCase()
   const mapping = {
-    'zh': 'zh-HANS',
+    zh: 'zh-HANS',
     'zh-hans': 'zh-HANS',
     'zh-hant': 'zh-HANT',
     'zh-hant-hk': 'zh-HANT-HK',
     'zh-hk': 'zh-HANT-HK',
     'zh-cn': 'zh-HANS',
-    'zh-tw': 'zh-HANT',
+    'zh-tw': 'zh-HANT'
   }
   if (mapping[locale]) locale = mapping[locale] // zh-Hans -> zh-HANS
-  else locale = locale.split("-")[0] // fr-CA -> fr
+  else locale = locale.split('-')[0] // fr-CA -> fr
   return locale
 }
 
@@ -24,79 +24,143 @@ function vdsAssetUrl(path, localhost = false) {
   // For localhost dev, just run vscode liveserver
   if (localhost) return `http://localhost:5500/dist/${path}`
 
-  return `https://design-standards.dhamma.org/dist/0.0.37/${path}`
+  return `https://design-standards.dhamma.org/dist/1.1.0/${path}`
 }
 
-function StylesheetLinkTag({url}) {
+function StylesheetLinkTag({ url }) {
   return <link rel="stylesheet" type="text/css" href={url} />
 }
 
 export function VdsFaviconTag() {
-  return <link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png" />
+  return (
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="https://design-standards.dhamma.org/dist/favicon.png"
+    />
+  )
 }
 
 export function VdsBootstrapThemeCssTag({ locale, localhost = false }) {
   locale = fixLocale(locale)
   const url = vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost)
-  return <>
-    <StylesheetLinkTag url={url}/>
-    {['ar', 'fa', 'gu', 'he', 'ja', 'km', 'ko', 'or', 'si', 'ta', 'te', 'th', 'zh-HANS', 'zh-HANT', 'zh-HANT-HK'].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)}/>}
-  </>
+  return (
+    <>
+      <StylesheetLinkTag url={url} />
+      {[
+        'ar',
+        'fa',
+        'gu',
+        'he',
+        'ja',
+        'km',
+        'ko',
+        'or',
+        'si',
+        'ta',
+        'te',
+        'th',
+        'zh-HANS',
+        'zh-HANT',
+        'zh-HANT-HK'
+      ].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)} />}
+    </>
+  )
 }
 
 export function VdsBootstrapThemeJsTag({ localhost = false }) {
-  const url = vdsAssetUrl("js/bootstrap5-theme.min.js", localhost)
+  const url = vdsAssetUrl('js/bootstrap5-theme.min.js', localhost)
   return <script type="text/javascript" src={url}></script>
 }
 
-export function VdsLogo({locale, disposition = "default", size = '17', tagline = true, dark = false}) {
+export function VdsLogo({
+  locale,
+  disposition = 'default',
+  size = '17',
+  tagline = true,
+  dark = false
+}) {
   locale = fixLocale(locale)
   let trans = i18n[locale] || i18n.en
 
-  if (disposition == "mobile") {
-    disposition = "left-two-lines"
+  if (disposition == 'mobile') {
+    disposition = 'left-two-lines'
     tagline = false
   }
 
-  return <div className="vipassana-logo"
+  return (
+    <div
+      className="vipassana-logo"
       data-lang={locale}
       data-disposition={disposition}
       data-tagline={tagline}
       data-dark-mode={dark}
       data-reverse={trans.reverse}
-      style={{fontSize: `${size}px`}}>
-    <img className="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
-    <div className="logo-text">
-      <h1 className="logo-title">
-        <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
-          {trans.vipassana_meditation}
-        </span>
-        <span className="logo-space">&nbsp;</span>
-        <span>{trans.as_taught}</span>
-        <span className="vipassana-as-taught">{trans.vipassana_as_taught}</span>
-      </h1>
-      <div className="logo-subtitle">{trans.in_the_tradition}</div>
+      style={{ fontSize: `${size}px` }}
+    >
+      <img className="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
+      <div className="logo-text">
+        <h1 className="logo-title">
+          <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
+            {trans.vipassana_meditation}
+          </span>
+          <span className="logo-space">&nbsp;</span>
+          <span>{trans.as_taught}</span>
+          <span className="vipassana-as-taught">{trans.vipassana_as_taught}</span>
+        </h1>
+        <div className="logo-subtitle">{trans.in_the_tradition}</div>
+      </div>
     </div>
-  </div>
+  )
 }
 
 // Some icons from bootstrap icons, so all websites use the same
-export function VdsIconLocale({size = 1.2}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
-    <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
-  </svg>
+export function VdsIconLocale({ size = 1.2 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z" />
+      <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z" />
+    </svg>
+  )
 }
 
-export function VdsIconAccount({size = 2.2}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
-    <path fillRule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
-  </svg>
+export function VdsIconAccount({ size = 2.2 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
+      <path
+        fillRule="evenodd"
+        d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
+      />
+    </svg>
+  )
 }
 
-export function VdsIconMenu({size = 1.8}) {
-  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
-    <path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-  </svg>
+export function VdsIconMenu({ size = 1.8 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={`${size}em`}
+      height={`${size}em`}
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+      />
+    </svg>
+  )
 }

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "vipassana-design-standards",
-  "version": "0.0.37",
+  "version": "1.1.0",
   "description": "Vipassana design standards materials",
   "homepage": "https://design-standards.dhamma.org",
   "author": "Dhamma Workers",
   "dependencies": {
     "@popperjs/core": "^2.9.1",
-    "bootstrap5": "npm:bootstrap@5"
+    "bootstrap5": "npm:bootstrap@5.2.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "files": [
     "dist/js",
@@ -24,7 +32,7 @@
     "build-css": "rm -f dist/css/* && npm run build-fonts && npm run build-logo && npm run build-sass && npm run build-rtl && npm run build-min",
     "build-js": "rm -f dist/js/* && npm run build-js-bootstrap && npm run build-js-helper",
     "build-js-bootstrap": "concat -o dist/js/bootstrap5-theme.min.js node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js src/javascripts/auto-resize.js && cp node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js.map dist/js/bootstrap5-theme.min.js.map",
-    "build-js-helper": "cp src/javascripts/helpers.js dist/js && cp src/javascripts/react-helpers.jsx dist/js && cp src/javascripts/i18n.js dist/js && node replace-version.js",
+    "build-js-helper": "cp src/javascripts/helpers.js dist/js && cp src/javascripts/react-helpers.jsx dist/js && cp src/javascripts/i18n.js dist/js && node replace-version.js && npx babel dist/js/react-helpers.jsx --out-file dist/js/react-helpers.js",
     "build": "npm run build-css && npm run build-js",
     "dist": "npm run build && npm run dist-version-folder && npm publish && npm run dist-gem",
     "dist-gem": "gem build vipassana-design-standards.gemspec && gem push vipassana-design-standards-$npm_package_version.gem && rm vipassana-design-standards-$npm_package_version.gem",

package/src/stylesheets/bootstrap5-theme.scss

@@ -1,17 +1,17 @@
-@import "./custom-bootstrap-variables.scss";
+@import './custom-bootstrap-variables.scss';
 
-@import "bootstrap5/scss/bootstrap.scss";
+@import 'bootstrap5/scss/bootstrap.scss';
 
-@import "./custom-bootstrap-utilities.scss";
-@import "./custom-bootstrap.scss";
+@import './custom-bootstrap-utilities.scss';
+@import './custom-bootstrap.scss';
 
-@import "./layout/vds-mixins.scss";
-@import "./layout/vds-layout.scss";
-@import "./layout/vds-header.scss";
-@import "./layout/vds-sidenav.scss";
+@import './layout/vds-mixins.scss';
+@import './layout/vds-layout.scss';
+@import './layout/vds-header.scss';
+@import './layout/vds-sidenav.scss';
 
-@import "./fonts.scss";
-@import "./logo.scss";
+@import './fonts.scss';
+@import './logo.scss';
 
 html.vds-html {
   font-size: 13.5px;
@@ -21,4 +21,4 @@ html.vds-html {
   @include media-breakpoint-up(xl) {
     font-size: 15.3px;
   }
-}
+}

package/src/stylesheets/custom-bootstrap-utilities.scss

@@ -1,4 +1,3 @@
-
 :root {
   // Generate missing CSS Variables
   @each $color, $value in $blues {
@@ -54,56 +53,136 @@
 }
 
 // fs-09-rem, fs-085-em..
-.fs-05-rem { font-size: .5rem !important; }
-.fs-05-em { font-size: .5em !important; }
-.fs-055-rem { font-size: .55rem !important; }
-.fs-055-em { font-size: .55em !important; }
-
-.fs-06-rem { font-size: .6rem !important; }
-.fs-06-em { font-size: .6em !important; }
-.fs-065-rem { font-size: .65rem !important; }
-.fs-065-em { font-size: .65em !important; }
-
-.fs-07-rem { font-size: .7rem !important; }
-.fs-07-em { font-size: .7em !important; }
-.fs-075-rem { font-size: .75rem !important; }
-.fs-075-em { font-size: .75em !important; }
-
-.fs-08-rem { font-size: .8rem !important; }
-.fs-08-em { font-size: .8em !important; }
-.fs-085-rem { font-size: .85rem !important; }
-.fs-085-em { font-size: .85em !important; }
-
-.fs-09-rem { font-size: .9rem !important; }
-.fs-09-em { font-size: .9em !important; }
-.fs-095-rem { font-size: .95rem !important; }
-.fs-095-em { font-size: .95em !important; }
+.fs-05-rem {
+  font-size: 0.5rem !important;
+}
+.fs-05-em {
+  font-size: 0.5em !important;
+}
+.fs-055-rem {
+  font-size: 0.55rem !important;
+}
+.fs-055-em {
+  font-size: 0.55em !important;
+}
+
+.fs-06-rem {
+  font-size: 0.6rem !important;
+}
+.fs-06-em {
+  font-size: 0.6em !important;
+}
+.fs-065-rem {
+  font-size: 0.65rem !important;
+}
+.fs-065-em {
+  font-size: 0.65em !important;
+}
+
+.fs-07-rem {
+  font-size: 0.7rem !important;
+}
+.fs-07-em {
+  font-size: 0.7em !important;
+}
+.fs-075-rem {
+  font-size: 0.75rem !important;
+}
+.fs-075-em {
+  font-size: 0.75em !important;
+}
+
+.fs-08-rem {
+  font-size: 0.8rem !important;
+}
+.fs-08-em {
+  font-size: 0.8em !important;
+}
+.fs-085-rem {
+  font-size: 0.85rem !important;
+}
+.fs-085-em {
+  font-size: 0.85em !important;
+}
+
+.fs-09-rem {
+  font-size: 0.9rem !important;
+}
+.fs-09-em {
+  font-size: 0.9em !important;
+}
+.fs-095-rem {
+  font-size: 0.95rem !important;
+}
+.fs-095-em {
+  font-size: 0.95em !important;
+}
 
 // fs-11-rem, fs-125-em...
-.fs-11-rem { font-size: 1.1rem !important; }
-.fs-11-em { font-size: 1.1em !important; }
-.fs-115-rem { font-size: 1.15rem !important; }
-.fs-115-em { font-size: 1.15em !important; }
-
-.fs-12-rem { font-size: 1.2rem !important; }
-.fs-12-em { font-size: 1.2em !important; }
-.fs-125-rem { font-size: 1.25rem !important; }
-.fs-125-em { font-size: 1.25em !important; }
-
-.fs-13-rem { font-size: 1.3rem !important; }
-.fs-13-em { font-size: 1.3em !important; }
-.fs-135-rem { font-size: 1.35rem !important; }
-.fs-135-em { font-size: 1.35em !important; }
-
-.fs-14-rem { font-size: 1.4rem !important; }
-.fs-14-em { font-size: 1.4em !important; }
-.fs-145-rem { font-size: 1.45rem !important; }
-.fs-145-em { font-size: 1.45em !important; }
-
-.fs-15-rem { font-size: 1.5rem !important; }
-.fs-15-em { font-size: 1.5em !important; }
-.fs-155-rem { font-size: 1.55rem !important; }
-.fs-155-em { font-size: 1.55em !important; }
+.fs-11-rem {
+  font-size: 1.1rem !important;
+}
+.fs-11-em {
+  font-size: 1.1em !important;
+}
+.fs-115-rem {
+  font-size: 1.15rem !important;
+}
+.fs-115-em {
+  font-size: 1.15em !important;
+}
+
+.fs-12-rem {
+  font-size: 1.2rem !important;
+}
+.fs-12-em {
+  font-size: 1.2em !important;
+}
+.fs-125-rem {
+  font-size: 1.25rem !important;
+}
+.fs-125-em {
+  font-size: 1.25em !important;
+}
+
+.fs-13-rem {
+  font-size: 1.3rem !important;
+}
+.fs-13-em {
+  font-size: 1.3em !important;
+}
+.fs-135-rem {
+  font-size: 1.35rem !important;
+}
+.fs-135-em {
+  font-size: 1.35em !important;
+}
+
+.fs-14-rem {
+  font-size: 1.4rem !important;
+}
+.fs-14-em {
+  font-size: 1.4em !important;
+}
+.fs-145-rem {
+  font-size: 1.45rem !important;
+}
+.fs-145-em {
+  font-size: 1.45em !important;
+}
+
+.fs-15-rem {
+  font-size: 1.5rem !important;
+}
+.fs-15-em {
+  font-size: 1.5em !important;
+}
+.fs-155-rem {
+  font-size: 1.55rem !important;
+}
+.fs-155-em {
+  font-size: 1.55em !important;
+}
 
 .full-width-sm {
   @include media-breakpoint-down(md) {
@@ -139,4 +218,4 @@
     padding: 2rem;
     z-index: 500;
   }
-}
+}