Add a new theme: Raspberry Mint

.github/workflows/raspberry-mint-dev.yml

@@ -0,0 +1,57 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  pull_request:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ./package.json
+
+      - name: npm install
+        working-directory: ./raspberry-mint-dev
+        run: npm install
+
+      - name: webpack
+        working-directory: ./raspberry-mint-dev
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: './raspberry-mint-dev/build'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.stylelintignore

@@ -1 +1,2 @@
 prebuild/**/*
+/raspberry-mint-dev/build

.stylelintrc.yaml

@@ -3,7 +3,8 @@ extends:
   - stylelint-config-standard-scss
 plugins:
   - stylelint-no-unsupported-browser-features
-  - stylelint-scss
 rules:
   import-notation: string
   no-descending-specificity: ~
+  scss/at-extend-no-missing-placeholder: null
+  scss/no-global-function-names: null

bin/fix

@@ -9,7 +9,7 @@ ruff check --fix .
 ruff format .
 
 # Fix CSS code style violations.
-./node_modules/.bin/stylelint --fix "./betty/**/*.css" "./betty/**/*.scss"
+./node_modules/.bin/stylelint --fix  "./betty/**/*.css" "./betty/**/*.scss" "./raspberry-mint-dev/**/*.css" "./raspberry-mint-dev/**/*.scss"
 
 # Fix JS code style violations.
-./node_modules/.bin/eslint --fix -c ./eslint.config.js ./betty ./playwright
+./node_modules/.bin/eslint --fix -c ./eslint.config.js ./betty ./playwright ./raspberry-mint-dev

bin/test-eslint

@@ -6,4 +6,4 @@ cd "$(dirname "$0")/.."
 
 echo 'Running ESLint...'
 
-./node_modules/.bin/eslint -c ./eslint.config.js ./betty ./playwright "$@"
+./node_modules/.bin/eslint -c ./eslint.config.js ./betty ./playwright ./raspberry-mint-dev "$@"

bin/test-stylelint

@@ -6,4 +6,4 @@ cd "$(dirname "$0")/.."
 
 echo 'Running Stylelint...'
 
-./node_modules/.bin/stylelint "./betty/**/*.css" "./betty/**/*.scss"
+./node_modules/.bin/stylelint "./betty/**/*.css" "./betty/**/*.scss" "./raspberry-mint-dev/**/*.css" "./raspberry-mint-dev/**/*.scss"

eslint.config.js

@@ -11,6 +11,12 @@ const typescriptFiles = [
 ]
 
 export default [
+    {
+        ignores: [
+            "raspberry-mint-dev/build",
+        ],
+    },
+
     // Webpack configuration files.
     {
         files: [

raspberry-mint-dev/.gitignore

@@ -0,0 +1,5 @@
+/build
+/cache
+/node_modules
+/package-lock.json
+

raspberry-mint-dev/package.json

@@ -0,0 +1,37 @@
+{
+  "engines": {
+    "node": ">= 20"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@popperjs/core": "^2.11.8",
+    "babel-loader": "^9.2.1",
+    "bootstrap": "^5.3.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.38.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "file-loader": "^6.2.0",
+    "ionicons": "^7.4.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss-loader": "^8.1.1",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.80.4",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3"
+  },
+  "scripts": {
+    "build": "webpack --mode development",
+    "serve": "webpack serve --mode development --open --watch"
+  },
+  "type": "module"
+}

raspberry-mint-dev/src/css/components/accordion.scss

@@ -0,0 +1,20 @@
+.accordion-button {
+  @extend .h6;
+
+  margin-bottom: 0;
+
+  &:focus {
+    background-color: $focus;
+    box-shadow: 0 0 $focus, 0 2px $black;
+    color: $black !important;
+    text-decoration-color: $black;
+  }
+}
+
+.accordion-body {
+  @extend .mb-3;
+
+  // @todo This does not support RTL scripts.
+  border-right: $border-width solid $black;
+  margin-right: calc((1.5em - $border-width) / 2);
+}

raspberry-mint-dev/src/css/components/button.scss

@@ -0,0 +1,32 @@
+.btn {
+  &:focus {
+    background-color: $focus;
+    border-color: $black;
+    color: $black;
+  }
+}
+
+@mixin button {
+  --bs-btn-active-bg: #{$primary-800};
+  --bs-btn-active-border-color: #{$primary-800};
+  --bs-btn-active-color: #{$white};
+  --bs-btn-hover-bg: #{$primary-700};
+  --bs-btn-hover-border-color: #{$primary-700};
+  --bs-btn-hover-color: #{$white};
+}
+
+.btn.btn-primary {
+  @include button;
+
+  --bs-btn-bg: #{$primary};
+  --bs-btn-border-color: #{$primary};
+  --bs-btn-color: #{$white};
+}
+
+.btn.btn-secondary {
+  @include button;
+
+  --bs-btn-bg: #{$white};
+  --bs-btn-border-color: #{$primary};
+  --bs-btn-color: #{$primary};
+}

raspberry-mint-dev/src/css/components/card.scss

@@ -0,0 +1,4 @@
+.card {
+  border: none;
+  box-shadow: $border-width $border-width $gray-300;
+}

raspberry-mint-dev/src/css/components/close.scss

@@ -0,0 +1,9 @@
+.btn-close {
+  border: 3px solid $white;
+
+  &:focus {
+    background-color: $focus;
+    border-color: $black;
+    color: $black;
+  }
+}

raspberry-mint-dev/src/css/components/form-check.scss

@@ -0,0 +1,17 @@
+.form-check {
+  &:focus-within {
+    .form-check-label {
+      background-color: $focus;
+      box-shadow: 0 0 $focus, 0 2px $black;
+      color: $black;
+      text-decoration-color: $black;
+      outline: none;
+
+    }
+
+    .form-check-input {
+      border-color: $black;
+      background-color: $focus;
+    }
+  }
+}

raspberry-mint-dev/src/css/components/form-control-text.scss

@@ -0,0 +1,17 @@
+.form-control-text {
+  &:focus-within {
+    .form-label {
+      background-color: $focus;
+      box-shadow: 0 0 $focus, 0 2px $black;
+      color: $black;
+      text-decoration-color: $black;
+      outline: none;
+
+    }
+
+    .form-control {
+      border-color: $black;
+      background-color: $focus;
+    }
+  }
+}

raspberry-mint-dev/src/css/components/form.scss

@@ -0,0 +1,4 @@
+// Use `fieldset legend` to be more specific than Bootstrap's own `legend`.
+fieldset legend {
+  @extend .h6;
+}

raspberry-mint-dev/src/css/components/header.scss

@@ -0,0 +1,70 @@
+.site-logo {
+  @include font-size($h5-font-size);
+
+  color: black;
+  box-shadow: none;
+  display: inline-block;
+  padding-right: 1rem;
+
+  img {
+    height: 1.5em;
+    vertical-align: top;
+  }
+}
+
+.header-entry-point {
+  @include button;
+  @include font-size($h5-font-size);
+
+  --bs-btn-bg: #{$white};
+  --bs-btn-border-color: #{$white};
+
+  height: 1lh;
+  text-indent: -999rem;
+  width: 1lh;
+
+  &:hover {
+    --bs-btn-hover-bg: #{$primary-700};
+    --bs-btn-hover-border-color: #{$primary-700};
+    --bs-btn-hover-color: #{$white};
+  }
+}
+
+.header-nav-link.active a {
+  box-shadow: 0 5px $black;
+}
+
+#header-entry-point-primary {
+  background-image: #{icon-primary-navigation($black)};
+
+  &:hover {
+    background-image: #{icon-primary-navigation($white)};
+  }
+}
+
+#header-entry-point-search {
+  background-image: #{icon-search($black)};
+
+  &:hover {
+    background-image: #{icon-search($white)};
+  }
+}
+
+#header-entry-point-language {
+  background-image: #{icon-language($black)};
+
+  &:hover {
+    background-image: #{icon-language($white)};
+  }
+}
+
+@include media-breakpoint-up(md) {
+  #nav-primary {
+    display: block;
+  }
+
+  .nav-primary-links {
+    display: flex;
+    flex-direction: row;
+  }
+}

raspberry-mint-dev/src/css/components/modal.scss

@@ -0,0 +1,3 @@
+.modal-header .btn-close {
+  padding: 0;
+}

raspberry-mint-dev/src/css/components/references.scss

@@ -0,0 +1,5 @@
+.reference {
+  &:target {
+    background-color: $focus;
+  }
+}

raspberry-mint-dev/src/css/components/section.scss

@@ -0,0 +1,31 @@
+.section {
+  &:target {
+    box-shadow: -$border-width 0 0 0 $focus;
+  }
+
+  .section-permalink {
+    box-shadow: none;
+    display: inline-block;
+
+    &:hover .section-permalink-wrapper {
+      background-color: var(--bs-link-hover-color);
+    }
+
+    &:focus {
+      background-color: $focus;
+      box-shadow: 0 0 $focus, 0 2px $black;
+
+      .section-permalink-wrapper {
+        background-color: $black;
+      }
+    }
+
+    .section-permalink-wrapper {
+      background-color: var(--bs-link-color);
+      display: block;
+      height: 0.75em;
+      mask-image: icon-link($black);
+      width: 0.75em;
+    }
+  }
+}