update pop basics article to align with 24.04 features (#1354)

* update pop basics article to align with 24.04 features

* fix lint

* fix (lint): Replace HTML tags with Markdown for italics

* fix (lint): Escape underscore in Pop!_OS

* fix (build): Remove extraneous leading slash from URL

* Revise updated Pop Basics article

- Made the YouTube embeds responsive (so they take up the full width available to them).
- Reworded some of the phrasing around the videos so they flow better with the rest of the content.
- Reworded the second intro sentence to avoid repeating the word `desktop` so many times in a row.
- Changed the `Pop!_OS COSMIC Desktop Environment` header to just `COSMIC Desktop Environment` to avoid confusion about COSMIC's name.
- Un-capitalized `desktop` in `desktop environment` and capitalized `Rust` as a programming language name.
- Added a hyperlink to the COSMIC webpage the first time COSMIC is mentioned.
- Reworded the Launcher's intro sentence.
- Added additional info about the Launcher's web search feature, and tweaked phrasing for the other features.
- Changed Dock wording to avoid confusion about applets vs. app icons (there was some incorrect information describing applets as "which applications are accessible with one click on the dock"; pinned apps are actually all part of a single applet).
- Moved mouse-based Workspaces info out of the shortcuts section into the main section above it, leaving only shortcuts info in the shortcuts section.
- Fixed inconsistencies in the capitalization of COSMIC and various COSMIC components.
- Reworded all generic "this" and "here" hyperlinks to describe what they're linking to for better accessibility and readability.
- Miscellaneous grammar fixes (commas, etc) and typo fixes (consiting, acces).

* fix (lint): Use 2-space indentation for ULs

* feat: Responsive video embeds

---------

Co-authored-by: Jacob Kauffmann <jacob@system76.com>

Author: Socialhappiness

.markdownlint.json

@@ -23,7 +23,8 @@
       "details",
       "summary",
       "a",
-      "br"
+      "br",
+      "div"
     ]
   },
 

assets/styles/responsive-videos.css

@@ -0,0 +1,16 @@
+/* Defines the styling used by https://embedresponsively.com/ to let us embed responsive YouTube videos. */
+
+.embed-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+    max-width: 100%; }
+
+.embed-container iframe, .embed-container object, .embed-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

content/pop-basics.md

@@ -64,7 +64,8 @@ export default async () => ({
     '@fortawesome/fontawesome-svg-core/styles.css',
     '@system76/design/dist/minimal.common.css',
     '@system76/components/dist/index.common.css',
-    '~/assets/styles/code-highlighting.css'
+    '~/assets/styles/code-highlighting.css',
+    '~/assets/styles/responsive-videos.css'
   ],
 
   plugins: [