[DOCS] Switch to using the new cards directive (#2464)

The rest is much easier to read and adjust this was, the output is also nicer
georgringer · Apr 24, 2024 · 96c44ce · 96c44ce
1 parent 7f7b0ea
commit 96c44ce
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 578 deletions.
diff --git a/Documentation/Index.rst b/Documentation/Index.rst
@@ -33,106 +33,48 @@ uses the latest technologies provided by TYPO3 CMS.
 
 ----
 
-.. container:: row m-0 p-0
+..  card-grid::
+    :columns: 1
+    :columns-md: 2
+    :gap: 4
+    :class: pb-4
+    :card-height: 100
 
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Quick start <quickStart>`
 
-      .. container:: card px-0 h-100
+        A quick introduction in how to use this extension.
 
-         .. rst-class:: card-header h3
+    ..  card:: :ref:`Introduction <introduction>`
 
-            .. rubric:: :ref:`Quick start <quickStart>`
+        Introduction to the extension news, general information.
 
-         .. container:: card-body
+    ..  card:: :ref:`Editors manual <userManual>`
 
-            A quick introduction in how to use this extension.
+        Learn how to use the news administration module, how to configure
+        the plugin and how to create news records, tags and categories.
 
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Tutorials <tutorials>`
 
-      .. container:: card px-0 h-100
+        Tutorials and snippets for many frequent use cases.
 
-         .. rst-class:: card-header h3
+    ..  card:: :ref:`Administration <admin-manual>`
 
-            .. rubric:: :ref:`Introduction <introduction>`
+        Install or upgrade EXT:news, learn how to migrate from EXT:tt_news
+        to news or from RealURL to Routes etc.
 
-         .. container:: card-body
+    ..  card:: :ref:`Reference <reference>`
 
-            Introduction to the extension news, general information.
+        In-depth reference about certain aspects of this extension:
+        TypoScript, TSconfig, ViewHelpers etc
 
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Support <support>`
 
-      .. container:: card px-0 h-100
+        here are various ways to get support for EXT:news!
 
-         .. rst-class:: card-header h3
+    ..  card:: :ref:`Addons <addons>`
 
-            .. rubric:: :ref:`Editors manual <userManual>`
+        Various extensions improve EXT:news with additional features.
 
-         .. container:: card-body
-
-            Learn how to use the news administration module, how to configure
-            the plugin and how to create news records, tags and categories.
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Tutorials <tutorials>`
-
-         .. container:: card-body
-
-            Tutorials and snippets for many frequent use cases.
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Administration <admin-manual>`
-
-         .. container:: card-body
-
-            Install or upgrade EXT:news, learn how to migrate from EXT:tt_news
-            to news or from RealURL to Routes etc.
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Reference <reference>`
-
-         .. container:: card-body
-
-            In-depth reference about certain aspects of this extension:
-            TypoScript, TSconfig, ViewHelpers etc
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Support <support>`
-
-         .. container:: card-body
-
-            There are various ways to get support for EXT:news!
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Addons <addons>`
-
-         .. container:: card-body
-
-            Various extensions improve EXT:news with additional features.
 .. Table of Contents
 
 .. toctree::

diff --git a/Documentation/Reference/TsConfig/Index.rst b/Documentation/Reference/TsConfig/Index.rst
@@ -16,44 +16,25 @@ Every TSconfig configuration of extension news starts with :typoscript:`tx_news.
    inside the backend!
 
 
-.. container:: row m-0 p-0
+.. card-grid::
+   :columns: 1
+   :columns-md: 2
+   :gap: 4
+   :class: pb-4
+   :card-height: 100
 
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
+   ..  card:: :ref:`General TSconfig <tsconfigGeneral>`
 
-      .. container:: card px-0 h-100
+      The general configuration covers options available during
+      the creation and editing of news records.
 
-         .. rst-class:: card-header h3
+   ..  card:: :ref:`Administration module <tsconfigAdministration>`
 
-            .. rubric:: :ref:`General TSconfig <tsconfigGeneral>`
+      Configuration of the :guilabel:`Web > News Administration` module
 
-         .. container:: card-body
+   ..  card:: :ref:`Plugin configuration <tsconfigPlugin>`
 
-            The general configuration covers options available during
-            the creation and editing of news records.
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Administration module <tsconfigAdministration>`
-
-         .. container:: card-body
-
-            Configuration of the :guilabel:`Web > News Administration` module
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Plugin configuration <tsconfigPlugin>`
-
-         .. container:: card-body
-
-            This section covers settings which influence the news plugin
+      This section covers settings which influence the news plugin
 
 .. toctree::
    :maxdepth: 3

diff --git a/Documentation/Reference/TypoScript/Index.rst b/Documentation/Reference/TypoScript/Index.rst
@@ -10,32 +10,21 @@ TypoScript
 
 This page is divided into the following sections which are all configurable by using TypoScript:
 
-.. container:: row m-0 p-0
+.. card-grid::
+   :columns: 1
+   :columns-md: 2
+   :gap: 4
+   :class: pb-4
+   :card-height: 100
 
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
+   .. card:: :ref:`Plugin settings <typoscriptPlugin>`
 
-      .. container:: card px-0 h-100
+      This section covers all settings, which can be defined in the
+      plugin itself.
 
-         .. rst-class:: card-header h3
+   .. card:: :ref:`General settings <typoscriptGeneral>`
 
-            .. rubric:: :ref:`Plugin settings <typoscriptPlugin>`
-
-         .. container:: card-body
-
-            This section covers all settings, which can be defined in the
-            plugin itself.
-
-   .. container:: col-12 col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`General settings <typoscriptGeneral>`
-
-         .. container:: card-body
-
-            Configuration of the :guilabel:`Web > News Administration` module
+      Configuration of the :guilabel:`Web > News Administration` module
 
 .. toctree::
    :maxdepth: 3