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/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/header.scss

@@ -0,0 +1,71 @@
+#header {
+  .header-site-logo {
+    box-shadow: none;
+    display: inline-block;
+    line-height: 3rem;
+    min-height: 3rem;
+    padding-right: 1rem;
+
+    img {
+      max-height: 3rem;
+    }
+  }
+
+  .toggle-nav {
+    height: 3rem;
+    margin-right: 1rem;
+    width: 3rem;
+    text-indent: -999rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .nav-item {
+      margin-bottom: 5px;
+
+      .nav-link {
+        box-shadow: none;
+        color: $secondary-800;
+
+        &:focus {
+          box-shadow: 0 0 $focus, 0 5px $black;
+        }
+
+        &:hover {
+          color: $secondary-900;
+          box-shadow: 0 5px $secondary-900;
+        }
+      }
+
+      &.active .nav-link {
+        box-shadow: 0 5px $black;
+        color: $black;
+
+      }
+
+    }
+  }
+}
+
+#toggle-nav-primary {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="48" d="M88 152h336M88 256h336M88 360h336"/></svg>');
+
+  &:focus {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000000" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="48" d="M88 152h336M88 256h336M88 360h336"/></svg>');
+  }
+}
+
+#toggle-nav-search {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" class="ionicon" viewBox="0 0 512 512"><path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"/></svg>');
+
+  &:focus {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000000" class="ionicon" viewBox="0 0 512 512"><path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"/></svg>');
+  }
+}
+
+#toggle-nav-translations {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" class="ionicon" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zM267.84 342.92a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z"/></svg>');
+
+  &:focus {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000000" class="ionicon" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zM267.84 342.92a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z"/></svg>');
+  }
+}

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: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M200.66 352H144a96 96 0 010-192h55.41M312.59 160H368a96 96 0 010 192h-56.66M169.07 256h175.86" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"/></svg>');
+      width: 0.75em;
+    }
+  }
+}

raspberry-mint-dev/src/css/custom.scss

@@ -0,0 +1,25 @@
+/* Bootstrap styles */
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/forms/labels";
+@import "bootstrap/scss/forms/form-text";
+@import "bootstrap/scss/forms/form-control";
+@import "bootstrap/scss/forms/form-check";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/transitions";
+
+/* Raspberry Mint styles */
+@import "./text";
+@import "./components/accordion";
+@import "./components/button";
+@import "./components/card";
+@import "./components/header";
+@import "./components/form-check";
+@import "./components/form-control-text";
+@import "./components/section";
+
+/* @todo Do not migrate this to the final product! */
+@import "./dev";