559 style command lists like confval

.ddev/commands/web/npm-watch

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+cd packages/typo3-docs-theme
+npm run watch

Makefile

@@ -53,6 +53,10 @@ assets-install: ## Installs the node-modules needed to build the assets.
 assets-debug: ## Builds assets, keeping the sourcemap. It copies the output files directly into Documentation-GENERATED-temp so they can be tested without reloading.
 	ddev npm-debug
 
+.PHONE: assets-watch
+assets-watch: ## Watches changes of sass files and build automatically on change
+	ddev npm-watch
+
 .PHONE: build-phar
 build-phar: ## Creates a guides.phar file (github workflow)
 	./tools/build-phar.sh

packages/typo3-docs-theme/Gruntfile.js

@@ -167,7 +167,7 @@ module.exports = function (grunt) {
       /* Compile sass changes into theme directory */
       sass: {
         files: [
-          '<%= paths.source %>sass/*.scss'
+          '<%= paths.source %>sass/**/*.scss'
         ],
         tasks: ['sass']
       }

packages/typo3-docs-theme/assets/sass/components/_code.scss

@@ -9,7 +9,7 @@ code {
  */
 .code-block {
     margin-bottom: 0;
-    padding: .75rem;
+    padding: 0.75rem 2rem 0.75rem 0.75rem;
 
     & [data-line-number]::before {
         color: $gray-600;

packages/typo3-docs-theme/assets/sass/components/_command.scss

@@ -0,0 +1,20 @@
+dl.command {
+    @extend .property-card;
+
+    & > dt {
+        a:not([class*=headerlink]) {
+            float: right;
+        }
+    }
+
+    .command-description {
+        margin-block: $spacer;
+    }
+
+    .command-options,
+    .command-arguments {
+        section {
+            margin-left: calc($spacer * 2);
+        }
+    }
+}

packages/typo3-docs-theme/assets/sass/theme.scss

@@ -29,6 +29,7 @@
 @import 'components/button';
 @import 'components/card';
 @import 'components/code';
+@import 'components/command';
 @import 'components/directoryTree';
 @import 'components/frame';
 @import 'components/images';

packages/typo3-docs-theme/package.json

@@ -22,7 +22,8 @@
     },
     "scripts": {
         "build": "grunt build",
-        "debug": "grunt debug"
+        "debug": "grunt debug",
+        "watch": "grunt watch"
     },
     "engines": {
         "node": ">=18.15.0 <21.0.0"

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -23693,7 +23693,7 @@ code {
  */
 .code-block {
   margin-bottom: 0;
-  padding: 0.75rem;
+  padding: 0.75rem 2rem 0.75rem 0.75rem;
 }
 .code-block [data-line-number]::before {
   color: #999999;
@@ -23831,6 +23831,17 @@ code {
     max-width: 60vw;
   }
 }
+dl.command > dt a:not([class*=headerlink]) {
+  float: right;
+}
+dl.command .command-description {
+  margin-block: 1rem;
+}
+dl.command .command-options section,
+dl.command .command-arguments section {
+  margin-left: 2rem;
+}
+
 .directory-tree ul {
   margin-bottom: 0;
   list-style: none;
@@ -25233,7 +25244,7 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   content: "\f071";
 }
 
-.property-card, .rst-content dl.php, dl.confval {
+.property-card, .rst-content dl.php, dl.confval, dl.command {
   background-color: #ffffff;
   border-radius: 0.375rem;
   margin-bottom: 1.5rem;
@@ -25243,20 +25254,20 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dt, .rst-content dl.php > dt, dl.confval > dt {
+.property-card > dt, .rst-content dl.php > dt, dl.confval > dt, dl.command > dt {
   display: block;
   background-color: rgb(242.25, 242.25, 242.25);
   color: #000;
   font-size: 1.25em;
   padding: 0.25em 0.5em;
   margin-bottom: 0.75em;
 }
-.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code {
+.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code, dl.command > dt code {
   color: #000;
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dd, .rst-content dl.php > dd, dl.confval > dd {
+.property-card > dd, .rst-content dl.php > dd, dl.confval > dd, dl.command > dd {
   margin-right: 1rem;
 }