From ea9cb3a8ef205993f5d9280db2f9f726eb38b0e1 Mon Sep 17 00:00:00 2001
From: Oluwaseun Longe <olulonge@WKMZT8DD3E58.global.publicisgroupe.net>
Date: Thu, 15 Aug 2024 12:39:12 -0400
Subject: [PATCH] (#153) Enforce using rems/ems in stylesheets

Closes #153

* Added and enabled `stylelint-rem-over-px`
* Fixed console errors
* Removed `stylelint-rem-over-px` for `stylelint`'s `declaration-property-unit-allowed-list` rule which allows for greater flexibility
* Cleaned up console errors
---
 .stylelintrc.json             |  3 ++
 less/accessible-text-svg.less | 18 +++++-----
 less/chart.less               | 18 +++++-----
 less/combobox.less            | 14 ++++----
 less/dialog-html5.less        | 10 +++---
 less/enable-listbox.less      | 14 ++++----
 less/grid.less                | 24 ++++++-------
 less/heading.less             | 46 ++++++++++++------------
 less/menubar.less             | 10 +++---
 less/radiogroup.less          |  6 ++--
 less/select-css.less          |  4 +--
 less/shared/a11y.less         |  4 +--
 less/shared/landmarks.less    | 50 +++++++++++++-------------
 less/shared/reset.less        |  2 +-
 less/site.less                | 66 +++++++++++++++++------------------
 less/timer.less               | 18 +++++-----
 16 files changed, 155 insertions(+), 152 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 6746de09..d9931c09 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -16,6 +16,9 @@
         "declaration-block-no-duplicate-properties": null,
         "declaration-block-no-redundant-longhand-properties": null,
         "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-property-unit-allowed-list": {
+            "font-size": ["em", "rem"]
+        },
         "font-family-name-quotes": null,
         "font-family-no-missing-generic-family-keyword": null,
         "function-name-case": null,
diff --git a/less/accessible-text-svg.less b/less/accessible-text-svg.less
index 3a91e6e5..3bb0051f 100644
--- a/less/accessible-text-svg.less
+++ b/less/accessible-text-svg.less
@@ -10,8 +10,8 @@ body {
 
     &__text {
         fill: black;
-        stroke-width: 2px;
-        font-size: calc(54px * var(--text-zoom-factor));
+        stroke-width: 0.125rem;
+        font-size: calc(3.375rem * var(--text-zoom-factor));
         font-family: "Georgia", "Times New Roman", serif;
         panose-1: 0 0 0 0 0 0 0 0 0 0;
         font-style: italic;
@@ -19,18 +19,18 @@ body {
     }
 
     &__svgTextPath2 {
-        transform: translateY(-50px);
+        transform: translateY(-3.125rem);
     }
 
     &__svg {
         display: block;
         position: absolute;
         z-index: 2;
-        transform: translateY(-4px);
+        transform: translateY(-0.25rem);
     }
 
     &__intro-text {
-        font-size: calc(54px * var(--text-zoom-factor));
+        font-size: calc(3.375rem * var(--text-zoom-factor));
         z-index: 2;
         color: black;
         font-family: "Georgia", "Times New Roman", serif;
@@ -40,7 +40,7 @@ body {
 
     &__shape-container {
         position: relative;
-        width: 1024px;
+        width: 64rem;
         height: 62.7vw;
         overflow: hidden;
     }
@@ -60,10 +60,10 @@ body {
     &__control {
         position: absolute;
         display: block;
-        width: 200px;
-        margin: 20px auto;
+        width: 12.5rem;
+        margin: 1.25rem auto;
         cursor: pointer;
-        padding: 10px;
+        padding: 0.625rem;
         top: 2vw;
         right: 4vw;
         z-index: 2;
diff --git a/less/chart.less b/less/chart.less
index 73056b32..b843fc36 100644
--- a/less/chart.less
+++ b/less/chart.less
@@ -20,30 +20,30 @@ body {
     }
 
     table {
-        margin: 20px auto 0 auto;
+        margin: 1.25rem auto 0 auto;
         border: solid 1px black;
         width: initial;
     }
 
     svg {
-        font-size: 16px;
+        font-size: 1rem;
     }
 
     .tick text {
-        font-size: calc(10px * var(--text-zoom-factor));
+        font-size: calc(0.625rem * var(--text-zoom-factor));
     }
 }
 
 #bar-chart {
-    height: 400px;
+    height: 25rem;
 
     .ct-horizontal.ct-label {
         display: block;
-        padding-right: 10px;
+        padding-right: 0.625rem;
         white-space: nowrap;
         transform-origin: center right;
-        transform: translateX(-170px) translateY(-10px) rotate(-35deg);
-        min-width: 200px;
+        transform: translateX(-10.625rem) translateY(-0.625rem) rotate(-35deg);
+        min-width: 12.5rem;
         text-align: right;
     }
 
@@ -53,11 +53,11 @@ body {
     }
 
     &.bar-chart--initialized {
-        margin-bottom: 55px;
+        margin-bottom: 3.4375rem;
 
         svg {
             overflow: visible;
-            padding-bottom: 200px;
+            padding-bottom: 12.5rem;
         }
     }
 }
diff --git a/less/combobox.less b/less/combobox.less
index ba3c66ca..f2a61507 100755
--- a/less/combobox.less
+++ b/less/combobox.less
@@ -7,22 +7,22 @@
         position: relative;
         width: 30em;
         max-width: 100%;
-        font-size: 100%;
+        font-size: 1em;
         font-family: sans-serif;
 
         @media @desktop {
-            max-width: 400px;
+            max-width: 25rem;
         }
     }
 
     &__group {
-        padding: 10px;
+        padding: 0.625rem;
     }
 
     &__reset-button {
         position: absolute;
         z-index: 1;
-        right: 5px;
+        right: 0.3125rem;
         top: 0;
         bottom: 0;
         padding: 0;
@@ -46,7 +46,7 @@
 
     input[role="combobox"] {
         position: relative;
-        font-size: 12px;
+        font-size: 0.75rem;
         height: 1.5em;
         width: 100%; /* of pc */
         border: solid 1px #000;
@@ -76,7 +76,7 @@
         width: 100%;
         box-sizing: border-box;
         z-index: 2;
-        max-height: 200px;
+        max-height: 12.5rem;
         overflow: auto;
     }
     [role="option"] {
@@ -84,7 +84,7 @@
         margin: 0;
         padding: 0.3em 0.5em;
         list-style: none;
-        font-size: 12px;
+        font-size: 0.75rem;
         cursor: pointer;
     }
     [role="option"]:hover {
diff --git a/less/dialog-html5.less b/less/dialog-html5.less
index ca8ca529..61f03204 100755
--- a/less/dialog-html5.less
+++ b/less/dialog-html5.less
@@ -27,8 +27,8 @@
 
     &__button--close {
         position: absolute;
-        top: -20px;
-        right: -20px;
+        top: -1.25rem;
+        right: -1.25rem;
         .vendor(appearance, none);
         background: none;
         border: none;
@@ -37,8 +37,8 @@
         & {
             img {
                 border: 0;
-                width: 38px;
-                height: 38px;
+                width: 2.375rem;
+                height: 2.375rem;
             }
         }
     }
@@ -70,5 +70,5 @@ dialog {
     position: absolute;
     left: calc(50% - 27vmin);
     top: 22vmin;
-    font-size: 2.5vmin;
+    font-size: 2.5rem;
 }
diff --git a/less/enable-listbox.less b/less/enable-listbox.less
index 5206596a..223c8346 100755
--- a/less/enable-listbox.less
+++ b/less/enable-listbox.less
@@ -11,7 +11,7 @@
 }
 
 .enable-listbox {
-    padding: 20px;
+    padding: 1.25rem;
     background: #eee;
     border: 1px solid #aaa;
 
@@ -19,17 +19,17 @@
     &__right-area {
         box-sizing: border-box;
         display: inline-block;
-        font-size: 14px;
+        font-size: 0.875rem;
         vertical-align: top;
         width: 50%;
     }
 
     &__left-area {
-        padding-right: 10px;
+        padding-right: 0.625rem;
     }
 
     &__right-area {
-        padding-left: 10px;
+        padding-left: 0.625rem;
     }
 
     [role="listbox"] {
@@ -68,11 +68,11 @@
     }
 
     button {
-        font-size: 16px;
+        font-size: 1rem;
         border-radius: 0;
-        font-size: 16px;
+        font-size: 1rem;
         text-align: left;
-        padding: 5px 10px;
+        padding: 0.3125rem 0.625rem;
         width: (150 / @px);
         position: relative;
 
diff --git a/less/grid.less b/less/grid.less
index e8e2cf64..a191589d 100755
--- a/less/grid.less
+++ b/less/grid.less
@@ -106,17 +106,17 @@ table.data thead,
 table.index thead,
 table.data tbody,
 table.index tbody {
-    border-bottom: 2px solid;
+    border-bottom: 0.125rem solid;
 }
 
 table.data colgroup,
 table.index colgroup {
-    border-left: 2px solid;
+    border-left: 0.125rem solid;
 }
 
 table.data tbody th:first-child,
 table.index tbody th:first-child {
-    border-right: 2px solid;
+    border-right: 0.125rem solid;
     border-top: 1px solid silver;
     padding-right: 1em;
 }
@@ -195,14 +195,14 @@ table.data img {
     background-image: data-uri("../imgs/pencil-icon.png");
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 44px;
+    background-size: 2.75rem;
     content: " ";
-    height: 17px;
+    height: 1.0625rem;
     opacity: 0.6;
     position: absolute;
-    right: -24px;
+    right: -1.5rem;
     top: 0px;
-    width: 20px;
+    width: 1.25rem;
 }
 
 .edit-text-button:hover,
@@ -220,15 +220,15 @@ table.data img {
 [role="grid"] [tabindex="0"]:focus {
     outline: @focus-color;
     outline-style: dotted;
-    outline-width: 3px;
+    outline-width: 0.1875rem;
 }
 
 #arrow-keys-indicator {
-    bottom: 10px;
+    bottom: 0.625rem;
     left: 0;
     position: fixed;
-    height: 65px;
-    width: 85px;
+    height: 4.0625rem;
+    width: 5.3125rem;
     background: data-uri("../imgs/black_keys.png") no-repeat;
     background-size: contain;
 }
@@ -242,7 +242,7 @@ table.data img {
 /* Menu button */
 button {
     cursor: pointer;
-    font-size: 110%;
+    font-size: 1.1rem;
 }
 
 .menu-wrapper {
diff --git a/less/heading.less b/less/heading.less
index 9b8e7761..1f57b30b 100755
--- a/less/heading.less
+++ b/less/heading.less
@@ -6,51 +6,51 @@ body {
 
 div.heading-example {
     width: 100%;
-    max-width: 960px;
-    padding: 40px;
-    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
+    max-width: 60rem;
+    padding: 2.5rem;
+    text-shadow: 0 0.125rem 0 rgba(255, 255, 255, 0.7);
 }
 
 div.heading-example p {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4;
     text-align: justify;
 }
 
 div.heading-example p:nth-of-type(2) {
     -moz-column-count: 2;
-    -moz-column-gap: 20px;
+    -moz-column-gap: 1.25rem;
     -webkit-column-count: 2;
-    -webkit-column-gap: 20px;
+    -webkit-column-gap: 1.25rem;
     -ms-column-count: 2;
-    -ms-column-gap: 20px;
+    -ms-column-gap: 1.25rem;
     -o-column-count: 2;
-    -o-column-gap: 20px;
+    -o-column-gap: 1.25rem;
     column-count: 2;
-    column-gap: 20px;
+    column-gap: 1.25rem;
 }
 
 div.heading-example p:nth-of-type(4) {
     -moz-column-count: 3;
-    -moz-column-gap: 15px;
+    -moz-column-gap: 0.9375rem;
     -o-column-count: 3;
-    -o-column-gap: 15px;
+    -o-column-gap: 0.9375rem;
     -ms-column-count: 3;
-    -ms-column-gap: 15px;
+    -ms-column-gap: 0.9375rem;
     -webkit-column-count: 3;
-    -webkit-column-gap: 15px;
+    -webkit-column-gap: 0.9375rem;
     column-count: 3;
-    column-gap: 15px;
+    column-gap: 0.9375rem;
 }
 
 /* DEMO 1 */
-@h1-size: 36px;
-@h2-size: 33px;
-@h3-size: 30px;
-@h4-size: 25px;
-@h5-size: 22px;
-@h6-size: 18px;
-@h7-size: 18px;
+@h1-size: 2.25rem;
+@h2-size: 2.0625rem;
+@h3-size: 1.875rem;
+@h4-size: 1.5625rem;
+@h5-size: 1.375rem;
+@h6-size: 1.125rem;
+@h7-size: 1.125rem;
 
 div.heading-example {
     h1,
@@ -63,8 +63,8 @@ div.heading-example {
         line-height: 42 * (36 / @h1-size);
         text-transform: uppercase;
         text-shadow:
-            0 2px white,
-            0 3px #777;
+            0 0.125rem white,
+            0 0.1875rem #777;
     }
 
     h2,
diff --git a/less/menubar.less b/less/menubar.less
index 00f96d4d..ee7cee4f 100755
--- a/less/menubar.less
+++ b/less/menubar.less
@@ -1,9 +1,9 @@
 @import "shared/mixins-and-vars";
 
 ul[role="menubar"] {
-    margin: 10px;
-    padding: 10px;
-    font-size: 110%;
+    margin: 0.625rem;
+    padding: 0.625rem;
+    font-size: 1.1rem;
     list-style: none;
     background-color: #eeeeee;
 }
@@ -12,7 +12,7 @@ ul[role="menubar"] [role="menuitem"],
 ul[role="menubar"] [role="separator"] {
     padding: 0.25em;
     background-color: #eeeeee;
-    border: 2px solid #eeeeee;
+    border: 0.125rem solid #eeeeee;
 }
 
 ul[role="menubar"] [role="separator"] {
@@ -54,7 +54,7 @@ ul[role="menubar"] > li > a:after {
 ul[role="menubar"] ul[role="menu"] {
     display: none;
     position: absolute;
-    top: -2px;
+    top: -0.125rem;
     left: 0;
     margin: 0;
     padding: 0;
diff --git a/less/radiogroup.less b/less/radiogroup.less
index 6dd93f25..2b9609db 100755
--- a/less/radiogroup.less
+++ b/less/radiogroup.less
@@ -55,7 +55,7 @@
 }
 
 .aria-radio-label {
-    font-size: (@radio-label-font-size * 1px);
+    font-size: (@radio-label-font-size * 0.0625rem);
     line-height: ((@radio-size + @radio-border) / @radio-label-font-size);
 }
 
@@ -94,7 +94,7 @@
             cursor: pointer;
             display: inline-block;
             color: #666;
-            font-size: (@enable-radio-label-font-size * 1px);
+            font-size: (@enable-radio-label-font-size * 0.0625rem);
             line-height: (
                 (@enable-radio-size + 2 * @enable-radio-border) /
                     @enable-radio-label-font-size
@@ -127,7 +127,7 @@
         }
 
         &:focus + label:before {
-            outline: 2px @focus-color solid;
+            outline: 0.125rem @focus-color solid;
         }
 
         &:not(:checked) + label:after {
diff --git a/less/select-css.less b/less/select-css.less
index c3e461eb..a51b2938 100644
--- a/less/select-css.less
+++ b/less/select-css.less
@@ -3,7 +3,7 @@
 /* class applies to select element itself, not a wrapper element */
 .select-css {
     display: block;
-    font-size: 16px;
+    font-size: 1rem;
     font-family: sans-serif;
     font-weight: 700;
     color: #444;
@@ -91,7 +91,7 @@
 
     &__label {
         display: block;
-        margin: 20px 0 4px 4px;
+        margin: 1.25rem 0 0.25rem 0.25rem;
         font-weight: bold;
     }
 }
diff --git a/less/shared/a11y.less b/less/shared/a11y.less
index 9c1bbbc8..e45da320 100755
--- a/less/shared/a11y.less
+++ b/less/shared/a11y.less
@@ -53,7 +53,7 @@
  * focus state of a button different than that of a form element. 
  */
 .bypass-block-target:focus:target {
-    outline: solid 2px @focus-color;
+    outline: solid 0.125rem @focus-color;
 }
 
 * {
@@ -114,7 +114,7 @@ body {
      * the size set in the iOS Accessibility settings.
      */
     font: -apple-system-body;
-    font-size: 16px;
+    font-size: 1rem;
 
     /*
      * Put whatever font you want to use here or in the body
diff --git a/less/shared/landmarks.less b/less/shared/landmarks.less
index 62ca4d58..38645b4a 100755
--- a/less/shared/landmarks.less
+++ b/less/shared/landmarks.less
@@ -4,7 +4,7 @@
 @color1-dark: #ff9999;
 @color2: #9999ff;
 
-@image-width: 200px;
+@image-width: 12.5rem;
 
 body {
     margin: 0;
@@ -18,13 +18,13 @@ header,
     margin: 0;
     position: relative;
     border-bottom: solid 1px rgba(0, 0, 0, 0.4);
-    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.6);
 
     /*
    * Used to work around a Safari OSX bug with sticky table content
    * stacking on top of the banner
    */
-    transform: translateZ(2px);
+    transform: translateZ(0.125rem);
 
     /* Firefox needed this to work around the Safari workaround. */
     position: relative;
@@ -72,7 +72,7 @@ header,
 .logo {
     position: relative;
     display: inline-block;
-    padding: 20px;
+    padding: 1.25rem;
     background: @color2;
     border-radius: 50%;
     transform: rotate(-10deg);
@@ -81,23 +81,23 @@ header,
     .zoltipedia {
         display: inline-block;
         position: relative;
-        transform: scale(1.1) translateY(-20px) rotate(10deg);
+        transform: scale(1.1) translateY(-1.25rem) rotate(10deg);
         color: @color1-dark;
         text-shadow:
-            1px 0 0 #000,
-            -1px 0 0 #000,
-            0 1px 0 #000,
-            0 -1px 0 #000,
-            3px 3px #000;
+            0.0625rem 0 0 #000,
+            -0.0625rem 0 0 #000,
+            0 0.0625rem 0 #000,
+            0 -0.0625rem 0 #000,
+            0.1875rem 0.1875rem #000;
     }
 
     .acme {
-        font-size: 70px;
+        font-size: 4.375rem;
         font-weight: 900;
     }
 
     .zoltipedia {
-        font-size: 60px;
+        font-size: 3.75rem;
     }
 
     .corp {
@@ -116,12 +116,12 @@ header,
 .motto {
     position: absolute;
     transform: rotate(10deg);
-    bottom: -20px;
-    left: 30px;
+    bottom: -1.25rem;
+    left: 1.875rem;
     font-size: 0.8em;
     font-family: "Palatino", serif;
     font-style: italic;
-    width: 500px;
+    width: 31.25rem;
 }
 
 main:not(.with-full-bleed-hero),
@@ -130,7 +130,7 @@ main:not(.with-full-bleed-hero),
 .with-full-bleed-hero__content {
     padding: @page-padding;
     margin: 0 auto;
-    max-width: 1024px;
+    max-width: 64rem;
     line-height: 1.4;
     position: relative;
     // z-index: 2;  /* Don't know why this was put in here */
@@ -164,13 +164,13 @@ aside,
     display: block;
     background: #ddd data-uri("../../images/notepad-icon.svg") no-repeat 1em 1em;
     margin: 1em auto;
-    padding: 1em 1em 1em calc(100px + 2em);
+    padding: 1em 1em 1em calc(6.25rem + 2em);
     min-height: (139 / @px);
     border: solid 1px black;
-    box-shadow: 4px 4px 0 black;
+    box-shadow: 0.25rem 0.25rem 0 black;
     line-height: 1.4;
 
-    max-width: 1024px;
+    max-width: 64rem;
 
     h2 {
         font-family: "OpenSans", "Helvetica", "Arial", sans-serif;
@@ -201,13 +201,13 @@ aside,
     h3 {
         color: @color2;
         text-shadow:
-            1px 0 0 #000,
-            -1px 0 0 #000,
-            0 1px 0 #000,
-            0 -1px 0 #000,
-            3px 3px #000;
+            0.0625rem 0 0 #000,
+            -0.0625rem 0 0 #000,
+            0 0.0625rem 0 #000,
+            0 -0.0625rem 0 #000,
+            0.1875rem 0.1875rem #000;
 
-        font-size: 40px;
+        font-size: 2.5rem;
         font-weight: bold;
     }
 }
diff --git a/less/shared/reset.less b/less/shared/reset.less
index fe4254c6..89558a14 100755
--- a/less/shared/reset.less
+++ b/less/shared/reset.less
@@ -87,7 +87,7 @@ video {
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
+    font-size: 1em;
     font: inherit;
     vertical-align: baseline;
 }
diff --git a/less/site.less b/less/site.less
index 78bdbbc1..550b9a43 100644
--- a/less/site.less
+++ b/less/site.less
@@ -1,8 +1,8 @@
 @import "shared/mixins-and-vars";
 
 // site specific hamburger menu styles
-@default-menu-item-with-photo-width: 118px;
-@default-menu-item-with-photo-horiz-padding: 5px;
+@default-menu-item-with-photo-width: 7.375rem;
+@default-menu-item-with-photo-horiz-padding: 0.3125rem;
 .enable-flyout {
     &__open-level-button,
     &__link {
@@ -16,13 +16,13 @@
 
     &__level &__menu-item {
         display: inline-block;
-        font-size: 14px;
+        font-size: 0.875rem;
         margin-right: 0;
     }
 
     &__link {
         text-indent: 0px;
-        padding: 13px 13px 13px 21px;
+        padding: 0.8125rem 0.8125rem 0.8125rem 1.3125rem;
     }
 }
 
@@ -31,13 +31,13 @@
         @item-height: (188 / @px);
 
         &__link-image {
-            width: 105px;
+            width: 6.5625rem;
             border: solid 1px #999999;
         }
 
         &__level &__level &__menu-item {
-            width: (@desktop-min - 70px);
-            padding-bottom: 10px;
+            width: (@desktop-min - 4.375rem);
+            padding-bottom: 0.625rem;
         }
 
         &__level &__level &__list--photo-layout {
@@ -63,18 +63,18 @@
             //letter-spacing: (0.5 / @px);
             box-sizing: border-box;
             font-size: (13 / @px);
-            padding: 10px 20px 0 20px;
+            padding: 0.625rem 1.25rem 0 1.25rem;
 
             #content-section&,
             #code-patterns-section& {
-                padding: 10px @default-menu-item-with-photo-horiz-padding 0
+                padding: 0.625rem @default-menu-item-with-photo-horiz-padding 0
                     @default-menu-item-with-photo-horiz-padding;
             }
 
             &:hover,
             &:focus {
                 //letter-spacing: 0;
-                box-shadow: 2px 2px 5px #999;
+                box-shadow: 0.125rem 0.125rem 0.3125rem #999;
             }
 
             &:hover {
@@ -83,7 +83,7 @@
             }
 
             &:focus {
-                outline: solid 2px @focus-color;
+                outline: solid 0.125rem @focus-color;
             }
         }
 
@@ -91,7 +91,7 @@
             display: none;
         }
 
-        @mulit-column-menu-margin: 18px;
+        @mulit-column-menu-margin: 1.125rem;
 
         /* styles specific to Interactive Elements flyout */
         #forms-section > :not(&__menu-item) > &__menu-item {
@@ -102,7 +102,7 @@
 
             .enable-flyout__list {
                 width: 100%;
-                padding-left: 30px;
+                padding-left: 1.875rem;
             }
         }
 
@@ -112,7 +112,7 @@
 
         #code-patterns-section > :not(&__menu-item) > &__menu-item:nth-child(2),
         #content-section > :not(&__menu-item) > &__menu-item:nth-child(3) {
-            width: calc(100% / 3 - 36px);
+            width: calc(100% / 3 - 2.25rem);
             float: left;
             margin-left: @mulit-column-menu-margin;
             margin-right: @mulit-column-menu-margin;
@@ -125,14 +125,14 @@
         #code-patterns-section
             > :not(&__menu-item)
             > &__menu-item:nth-child(3) {
-            width: calc(200% / 3 - 36px);
+            width: calc(200% / 3 - 2.25rem);
             float: left;
             margin-left: @mulit-column-menu-margin;
             margin-right: @mulit-column-menu-margin;
         }
 
         #content-section > :not(&__menu-item) > &__menu-item:nth-child(3) {
-            width: calc(300% / 3 - 36px);
+            width: calc(300% / 3 - 2.25rem);
             float: left;
             margin-left: @mulit-column-menu-margin;
             margin-right: @mulit-column-menu-margin;
@@ -140,14 +140,14 @@
 
         #content-section > :not(&__menu-item) > &__menu-item:nth-child(3),
         #content-section > :not(&__menu-item) > &__menu-item:nth-child(4) {
-            width: calc(124% / 3 - 36px);
+            width: calc(124% / 3 - 2.25rem);
             float: left;
             margin-left: @mulit-column-menu-margin;
             margin-right: @mulit-column-menu-margin;
         }
 
         #content-section > :not(&__menu-item) > &__menu-item:nth-child(3) {
-            margin-left: 181px;
+            margin-left: 11.3125rem;
         }
 
         #code-patterns-section
@@ -175,7 +175,7 @@
         &__list &__list {
             width: @desktop-min;
             width: fit-content;
-            margin: 20px auto;
+            margin: 1.25rem auto;
         }
     }
 }
@@ -195,17 +195,17 @@
         font-family: "MoniceDemo", Arial, Helvetica, sans-serif;
 
         color: #fff;
-        margin-bottom: -10px;
+        margin-bottom: -0.625rem;
 
         @media @mobile {
             transform: scale(0.75);
             height: (75 / @px);
             transform-origin: 0 50%;
-            margin-left: 10px;
+            margin-left: 0.625rem;
         }
 
         @media @tablet-up {
-            padding: 0 30px;
+            padding: 0 1.875rem;
             margin-bottom: 0;
         }
     }
@@ -215,7 +215,7 @@
         text-decoration: none;
         display: inline-block;
         position: relative;
-        margin: 10px 0;
+        margin: 0.625rem 0;
     }
 
     &__text {
@@ -235,10 +235,10 @@
 
     &__sub-text {
         display: block;
-        font-size: 17px;
+        font-size: 1.0625rem;
         font-style: italic;
-        padding: 0 10px;
-        margin-top: -8px;
+        padding: 0 0.625rem;
+        margin-top: -0.5rem;
         font-style: normal;
     }
 }
@@ -248,9 +248,9 @@
     @npm-icon-width: (100 / @px);
 
     list-style-type: none;
-    margin: 14px 0;
+    margin: 0.875rem 0;
     padding: 0;
-    border: solid 3px black;
+    border: solid 0.1875rem black;
     border-radius: (20 / @px);
     overflow: hidden;
     color: #000;
@@ -258,13 +258,13 @@
 
     &__desc {
         min-height: (40 / @px);
-        padding: 5px 20px;
+        padding: 0.3125rem 1.25rem;
         display: inline-block;
         position: relative;
         padding-left: @icon-width;
 
         @media @mobile {
-            padding: 5px 10px 5px (@icon-width / 2);
+            padding: 0.3125rem 0.625rem 0.3125rem (@icon-width / 2);
         }
 
         &:only-child {
@@ -301,7 +301,7 @@
     }
     &__icon {
         height: (30 / @px);
-        margin: 0px 15px 5px 0px;
+        margin: 0rem 0.9375rem 0.3125rem 0rem;
         display: inline-block;
     }
     &__heading-icon {
@@ -315,7 +315,7 @@
 }
 
 .screenshot-table {
-    margin-bottom: 40px;
+    margin-bottom: 2.5rem;
     thead th,
     td {
         text-align: center;
@@ -327,5 +327,5 @@
 }
 
 .enable-flyout__open-menu-button {
-    margin-top: -3px;
+    margin-top: -0.1875rem;
 }
diff --git a/less/timer.less b/less/timer.less
index 9ac1c432..a71cf826 100755
--- a/less/timer.less
+++ b/less/timer.less
@@ -2,8 +2,8 @@
 
 .base-timer {
     position: relative;
-    width: 300px;
-    height: 300px;
+    width: 18.75rem;
+    height: 18.75rem;
     text-align: center;
     margin: 0 auto;
 
@@ -17,12 +17,12 @@
     }
 
     &__path-elapsed {
-        stroke-width: 7px;
+        stroke-width: 0.4375rem;
         stroke: grey;
     }
 
     &__path-remaining {
-        stroke-width: 7px;
+        stroke-width: 0.4375rem;
         stroke-linecap: round;
         transform: rotate(90deg);
         transform-origin: center;
@@ -45,13 +45,13 @@
 
     &__label {
         position: absolute;
-        width: 300px;
-        height: 300px;
+        width: 18.75rem;
+        height: 18.75rem;
         top: 0;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 48px;
+        font-size: 3rem;
     }
 
     &__start-timer {
@@ -67,9 +67,9 @@
         color: white;
         margin: 0 auto;
         display: block;
-        margin-top: 20px;
+        margin-top: 1.25rem;
         transition: background-color 0.25s ease-in-out;
-        outline-offset: 2px;
+        outline-offset: 0.125rem;
 
         &:hover {
             background: #009900;