Refactor bootstrap style

.devcontainer/devcontainer.json

@@ -6,10 +6,10 @@
     "extensions": [
         "adrianhumphreys.silverstripe",
         "bmewburn.vscode-intelephense-client",
-        "felixfbecker.php-debug",
-		"manuth.eslint-language-service",
-        "ms-vscode.vscode-typescript-tslint-plugin",
-        "neilbrayfield.php-docblocker"
+        "dbaeumer.vscode-eslint",
+        "mikestead.dotenv",
+        "neilbrayfield.php-docblocker",
+        "xdebug.php-debug"
     ],
     "settings": {
         "php.executablePath": null

.vscode/extensions.json

@@ -2,10 +2,10 @@
 	"recommendations": [
 		"adrianhumphreys.silverstripe",
         "bmewburn.vscode-intelephense-client",
-		"felixfbecker.php-debug",
-		"manuth.eslint-language-service",
+        "dbaeumer.vscode-eslint",
+        "mikestead.dotenv",
 		"ms-vscode-remote.remote-containers",
-		"msjsdiag.debugger-for-edge",
-		"neilbrayfield.php-docblocker"
+		"neilbrayfield.php-docblocker",
+		"xdebug.php-debug"
 	]
 }

gulpfile.ts

@@ -10,6 +10,7 @@ import sass = require("gulp-sass");
 import terser = require("gulp-terser");
 import merge = require("merge-stream");
 import minimist = require("minimist");
+import * as dartSass from "sass";
 import { parseArgsStringToArgv } from "string-argv";
 import tsify = require("tsify");
 import { changeExt, dirname, join, parse, relative } from "upath";
@@ -383,7 +384,7 @@ export function Theme(): NodeJS.ReadWriteStream
             sourcemaps: settings.Debug,
             base: settings.StylePath()
         }).pipe(
-            sass(
+            sass(dartSass).sync(
                 {
                     importer: require("node-sass-tilde-importer")
                 }

package.json

@@ -19,54 +19,55 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@manuth/eslint-plugin-typescript": "^2.3.10",
-    "@manuth/tsconfig": "^1.2.9",
+    "@manuth/eslint-plugin-typescript": "^3.2.6",
+    "@manuth/tsconfig": "^3.0.0",
     "@manuth/typescript-eslint-plugin": "^1.3.5",
-    "@types/bootstrap": "^5.0.13",
-    "@types/browser-sync": "^2.26.1",
-    "@types/browserify": "^12.0.36",
+    "@types/bootstrap": "^5.1.9",
+    "@types/browser-sync": "^2.26.3",
+    "@types/browserify": "^12.0.37",
     "@types/fancy-log": "^1.3.1",
-    "@types/fs-extra": "^9.0.11",
-    "@types/gulp": "^4.0.8",
-    "@types/gulp-if": "0.0.33",
-    "@types/gulp-rename": "2.0.0",
-    "@types/gulp-sass": "^4.0.0",
+    "@types/fs-extra": "^9.0.13",
+    "@types/gulp": "^4.0.9",
+    "@types/gulp-if": "0.0.34",
+    "@types/gulp-rename": "2.0.1",
+    "@types/gulp-sass": "^5.0.0",
     "@types/gulp-terser": "^1.2.1",
-    "@types/jquery": "^3.5.5",
+    "@types/jquery": "^3.5.14",
     "@types/merge-stream": "^1.1.2",
-    "@types/minimist": "^1.2.1",
-    "@types/node": "^15.0.2",
+    "@types/minimist": "^1.2.2",
+    "@types/node": "^17.0.21",
     "@types/vinyl-buffer": "^1.0.0",
     "@types/vinyl-source-stream": "0.0.30",
-    "@types/watchify": "^3.11.0",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
-    "bootstrap": "^5.0.0",
-    "browser-sync": "^2.26.14",
+    "@types/watchify": "^3.11.1",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "bootstrap": "^5.1.3",
+    "browser-sync": "^2.27.7",
     "browserify": "^17.0.0",
     "create-symlink": "^1.0.0",
-    "eslint": "^7.26.0",
-    "eslint-plugin-deprecation": "^1.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^34.0.1",
-    "fancy-log": "^1.3.3",
-    "fs-extra": "^10.0.0",
+    "eslint": "^8.10.0",
+    "eslint-plugin-deprecation": "^1.3.2",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsdoc": "^37.9.5",
+    "fancy-log": "^2.0.0",
+    "fs-extra": "^10.0.1",
     "gulp": "^4.0.2",
     "gulp-if": "^3.0.0",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
-    "gulp-terser": "^2.0.1",
+    "gulp-sass": "^5.1.0",
+    "gulp-terser": "^2.1.0",
     "jquery": "^3.6.0",
     "merge-stream": "^2.0.0",
     "minimist": "^1.2.5",
     "node-sass-tilde-importer": "^1.0.2",
     "popper.js": "^1.16.0",
+    "sass": "^1.49.9",
     "string-argv": "^0.3.1",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.5.0",
     "tsify": "^5.0.4",
     "tslint": "^6.1.3",
-    "typescript": "^4.2.4",
+    "typescript": "^4.6.2",
     "typescript-tslint-plugin": "^1.0.1",
     "upath": "^2.0.1",
     "vinyl-buffer": "^1.0.1",

src/Templates/Page.ss

@@ -11,6 +11,7 @@
     </head>
     <body class="d-flex flex-column h-100">
         <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
+            <div class="container-fluid">
                 <a class="navbar-brand" href="$AbsoluteBaseURL">
                     <div class="navbar-title">$SiteConfig.Title</div>
                     <div class="navbar-tagline">$SiteConfig.Tagline</div>
@@ -50,8 +51,9 @@
                         </ul>
                     </div>
                 <% end_if %>
+            </div>
         </nav>
-        <main role="main" class="col-11 flex-shrink-0" style="padding-top: 4.5rem">
+        <main role="main" class="container-fluid col-11 flex-shrink-0" style="padding-top: 4.5rem">
             $Content
             $Form
         </main>

src/Theme/_variables.scss

@@ -1 +1 @@
-$tagline-font-size: $small-font-size / 2;
+$tagline-font-size: calc($small-font-size / 2);