removing app.scss stuff infavor of the current way of doing things

src/routes/blag/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="javascript">
-	let {data} = $props()
+  let { data } = $props();
 
-	$inspect("b",data)
+  $inspect("b", data);
 </script>
 
 <svelte:head>
@@ -13,14 +13,15 @@
   <h1>I might decide to write sometime</h1>
   <ol>
     {#each data.blags as { title, uri, created_at }}
-			<li><a href="blag/{uri}">{title}</a> @ <p>{new Date(created_at).toLocaleDateString()}</p></li>
+      <li>
+        <a href="blag/{uri}">{title}</a> @
+        <p>{new Date(created_at).toLocaleDateString()}</p>
+      </li>
     {/each}
   </ol>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
-
   section {
     margin: 1rem auto;
     min-width: 60rem;
@@ -29,7 +30,7 @@
     align-items: center;
     h1 {
       font-size: 1.5rem;
-			text-shadow: 3px 3px 3px $green;
+      text-shadow: 3px 3px 3px var(--primary-8);
     }
     ol {
       list-style: none;
@@ -42,3 +43,4 @@
     }
   }
 </style>
+

src/routes/blag/[uri]/+page.svelte

@@ -22,7 +22,6 @@
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
   section {
     display: flex;
     flex-direction: column;
@@ -38,14 +37,14 @@
       text-align: center;
     }
     :global(hr) {
-      color: $green;
+      color: var(--primary-1);
     }
     :global(blockquote) {
-      background: $green-42;
-      border-left: 1rem solid $green;
+      background: var(--primary-6);
+      border-left: 1rem solid var(--primary-8);
       padding: 0.5rem 1rem;
       &:before {
-        color: $orange;
+        color: var(--secondary-5);
         content: open-quote;
         font-size: 1.5rem;
         line-height: 0.1rem;
@@ -61,4 +60,3 @@
     }
   }
 </style>
-

src/routes/blag/new/+page.svelte

@@ -53,8 +53,6 @@ Regular; hmm double enter gets a new
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
-
   section {
     width: 100%;
     display: flex;
@@ -74,9 +72,9 @@ Regular; hmm double enter gets a new
           margin: 1rem 0;
           gap: 1rem;
           input {
-            background: $green-42;
-            color: $yellow;
-            border: solid 3px $green;
+            background: var(--primary-7);
+            color: var(--primary-1);
+            border: solid 3px var(--primary-5);
             border-radius: 5px;
             &:focus-visible {
               outline: none;
@@ -88,10 +86,10 @@ Regular; hmm double enter gets a new
           width: 100%;
           height: 40rem;
           line-height: 1.5;
-          border: 1px solid $green;
+          border: 1px solid var(--primary-7);
           border-radius: 5px;
-          background: $green-42;
-          color: $yellow;
+          background: var(--primary-5);
+          color: var(--primary-1);
           font-family: "Garamond";
           &:focus-visible {
             outline: none;
@@ -100,9 +98,9 @@ Regular; hmm double enter gets a new
         button {
           padding: 0.25rem 0.75rem;
           margin-top: 1rem;
-          background-color: $green-42;
-          color: $yellow;
-          border: solid 3px $green;
+          background-color: var(--primary-5);
+          color: var(--primary-1);
+          border: solid 3px var(--primary-7);
           border-radius: 5px;
           align-self: center;
         }
@@ -119,14 +117,14 @@ Regular; hmm double enter gets a new
         text-align: center;
       }
       :global(hr) {
-        color: $green;
+        color: var(--primary-7);
       }
       :global(blockquote) {
-        background: $green-42;
-        border-left: 1rem solid $green;
+        background: var(--primary-7);
+        border-left: 1rem solid var(--primary-7);
         padding: 0.5rem 1rem;
         &:before {
-          color: $orange;
+          color: var(--secondary-5);
           content: open-quote;
           font-size: 1.5rem;
           line-height: 0.1rem;