Feature/4147 make font and layout accessible

.github/workflows/dependencies-check.yml

@@ -15,7 +15,6 @@ jobs:
       uses: actions/setup-python@v5
       with:
         python-version: '3.10.12'
-        cache: 'pip'
 
     - name: System Information
       run: |
@@ -37,8 +36,15 @@ jobs:
       run: |
         python dependencies.py >> system_info.txt
 
+    - name: Prepare outputs
+      shell: bash
+      run: |
+        mkdir -p analysis_output
+        mv system_info.txt analysis_output/
+        cp -r dependencies_analysis analysis_output/
+
     - name: Upload dependencies output
       uses: actions/upload-artifact@v4
       with:
         name: dependencies-report
-        path: system_info.txt
+        path: analysis_output

cms/sass/base/_fonts.scss

@@ -13,4 +13,4 @@
 @mixin font-monospace {
   font-family: 'Source Code Pro', monospace;
   letter-spacing: normal;
-}
+}

cms/sass/base/_general.scss

@@ -2,10 +2,13 @@
 
 html {
   scroll-behavior: smooth;
-  font-size: 20px;
+  font-size: 100%;
+}
 
+body {
+  font-size: $typescale-05;
   @media (max-width: 768px) {
-    font-size: 18px;
+    font-size: $typescale-06;
   }
 }
 
@@ -17,7 +20,7 @@ h2, h3, h4, h5, h6 {
   margin: $spacing-04 0 $spacing-03 0;
   line-height: 1.05;
   font-weight: 400;
-  scroll-margin-top: 60px;
+  scroll-margin-top: $spacing-05;
 
   &:first-child {
     margin-top: 0;
@@ -28,29 +31,32 @@ h1 {
   margin: $spacing-04 0;
   font-weight: 700;
   line-height: 1.05;
-  scroll-margin-top: 600px;
-  @include typescale-01;
+  scroll-margin-top: 37.5rem;
+  font-size: $typescale-03;
   @include font-serif;
 }
 
 h2 {
-  @include typescale-02;
+  font-size: $typescale-03;
 }
 
 h3 {
-  @include typescale-03;
+  font-size: $typescale-05;
+  .tag {
+    font-size: $typescale-06 !important;
+  }
 }
 
 h4 {
-  @include typescale-04;
+  font-size: $typescale-06;
 }
 
 h5 {
-  @include typescale-05;
+  font-size: $typescale-06;
 }
 
 h6 {
-  @include typescale-06;
+  font-size: $typescale-06;
 }
 
 ul, ol {
@@ -70,7 +76,7 @@ dl {
 
   dt {
     color: $dark-grey;
-    @include typescale-06;
+    font-size: $typescale-06;
 
     &:not(:first-child) {
       margin-top: $spacing-03;
@@ -92,7 +98,7 @@ p, blockquote, ul, ol {
 
 pre, code {
   @include font-monospace;
-  @include typescale-06;
+  font-size: $typescale-06;
   background: $light-grey;
 }
 
@@ -123,7 +129,7 @@ section {
 }
 
 blockquote {
-  padding-left: 1.5em;
+  padding-left: $spacing-04;
   border-left: 1px solid $sanguine;
   font-style: italic;
 
@@ -159,7 +165,7 @@ table {
   thead {
     text-align: left;
     color: $dark-grey;
-    @include typescale-06;
+    font-size: $typescale-06;
   }
 
   tr {
@@ -202,11 +208,11 @@ table {
 
 aside {
   h2 {
-    @include typescale-03;
+    font-size: $typescale-03;
   }
 
   h2 {
-    @include typescale-04;
+    font-size: $typescale-04;
   }
 
   form {
@@ -235,10 +241,10 @@ input, select, button, textarea {
   border-radius: 0;
 
   display: inline-block;
-  padding: 0.5em;
+  padding: $spacing-02;
   background-color: $white;
   border: 1px solid $warm-black;
-  font-size: smaller;
+  font-size: $typescale-06;
   @include font-sans;
 }
 
@@ -247,7 +253,7 @@ textarea {
 }
 
 select {
-  padding-right: 30px;
+  padding-right: $spacing-04;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -270,6 +276,8 @@ input[type="radio"] {
   height: 0.8em;
   pointer-events: none;
   //margin-left: -0.8rem;
+  width: $spacing-03;
+  height: $spacing-03;
 
   &:focus  + label {
     outline: solid 2px $warm-black;
@@ -285,16 +293,16 @@ input[type="radio"] {
     margin: 0 0 $spacing-03 0;
     line-height: 1;
     color: $dark-grey;
-    font-size: 1rem;
+    font-size: $typescale-05;
   }
 
   + label::before {
     content: '\a0';
     display: inline-block;
     margin: 0 $spacing-02 0 0;
-    width: 0.8em;
-    height: 0.8em;
-    line-height: 0.75em;
+    width: $spacing-03;
+    height: $spacing-03;
+    line-height: 0.75;
     transition: all 0.35s;
     border: 1px solid $warm-black;
   }
@@ -332,4 +340,4 @@ fieldset {
 .feather {
   height: 1em;
   width: auto;
-}
+}

cms/sass/base/_grid.scss

@@ -4,20 +4,20 @@
 
   @media screen and (max-width: 768px) {
     width: auto;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: $spacing-03a;
+    padding-right: $spacing-03a;
   }
 
   @media screen and (max-width: 1279px) and (min-width: 769px) {
     width: auto;
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: $spacing-04;
+    padding-right: $spacing-04;
   }
 
   @media screen and (max-width: 1479px) and (min-width: 1280px) {
     width: auto;
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: $spacing-04a;
+    padding-right: $spacing-04a;
   }
 
   @media screen and (min-width: 1480px) {
@@ -32,17 +32,17 @@
 }
 
 .row {
-  margin-left: -20px;
-  margin-right: -20px;
+  margin-left: -$spacing-03a;
+  margin-right: -$spacing-03a;
 
   @media screen and (max-width: 1279px) and (min-width: 768px) {
-    margin-left: -30px;
-    margin-right: -30px;
+    margin-left: -$spacing-04;
+    margin-right: -$spacing-04;
   }
 
   @media screen and (min-width: 1280px) {
-    margin-left: -40px;
-    margin-right: -40px;
+    margin-left: -$spacing-04a;
+    margin-right: -$spacing-04a;
   }
 }
 
@@ -65,17 +65,17 @@
 }
 
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
-  padding-left: 20px;
-  padding-right: 20px;
+  padding-left: $spacing-03a;
+  padding-right: $spacing-03a;
 
   @media screen and (max-width: 1279px) and (min-width: 768px) {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: $spacing-04;
+    padding-right: $spacing-04;
   }
 
   @media screen and (min-width: 1280px) {
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: $spacing-04a;
+    padding-right: $spacing-04a;
   }
 }
 
@@ -138,4 +138,4 @@
   .col-lg-6:nth-child(2n+1) {
     clear: both;
   }
-}
+}

cms/sass/base/_highlight.scss

@@ -182,4 +182,4 @@
   .il {
     color: #009999;
   }
-}
+}

cms/sass/base/_palette.scss

@@ -39,4 +39,4 @@ $bronze:            #A77044;
   --mid-green:      #47A178;
   --light-green:   #A3C386;
   --yellow:         #F9D950;
-}
+}

cms/sass/base/_spacing.scss

@@ -1,12 +1,14 @@
 /* Variables for spacing units
    Use with margins & padding
-   Base unit: 16px */
+   Base unit: 1rem */
 
-$spacing-01: 0.1875rem;
-$spacing-02: 0.375rem;
-$spacing-03: 0.75rem;
+$spacing-01: 0.25rem;
+$spacing-02: 0.5rem;
+$spacing-03: 1rem;
+$spacing-03a: 1.25rem;
 $spacing-03--negative: -.75rem;
-$spacing-04: 1.5rem;
-$spacing-05: 3rem;
-$spacing-06: 6rem;
-$spacing-07: 12rem;
+$spacing-04: 1.75rem;
+$spacing-04a: 2.5rem;
+$spacing-05: 3.75rem;
+$spacing-06: 7.5rem;
+$spacing-07: 15rem;

cms/sass/base/_typescale.scss

@@ -1,27 +1,11 @@
-/* Mixins for typescale in minor second
-   Use with headings and text only
-   Base unit: 16px */
-
-@mixin typescale-01 {
-  font-size: 1.802em;
-}
-
-@mixin typescale-02 {
-  font-size: 1.602em;
-}
-
-@mixin typescale-03 {
-  font-size: 1.424em;
-}
-
-@mixin typescale-04 {
-  font-size: 1.266em;
-}
-
-@mixin typescale-05 {
-  font-size: 1.125em;
-}
-
-@mixin typescale-06 {
-  font-size: .889em;
-}
+/* Variables for typescale */
+
+$typescale-01: 2.25rem;
+$typescale-02: 2rem;
+$typescale-03: 1.75rem;
+$typescale-04: 1.5rem;
+$typescale-04--smaller: 1.4rem;
+$typescale-05: 1.25rem;
+$typescale-06--bigger: 1.1rem;
+$typescale-06: 1rem;
+$typescale-07: 0.9rem;