clean up the examples styles a little in line with #1655 (#1660)

Author: thisisjofrank

_components/Navigation.css

@@ -38,5 +38,6 @@
     top: 4rem;
     height: calc(100vh - 4rem);
     overflow-y: auto;
+    min-width: 330px;
   }
 }

_includes/doc.tsx

@@ -32,11 +32,11 @@ export default function Doc(data: Lume.Data, helpers: Lume.Helpers) {
   return (
     <div
       id="content"
-      class={isExampleScript ? "" : "content"}
+      class={isExampleScript ? "examples-content" : "content"}
     >
       <div
         class={`px-4 sm:px-5 md:px-6 w-full mx-auto 2xl:px-0 ${
-          isExampleScript ? "max-w-[75rem]" : "max-w-[40rem]"
+          isExampleScript ? "max-w-[70rem]" : "max-w-[40rem]"
         }`}
       >
         <article class="mx-auto">

deno.lock

@@ -40,7 +40,10 @@ export default function ExamplePage({ example }: Props) {
         <CopyButton text={contentNoCommentary} />
       </div>
       {example.parsed.files.map((file) => (
-        <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
+        <div
+          class="flex flex-col gap-4 md:gap-0 example-content"
+          key={file.name}
+        >
           {file.snippets.map((snippet, i) => (
             <SnippetComponent
               key={i}

examples/_components/ExamplePage.tsx

@@ -11,14 +11,12 @@ export default function SnippetComponent(props: {
   const html = Prism.highlight(props.snippet.code, Prism.languages.js, "js");
 
   return (
-    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
+    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-4 example-block">
       <div
-        class={`select-none text-sm ${
-          props.snippet.text ? "pb-4 mt-4 " : " "
-        } ${
+        class={`select-none text-sm ${props.snippet.text ? "pb-4" : " "} ${
           props.snippet.code
-            ? "italic text-balance col-span-5 sm:col-span-3 md:pb-0"
-            : "mt-4 col-span-full"
+            ? "italic md:text-balance md:text-right col-span-5 sm:col-span-3 md:pb-0 snippet-comment"
+            : "col-span-full mt-8"
         }`}
       >
         {props.snippet.text}
@@ -37,7 +35,7 @@ export default function SnippetComponent(props: {
             {props.filename}
           </span>
         )}
-        <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
+        <div class="-mx-4 h-full sm:mx-0 overflow-auto relative gfm-highlight">
           {props.snippet.code && (
             <div
               data-color-mode="light"

examples/_components/SnippetComponent.tsx

@@ -2,7 +2,7 @@
  * @title Checking for directory existence
  * @difficulty beginner
  * @tags cli, deploy
- * @run --allow-read --allow-write <url>
+ * @run -R -W <url>
  * @group File System
  *
  * When creating directories it can be useful to first ensure that

examples/scripts/checking_directory_existence.ts

@@ -2,7 +2,7 @@
  * @title Checking for file existence
  * @difficulty beginner
  * @tags cli, deploy
- * @run --allow-read --allow-write <url>
+ * @run -R -W <url>
  * @group File System
  *
  * When creating files it can be useful to first ensure that

examples/scripts/checking_file_existence.ts

@@ -2,7 +2,7 @@
  * @title Creating & removing directories
  * @difficulty beginner
  * @tags cli
- * @run --allow-write <url>
+ * @run -W <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.mkdir} Doc: Deno.mkdir
  * @resource {https://docs.deno.com/api/deno/~/Deno.remove} Doc: Deno.remove
  * @group File System

examples/scripts/create_remove_directories.ts

@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @group Data Processing
- * @run --allow-read data-processing.ts
+ * @run -R data-processing.ts
  *
  * Demonstrates using Deno's @std/collections library for processing user data.
  * This example uses pick, omit, and partition to manipulate data structures.

examples/scripts/data_processing.ts

@@ -2,7 +2,7 @@
  * @title Running DNS queries
  * @difficulty beginner
  * @tags cli, deploy
- * @run --allow-net <url>
+ * @run -N <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.resolveDns} Doc: Deno.resolveDns
  * @resource {https://developer.mozilla.org/en-US/docs/Glossary/DNS} MDN: DNS
  * @group Network