docs: Fix broken links and improve technical guide discoverability (#…

…1887)

apps/for-everyone-website/src/content/docs/getting-started/technical-guide.md → apps/for-everyone-website/src/content/docs/getting-started/technical-guide.mdx

@@ -3,14 +3,28 @@ title: Technical Guide
 description: A technical guide to using "o3" Origami.
 sidebar:
   order: 14
-next: {link: '/getting-started/o3-specification', label: 'O3 Specification'}
 ---
 
+import {LinkButton} from '@financial-times/o3-button';
+
 This technical guide covers Origami "o3", the [latest evolution of Origami](/about/what-is-new/). If you are working with older Origami components, which are still most commonly in use today, we have a separate ["o2" technical guide](/o2-components/technical-guide/).
 
-## Using Origami in your project
+## User guide
 
 We publish multiple Origami packages to npm which are independently versioned and contain a collection of reusable components and patterns.
 
 If you would like to get started quickly, continue to our [guide to using Origami via npm](/getting-started/technical-guide/package-manager-npm). Otherwise keep reading for a general technical overview of Origami components.
 
+<p>
+  <LinkButton href='/getting-started/technical-guide/package-manager-npm' type='secondary' label='User guide' />
+</p>
+
+## Specification
+
+If you would like to contribute to Origami, or better understand how Origami packages are structured, read the Origami specification.
+
+Amoung other things, this covers: manifests; naming conventions; package management; documentation; code structure & languages; and browser support.
+
+<p>
+  <LinkButton href='/getting-started/technical-guide/package-manager-npm' type='secondary' label='Specification' />
+</p>

apps/for-everyone-website/src/content/docs/getting-started/o3-specification.md → apps/for-everyone-website/src/content/docs/getting-started/technical-guide/o3-specification.md

@@ -3,8 +3,6 @@ title: O3 Specification
 description: A technical guide to using "o3" Origami.
 sidebar:
   hidden: true
-prev: {link: '/getting-started/technical-guide', label: 'Technical Guide'}
-next: {link: '/getting-started/package-manager-npm', label: 'Using Components (o3) via npm'}
 ---
 
 ## Code Structure & Languages
@@ -78,11 +76,11 @@ Other documentation sources:
   [customElement](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element),
   registered against the component’s JavaScript class.
 - We recommend components only modify:
-    - The component’s root element, and its children
-    - Elements passed explicitly to the component via JavaScript, and their
-      children
-    - Elements with any other data attribute in the component’s namespace,
-      and their children
+  - The component’s root element, and its children
+  - Elements passed explicitly to the component via JavaScript, and their
+    children
+  - Elements with any other data attribute in the component’s namespace,
+    and their children
 - Components are configurable using data attributes
 - Events triggered by a component should be namespaced under the
   target component’s name
@@ -93,15 +91,15 @@ Other documentation sources:
 - CSS selectors follow the [BEM naming convention](https://en.bem.info/methodology/naming-convention/).
 - Brand specific CSS must be applied using the presence of a parent `data-o3-brand` data attribute. E.g. `[data-o3-brand="core"] .o3-button`.
 - Theme specific CSS must be applied using the `data-o3-theme` data attribute, whether applied directly to the component or a parent element. E.g. `.o3-button[data-o3-theme=inverse],
-  :where([data-o3-theme=inverse]) .o3-button`
+:where([data-o3-theme=inverse]) .o3-button`
 - CSS Custom properties defined in the global
   namespace are prefixed with the component name
 - We recommend components only style:
-    - The component’s root element and its children
-    - Elements with classes prefixed with the component’s name, and their
-      children
-    - Elements with any other data-attribute in the component’s namespace, and
-      their children
+  - The component’s root element and its children
+  - Elements with classes prefixed with the component’s name, and their
+    children
+  - Elements with any other data-attribute in the component’s namespace, and
+    their children
 
 ## Versioning
 

apps/for-everyone-website/src/content/docs/getting-started/package-manager-npm.md → apps/for-everyone-website/src/content/docs/getting-started/technical-guide/package-manager-npm.md

@@ -3,8 +3,6 @@ title: Using Components (o3) via npm
 description: A reference of components
 sidebar:
   hidden: true
-prev: {link: '/getting-started/o3-specification', label: 'O3 Specification'}
-next: {link: '/support', label: "Contact & Support"}
 ---
 
 Origami components are published to npm as [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements), and other standards based web component technologies.
@@ -107,7 +105,7 @@ Origami packages include component CSS for each supported brand `/css/[brand].cs
 @import '@financial-times/o3-tooltip/css/core.css';
 
 body {
-    background-color: var(--o3-color-use-case-page-background);
+	background-color: var(--o3-color-use-case-page-background);
 }
 ```