From 04350b62bccdabe9b33a1ea86f5b5ac96b756b44 Mon Sep 17 00:00:00 2001
From: Gareth Barnard <1058419+gjb2048@users.noreply.github.com>
Date: Thu, 29 Aug 2024 09:33:52 +0100
Subject: [PATCH] Update css generation, ignore stylelint issues for now with
 --force.

---
 Gruntfile.js              |   2 +-
 package.json              |   8 +--
 scss/_progress_chart.scss |   2 +-
 styles.css                | 112 +-------------------------------------
 4 files changed, 7 insertions(+), 117 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index a8ff291..d50d244 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -114,7 +114,7 @@ module.exports = function(grunt) { // jshint ignore:line
     decachephp += 'require(\'' + configfile + '\');';
     decachephp += 'purge_all_caches();';
 
-    const sass = require('node-sass');
+    const sass = require('sass');
 
     // Project configuration.
     grunt.initConfig({
diff --git a/package.json b/package.json
index 7cc4ae2..c2fb266 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,13 @@
     "grunt-exec": "3.0.0",
     "grunt-sass": "3.1.0",
     "grunt-stylelint": "^0.19.0",
-    "node-sass": "9.0.0",
-    "semver": "7.6.0",
-    "stylelint": "^15.11.0",
+    "sass": "1.77.8",
+    "semver": "7.6.3",
+    "stylelint": "^16.9.0",
     "stylelint-checkstyle-formatter": "0.1.2",
     "stylelint-csstree-validator": "^3.0.0",
     "@xmldom/xmldom": ">=0.8.10",
-    "xpath": "0.0.32"
+    "xpath": "0.0.34"
   },
   "engines": {
     "node": ">=20.11.0 <21"
diff --git a/scss/_progress_chart.scss b/scss/_progress_chart.scss
index c14f3eb..e1c1fd6 100644
--- a/scss/_progress_chart.scss
+++ b/scss/_progress_chart.scss
@@ -52,7 +52,7 @@ $doughnut-fill-colour: #ff7518;
 
                     @for $i from 1 through 100 {
                         &.percent-#{$i} {
-                            stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
+                            stroke-dashoffset: calc($doughnut-dasharray - ($i / 100 * $doughnut-dasharray));
                         }
                     }
                 }
diff --git a/styles.css b/styles.css
index 7deddc8..f40303a 100644
--- a/styles.css
+++ b/styles.css
@@ -194,7 +194,6 @@
         margin-left: 480px;
     }
 }
-
 .format-vsf .vsf-progress {
     float: right;
 }
@@ -212,7 +211,6 @@
     min-height: 40px;
     padding: 0 12px;
 }
-
 .format-vsf .vsf-sectionname a {
     color: inherit;
 }
@@ -279,7 +277,6 @@
         width: 50%;
     }
 }
-
 .format-vsf .vsf-inline {
     display: inline;
 }
@@ -297,7 +294,6 @@
 .format-vsf .vsfactivity .no-overflow {
     overflow: unset;
 }
-
 .format-vsf .vsfactivity .no-overflow p {
     text-align: center !important;
 }
@@ -406,7 +402,6 @@
     height: 70px;
     width: 70px;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut {
     position: relative;
     height: 70px;
@@ -416,7 +411,6 @@
     border-radius: 50%;
     box-sizing: border-box;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-text {
     position: absolute;
     top: 50%;
@@ -424,11 +418,9 @@
     transform: translate(-50%, -50%);
     color: #dee2e6;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-text.has-percent {
     color: #ff7518;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator {
     position: absolute;
     top: -15px;
@@ -436,13 +428,11 @@
     height: 70px;
     width: 70px;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg {
     position: relative;
     height: 100%;
     width: 100%;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle {
     stroke-width: 15px;
     stroke: #ff7518;
@@ -452,403 +442,303 @@
     transform: rotate(-90deg);
     transform-origin: center center;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-1 {
     stroke-dashoffset: 171.27;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-2 {
     stroke-dashoffset: 169.54;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-3 {
     stroke-dashoffset: 167.81;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-4 {
     stroke-dashoffset: 166.08;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-5 {
     stroke-dashoffset: 164.35;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-6 {
     stroke-dashoffset: 162.62;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-7 {
     stroke-dashoffset: 160.89;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-8 {
     stroke-dashoffset: 159.16;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-9 {
     stroke-dashoffset: 157.43;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-10 {
     stroke-dashoffset: 155.7;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-11 {
     stroke-dashoffset: 153.97;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-12 {
     stroke-dashoffset: 152.24;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-13 {
     stroke-dashoffset: 150.51;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-14 {
     stroke-dashoffset: 148.78;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-15 {
     stroke-dashoffset: 147.05;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-16 {
     stroke-dashoffset: 145.32;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-17 {
     stroke-dashoffset: 143.59;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-18 {
     stroke-dashoffset: 141.86;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-19 {
     stroke-dashoffset: 140.13;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-20 {
     stroke-dashoffset: 138.4;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-21 {
     stroke-dashoffset: 136.67;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-22 {
     stroke-dashoffset: 134.94;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-23 {
     stroke-dashoffset: 133.21;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-24 {
     stroke-dashoffset: 131.48;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-25 {
     stroke-dashoffset: 129.75;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-26 {
     stroke-dashoffset: 128.02;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-27 {
     stroke-dashoffset: 126.29;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-28 {
     stroke-dashoffset: 124.56;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-29 {
     stroke-dashoffset: 122.83;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-30 {
     stroke-dashoffset: 121.1;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-31 {
     stroke-dashoffset: 119.37;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-32 {
     stroke-dashoffset: 117.64;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-33 {
     stroke-dashoffset: 115.91;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-34 {
     stroke-dashoffset: 114.18;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-35 {
     stroke-dashoffset: 112.45;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-36 {
     stroke-dashoffset: 110.72;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-37 {
     stroke-dashoffset: 108.99;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-38 {
     stroke-dashoffset: 107.26;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-39 {
     stroke-dashoffset: 105.53;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-40 {
     stroke-dashoffset: 103.8;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-41 {
     stroke-dashoffset: 102.07;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-42 {
     stroke-dashoffset: 100.34;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-43 {
     stroke-dashoffset: 98.61;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-44 {
     stroke-dashoffset: 96.88;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-45 {
     stroke-dashoffset: 95.15;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-46 {
     stroke-dashoffset: 93.42;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-47 {
     stroke-dashoffset: 91.69;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-48 {
     stroke-dashoffset: 89.96;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-49 {
     stroke-dashoffset: 88.23;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-50 {
     stroke-dashoffset: 86.5;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-51 {
     stroke-dashoffset: 84.77;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-52 {
     stroke-dashoffset: 83.04;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-53 {
     stroke-dashoffset: 81.31;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-54 {
     stroke-dashoffset: 79.58;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-55 {
     stroke-dashoffset: 77.85;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-56 {
     stroke-dashoffset: 76.12;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-57 {
     stroke-dashoffset: 74.39;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-58 {
     stroke-dashoffset: 72.66;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-59 {
     stroke-dashoffset: 70.93;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-60 {
     stroke-dashoffset: 69.2;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-61 {
     stroke-dashoffset: 67.47;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-62 {
     stroke-dashoffset: 65.74;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-63 {
     stroke-dashoffset: 64.01;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-64 {
     stroke-dashoffset: 62.28;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-65 {
     stroke-dashoffset: 60.55;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-66 {
     stroke-dashoffset: 58.82;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-67 {
     stroke-dashoffset: 57.09;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-68 {
     stroke-dashoffset: 55.36;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-69 {
     stroke-dashoffset: 53.63;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-70 {
     stroke-dashoffset: 51.9;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-71 {
     stroke-dashoffset: 50.17;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-72 {
     stroke-dashoffset: 48.44;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-73 {
     stroke-dashoffset: 46.71;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-74 {
     stroke-dashoffset: 44.98;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-75 {
     stroke-dashoffset: 43.25;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-76 {
     stroke-dashoffset: 41.52;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-77 {
     stroke-dashoffset: 39.79;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-78 {
     stroke-dashoffset: 38.06;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-79 {
     stroke-dashoffset: 36.33;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-80 {
     stroke-dashoffset: 34.6;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-81 {
     stroke-dashoffset: 32.87;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-82 {
     stroke-dashoffset: 31.14;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-83 {
     stroke-dashoffset: 29.41;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-84 {
     stroke-dashoffset: 27.68;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-85 {
     stroke-dashoffset: 25.95;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-86 {
     stroke-dashoffset: 24.22;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-87 {
     stroke-dashoffset: 22.49;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-88 {
     stroke-dashoffset: 20.76;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-89 {
     stroke-dashoffset: 19.03;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-90 {
     stroke-dashoffset: 17.3;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-91 {
     stroke-dashoffset: 15.57;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-92 {
     stroke-dashoffset: 13.84;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-93 {
     stroke-dashoffset: 12.11;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-94 {
     stroke-dashoffset: 10.38;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-95 {
     stroke-dashoffset: 8.65;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-96 {
     stroke-dashoffset: 6.92;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-97 {
     stroke-dashoffset: 5.19;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-98 {
     stroke-dashoffset: 3.46;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-99 {
     stroke-dashoffset: 1.73;
 }
-
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-100 {
     stroke-dashoffset: 0;
 }
@@ -857,4 +747,4 @@
 body:not(.path-course):not(.editing) .modpic,
 body:not(.editing).path-course .modtxt {
     display: none !important;
-}
+}
\ No newline at end of file