docs: Reorg and improve user experience (#4629)

* docs: Reorg and improve user experience

Reorganize and improve documentation to provide a better
getting started and documentation navigation user experience.

Included changes:
- Adoption of the Diátaxis framework which prioritizes user needs
  and organizes documentation accordingly.
  This approach ensures users can easily find the information they need
  while providing authors with clear guidance on improving documentation
  for a better user experience.
- Implement consistent file and folder naming optimized for SEO.

Closes: aboutcode-org/www.aboutcode.org/issues/39.

Signed-off-by: Thomas Steenbergen <opensource@steenbe.nl>

* Update outdated documentation sections

Also update documentation formatting and pages layout/sections.

Signed-off-by: Ayan Sinha Mahapatra <asmahapatra@aboutcode.org>

---------

Signed-off-by: Thomas Steenbergen <opensource@steenbe.nl>
Signed-off-by: Ayan Sinha Mahapatra <asmahapatra@aboutcode.org>
Co-authored-by: Ayan Sinha Mahapatra <asmahapatra@aboutcode.org>

Author: AyanSinhaMahapatra

README.rst

@@ -111,7 +111,7 @@ If you are new to visualization of scancode results data, start with our
 `newcomer <https://scancode-toolkit.readthedocs.io/en/latest/getting-started/newcomer.html>`_ page.
 
 If you want to compare output changes between different versions of ScanCode,
-or want to look at  scans generated by ScanCode, review our
+or want to look at scans generated by ScanCode, review our
 `reference scans <https://github.com/nexB/scancode-toolkit-reference-scans>`_.
 
 Other Important Documentation Pages:
@@ -128,7 +128,7 @@ Other Important Documentation Pages:
 
 - Documentation on `Contributing to Code Development <https://scancode-toolkit.readthedocs.io/en/latest/contribute/contrib_dev.html>`_
 
-- Documentation on `Plugin Architecture <https://scancode-toolkit.readthedocs.io/en/latest/plugins/plugin_arch.html>`_
+- Documentation on `Plugin Architecture <https://scancode-toolkit.readthedocs.io/en/latest/plugins/plugin-architecture.html>`_
 
 - `FAQ <https://scancode-toolkit.readthedocs.io/en/latest/misc/faq.html>`_
 
@@ -159,7 +159,7 @@ There are a few common ways to `install ScanCode <https://scancode-toolkit.readt
   [Note that this is not supported on arm64 machines]
 
 - `Run in a Docker container with a git clone and "docker run"
-  <https://scancode-toolkit.readthedocs.io/en/latest/getting-started/install.html#installation-via-docker>`_
+  <https://scancode-toolkit.readthedocs.io/en/latest/getting-started/install.html#installation-using-docker>`_
 
 - In Fedora 40+ you can `dnf install scancode-toolkit`
 
@@ -202,7 +202,7 @@ directory::
 
     ./extractcode mytar.tar.bz2
 
-See `all extractcode options <https://scancode-toolkit.readthedocs.io/en/latest/cli-reference/list-options.html#all-extractcode-options>`_
+See `all extractcode options <https://scancode-toolkit.readthedocs.io/en/latest/reference/cli-extractcode.html>`_
 and `how to extract archives <https://scancode-toolkit.readthedocs.io/en/latest/tutorials/how_to_extract_archives.html>`_ for details.
 
 

docs/source/_static/theme_overrides.css

@@ -24,3 +24,50 @@ div.rst-content {
         margin-left: 0px;
     }
 }
+
+.row {
+    clear: both;
+}
+
+.column img {
+    border: 1px solid gray;
+}
+
+@media only screen and (min-width: 1000px),
+only screen and (min-width: 500px) and (max-width: 768px) {
+
+    .column {
+        padding-left: 5px;
+        padding-right: 5px;
+        float: left;
+    }
+
+    .column3 {
+        width: calc(33.3% - 10px);
+    }
+
+    .column2 {
+        width: calc(50% - 11px);
+        position: relative;
+    }
+
+    .column2:before {
+        padding-top: 61.8%;
+        content: "";
+        display: block;
+        float: left;
+    }
+
+    .top-left {
+        border-right: 1px solid var(--color-background-border);
+        border-bottom: 1px solid var(--color-background-border);
+    }
+
+    .top-right {
+        border-bottom: 1px solid var(--color-background-border);
+    }
+
+    .bottom-left {
+        border-right: 1px solid var(--color-background-border);
+    }
+}