Update styles and configuration to latest.

- Update styles from upstream Sphinx Book Theme.
- In todo directive, replace pencil icon with a clipboard list icon.
- For video directive, limit the width to 100% of the page content container.
- Add YouTube social icon to configuration.
- Rename Twitter social icon to X (formerly Twitter).

docs/conf.py

@@ -192,9 +192,9 @@
             }
         },
         {
-            "name": "Twitter",
-            "url": "https://twitter.com/plone",
-            "icon": "fa-brands fa-square-twitter",
+            "name": "Mastodon",
+            "url": "https://plone.social/@plone",
+            "icon": "fa-brands fa-mastodon",
             "type": "fontawesome",
             "attributes": {
                 "target": "_blank",
@@ -203,9 +203,20 @@
             }
         },
         {
-            "name": "Mastodon",
-            "url": "https://plone.social/@plone",
-            "icon": "fa-brands fa-mastodon",
+            "name": "YouTube",
+            "url": "https://www.youtube.com/@PloneCMS",
+            "icon": "fa-brands fa-youtube",
+            "type": "fontawesome",
+            "attributes": {
+                "target": "_blank",
+                "rel": "noopener me",
+                "class": "nav-link custom-fancy-css"
+            }
+        },
+        {
+            "name": "X (formerly Twitter)",
+            "url": "https://x.com/plone",
+            "icon": "fa-brands fa-square-x-twitter",
             "type": "fontawesome",
             "attributes": {
                 "target": "_blank",

news/36.feature

@@ -0,0 +1,6 @@
+Update styles and configuration to latest. @stevepiercy
+- Update styles from upstream Sphinx Book Theme.
+- In todo directive, replace pencil icon with a clipboard list icon.
+- For video directive, limit the width to 100% of the page content container.
+- Add YouTube social icon to configuration.
+- Rename Twitter social icon to X (formerly Twitter).

src/plone_sphinx_theme/assets/styles/extensions/_todo.scss

@@ -0,0 +1,5 @@
+/* Add Font Awesome 5 icon for todo */
+:root {
+  --pst-icon-clipboard-list: '\f46d';
+  --pst-icon-admonition-todo: var(--pst-icon-clipboard-list);
+}

src/plone_sphinx_theme/assets/styles/extensions/_video.scss

@@ -0,0 +1,4 @@
+/* Prevent videos from overlapping the main content */
+video {
+  width: 100%;
+}

src/plone_sphinx_theme/assets/styles/index.scss

@@ -11,3 +11,6 @@
 @import "components/title";
 
 @import "content/code";
+
+@import "extensions/todo";
+@import "extensions/video";