From 72367b30d24cf1d0f29be4a494899f13be636f8c Mon Sep 17 00:00:00 2001
From: Will Stensvold <will@sludge.link>
Date: Tue, 24 Jun 2025 21:50:20 -0500
Subject: [PATCH] Updating the main page with new formating and some style
 changes Add new blag page stuff

---
 src/routes/+layout.svelte           | 134 ++++++++++++++++++++--------
 src/routes/+page.svelte             |   5 ++
 src/routes/blag/new/+page.server.ts |  11 +--
 src/routes/blag/new/+page.svelte    | 105 +++++++++++++---------
 4 files changed, 171 insertions(+), 84 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2d7d9a4..45e542c 100644
--- a/src/routes/+layout.svelte
+++ b/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,31 +24,31 @@
 </main>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  @use "/src/app.scss" as *;
   :global(body) {
-    background-color: $green-42;   
-  // '3px-tile.png',
-  // 'arabesque.png',
-  // 'beige-paper.png',
-  // 'binding-dark.png',
-  // '45-degree-fabric-light.png'
+    background-color: $green-42;
+    // '3px-tile.png',
+    // 'arabesque.png',
+    // 'beige-paper.png',
+    // '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(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){
+  :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
+    ) {
     margin: 0;
     padding: 0;
     border: 0;
@@ -69,60 +125,60 @@
     -webkit-font-smoothing: antialiased;
   }
 
-  @font-face{
-    font-family: 'Baskerville';
+  @font-face {
+    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-family: 'Baskerville';
+  @font-face {
+    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-family: 'Baskerville';
+  @font-face {
+    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-family: 'Initials';
+  @font-face {
+    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-family: 'Initials';
+  @font-face {
+    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-family: 'Initials';
+  @font-face {
+    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-family: 'Garamond';
+
+  @font-face {
+    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-family: 'Garamond';
+  @font-face {
+    font-family: "Garamond";
     font-display: swap;
     font-style: normal;
-    src: url(/font/EBGaramond.ttf) format('truetype');
+    src: url(/font/EBGaramond.ttf) format("truetype");
   }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0989ad4..084a168 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/blag/new/+page.server.ts b/src/routes/blag/new/+page.server.ts
index fc485bf..e01fd7b 100644
--- a/src/routes/blag/new/+page.server.ts
+++ b/src/routes/blag/new/+page.server.ts
@@ -1,8 +1,9 @@
-export async function load({}) {
-	console.log("new blag")
+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);
   }
-}
\ No newline at end of file
+}
diff --git a/src/routes/blag/new/+page.svelte b/src/routes/blag/new/+page.svelte
index b7f85eb..ecb44eb 100644
--- a/src/routes/blag/new/+page.svelte
+++ b/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,29 +11,36 @@ 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>
-	<title></title>
-	<meta name="description" content="" />
+  <title></title>
+  <meta name="description" content="" />
 </svelte:head>
 
 <section>
-	<div>
+  <div>
     <h1>Editor</h1>
-    <div>
-      <textarea bind:value={value}>
-
-      </textarea>
-    </div> 
+    <form method="POST">
+      <label>
+        <p>Title</p>
+        <input type="text" name="title" />
+      </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,35 +51,53 @@ Regular; hmm double enter gets a new \<p>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
-	section {
+  @use "/src/app.scss" as *;
+  section {
     width: 100%;
     display: flex;
     gap: 1rem;
-    div{
-      margin: 0 auto;
+    div {
       flex-basis: 45%;
-      textarea {
-        resize: none;
-        width: 100%;
-        height: 40rem;
-        line-height: 1.5;
-        border-radius: 5px;
-        border: 1px solid $green;
-        background: $green-42;
-        color: $yellow;
-        font-family: "Garamond";
+      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%;
+          height: 40rem;
+          line-height: 1.5;
+          border-radius: 5px;
+          border: 1px solid $green;
+          background: $green-42;
+          color: $yellow;
+          font-family: "Garamond";
+        }
       }
     }
-    em{
-      // font-weight: 240;
-      color: black;
-    }
-    #preview{
-      :global(h1){
-        font-family: "Initials";
+
+    #preview {
+      :global(h1) {
+        :global(strong) {
+          font-family: "Initials";
+          font-size: 1.5rem;
+          font-weight: 500;
+        }
+        text-align: center;
       }
-      :global(hr){
+      :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>
\ No newline at end of file
+  }
+</style>
+