Updating the main page with new formating and some style changes

Add new blag page stuff

src/routes/+layout.svelte

@@ -7,6 +7,11 @@
   // $inspect("l",data);
 </script>
 
+<svelte:head>
+  <title>Sludge and Link</title>
+  <meta name="description" content="Sludge's internet facing spot" />
+</svelte:head>
+
 <nav>
   <a href="/">Sludge</a>
   <a href="/fest">Fest</a>
@@ -19,7 +24,7 @@
 </main>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  @use "/src/app.scss" as *;
   :global(body) {
     background-color: $green-42;
     // '3px-tile.png',
@@ -28,22 +33,22 @@
     // 'binding-dark.png',
     // '45-degree-fabric-light.png'
 
-    background-image: url('/patterns/arabesque.png');
+    background-image: url("/patterns/arabesque.png");
     background-attachment: fixed;
   }
-  nav{
+  nav {
     padding: 0 20%;
     display: flex;
     gap: 1rem;
     justify-content: flex-end;
     text-shadow: 3px 3px 3px $green;
-    a{
+    a {
       font-weight: 700;
       text-decoration: none;
-      &:first-child{
+      &:first-child {
         margin-right: auto;
       }
-      &:hover{
+      &:hover {
         color: $orange;
       }
     }
@@ -54,8 +59,59 @@
     flex-direction: row;
   }
 
-
+  :global(
-  :global(html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video){
+      html,
+      body,
+      div,
+      span,
+      object,
+      iframe,
+      figure,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      blockquote,
+      pre,
+      a,
+      code,
+      em,
+      img,
+      small,
+      strike,
+      strong,
+      sub,
+      sup,
+      tt,
+      b,
+      u,
+      i,
+      ol,
+      ul,
+      li,
+      fieldset,
+      form,
+      label,
+      table,
+      caption,
+      tbody,
+      tfoot,
+      thead,
+      tr,
+      th,
+      td,
+      main,
+      canvas,
+      embed,
+      footer,
+      header,
+      nav,
+      section,
+      video
+    ) {
     margin: 0;
     padding: 0;
     border: 0;
@@ -69,60 +125,60 @@
     -webkit-font-smoothing: antialiased;
   }
 
-  @font-face{
+  @font-face {
-    font-family: 'Baskerville';
+    font-family: "Baskerville";
     font-display: swap;
     font-style: italic;
     font-weight: 500;
-    src: url(/font/LibreBaskerville-Italic.otf) format('opentype');
+    src: url(/font/LibreBaskerville-Italic.otf) format("opentype");
   }
-  @font-face{
+  @font-face {
-    font-family: 'Baskerville';
+    font-family: "Baskerville";
     font-display: swap;
     font-style: normal;
     font-weight: 900;
-    src: url(/font/LibreBaskerville-Bold.otf) format('opentype');
+    src: url(/font/LibreBaskerville-Bold.otf) format("opentype");
   }
-  @font-face{
+  @font-face {
-    font-family: 'Baskerville';
+    font-family: "Baskerville";
     font-display: swap;
     font-style: normal;
     font-weight: 500;
-    src: url(/font/LibreBaskerville-Regular.otf) format('opentype');
+    src: url(/font/LibreBaskerville-Regular.otf) format("opentype");
   }
 
-  @font-face{
+  @font-face {
-    font-family: 'Initials';
+    font-family: "Initials";
     font-display: swap;
     font-style: normal;
     font-weight: 500;
-    src: url(/font/EBGaramond-Initials.otf) format('opentype');
+    src: url(/font/EBGaramond-Initials.otf) format("opentype");
   }
-  @font-face{
+  @font-face {
-    font-family: 'Initials';
+    font-family: "Initials";
     font-display: swap;
     font-style: normal;
     font-weight: 100;
-    src: url(/font/EBGaramond-InitialsF1.otf) format('opentype');
+    src: url(/font/EBGaramond-InitialsF1.otf) format("opentype");
   }
-  @font-face{
+  @font-face {
-    font-family: 'Initials';
+    font-family: "Initials";
     font-display: swap;
     font-style: normal;
     font-weight: 200;
-    src: url(/font/EBGaramond-InitialsF2.otf) format('opentype');
+    src: url(/font/EBGaramond-InitialsF2.otf) format("opentype");
   }
 
-  @font-face{
+  @font-face {
-    font-family: 'Garamond';
+    font-family: "Garamond";
     font-display: swap;
     font-style: italic;
-    src: url(/font/EBGaramond-Italic.ttf) format('truetype');
+    src: url(/font/EBGaramond-Italic.ttf) format("truetype");
   }
-  @font-face{
+  @font-face {
-    font-family: 'Garamond';
+    font-family: "Garamond";
     font-display: swap;
     font-style: normal;
-    src: url(/font/EBGaramond.ttf) format('truetype');
+    src: url(/font/EBGaramond.ttf) format("truetype");
   }
 </style>

src/routes/+page.svelte

@@ -38,6 +38,7 @@
 
 <style lang="scss">
   @use "/src/app.scss" as *;
+  @use "sass:color";
 
   section {
     max-width: 60rem;
@@ -53,5 +54,9 @@
         font-size: 4.5rem;
       }
     }
+    h3 {
+      color: color.scale($yellow, $alpha: -35%);
+      font-size: 0.75rem;
+    }
   }
 </style>

src/routes/blag/new/+page.server.ts

@@ -1,8 +1,9 @@
-export async function load({}) {
+export async function load({ }) {
   console.log("new blag")
 }
 export const actions = {
-  default: async({cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest}) => {
+  default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
-    
+    let data = await request.formData();
+    console.log(data);
   }
 }

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

@@ -1,7 +1,7 @@
 <script lang="javascript">
-  import { marked } from 'marked'
+  import { marked } from "marked";
 
-  let value = $state(`# Heading 1
+  let value = $state(`# **H**eading 1
 This is a paragraph that I need to put in *here is some italics*
 1. This is a list
 2. This is a second list
@@ -11,14 +11,14 @@ This is a paragraph that I need to put in *here is some italics*
 ---
 **Bold**
 
-Regular; hmm double enter gets a new \<p>
+Regular; hmm double enter gets a new 
 
 > This is a quote
 > This is starting to work
 > It will only line over on width basis I guess that makes sense
-`)
+`);
 
-  $inspect("n", value)
+  $inspect("n", value);
 </script>
 
 <svelte:head>
@@ -29,11 +29,18 @@ Regular; hmm double enter gets a new \<p>
 <section>
   <div>
     <h1>Editor</h1>
-    <div>
+    <form method="POST">
-      <textarea bind:value={value}>
+      <label>
-
+        <p>Title</p>
-      </textarea>
+        <input type="text" name="title" />
-    </div> 
+      </label>
+      <label>
+        <p>URI</p>
+        <input type="text" name="uri" />
+      </label>
+      <textarea name="body" bind:value></textarea>
+      <button>Post</button>
+    </form>
   </div>
   <div id="preview">
     <h1>Preview</h1>
@@ -44,14 +51,29 @@ Regular; hmm double enter gets a new \<p>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  @use "/src/app.scss" as *;
   section {
     width: 100%;
     display: flex;
     gap: 1rem;
-    div{
+    div {
-      margin: 0 auto;
       flex-basis: 45%;
+      margin: 0 auto;
+      form {
+        label {
+          display: flex;
+          margin-top: 1rem;
+          gap: 1rem;
+          input {
+            background: $green-42;
+            color: $yellow;
+            border: solid 3px $green;
+            border-radius: 5px;
+            &:focus-visible {
+              outline: none;
+            }
+          }
+        }
         textarea {
           resize: none;
           width: 100%;
@@ -64,15 +86,18 @@ Regular; hmm double enter gets a new \<p>
           font-family: "Garamond";
         }
       }
-    em{
-      // font-weight: 240;
-      color: black;
     }
-    #preview{
+
-      :global(h1){
+    #preview {
+      :global(h1) {
+        :global(strong) {
           font-family: "Initials";
+          font-size: 1.5rem;
+          font-weight: 500;
         }
-      :global(hr){
+        text-align: center;
+      }
+      :global(hr) {
         color: $green;
       }
       :global(blockquote) {
@@ -82,15 +107,15 @@ Regular; hmm double enter gets a new \<p>
         &:before {
           color: $orange;
           content: open-quote;
-          font-size: 2rem;
+          font-size: 1.5rem;
           line-height: 0.1rem;
-          vertical-align: -0.6rem;
+          vertical-align: -0.9rem;
         }
         &:p {
           display: inline;
         }
       }
-
     }
   }
 </style>
+