will/sludge-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating the main page with new formating and some style changes

Browse Source 
Add new blag page stuff
This commit is contained in:
Will Stensvold
2025-06-24 21:50:20 -05:00
parent f24d3c6cd5
commit 72367b30d2
4 changed files with 171 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+93 -37
View File
@@ -7,6 +7,11 @@
// $inspect("l",data); // $inspect("l",data);
</script> </script>
<svelte:head>
<title>Sludge and Link</title>
<meta name="description" content="Sludge's internet facing spot" />
</svelte:head>
<nav> <nav>
<a href="/">Sludge</a> <a href="/">Sludge</a>
<a href="/fest">Fest</a> <a href="/fest">Fest</a>
@@ -19,31 +24,31 @@
</main> </main>
<style lang="scss"> <style lang="scss">
@use '/src/app.scss' as *; @use "/src/app.scss" as *;
:global(body) { :global(body) {
background-color: $green-42; background-color: $green-42;
// '3px-tile.png', // '3px-tile.png',
// 'arabesque.png', // 'arabesque.png',
// 'beige-paper.png', // 'beige-paper.png',
// 'binding-dark.png', // 'binding-dark.png',
// '45-degree-fabric-light.png' // '45-degree-fabric-light.png'
background-image: url('/patterns/arabesque.png'); background-image: url("/patterns/arabesque.png");
background-attachment: fixed; background-attachment: fixed;
} }
nav{ nav {
padding: 0 20%; padding: 0 20%;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: flex-end; justify-content: flex-end;
text-shadow: 3px 3px 3px $green; text-shadow: 3px 3px 3px $green;
a{ a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
&:first-child{ &:first-child {
margin-right: auto; margin-right: auto;
} }
&:hover{ &:hover {
color: $orange; color: $orange;
} }
} }
@@ -54,8 +59,59 @@
flex-direction: row; 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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@@ -69,60 +125,60 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@font-face{ @font-face {
font-family: 'Baskerville'; font-family: "Baskerville";
font-display: swap; font-display: swap;
font-style: italic; font-style: italic;
font-weight: 500; 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-display: swap;
font-style: normal; font-style: normal;
font-weight: 900; 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-display: swap;
font-style: normal; font-style: normal;
font-weight: 500; 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-display: swap;
font-style: normal; font-style: normal;
font-weight: 500; 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-display: swap;
font-style: normal; font-style: normal;
font-weight: 100; 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-display: swap;
font-style: normal; font-style: normal;
font-weight: 200; 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-display: swap;
font-style: italic; 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-display: swap;
font-style: normal; font-style: normal;
src: url(/font/EBGaramond.ttf) format('truetype'); src: url(/font/EBGaramond.ttf) format("truetype");
} }
</style> </style>
src/routes/+page.svelte
+5
View File
@@ -38,6 +38,7 @@
<style lang="scss"> <style lang="scss">
@use "/src/app.scss" as *; @use "/src/app.scss" as *;
@use "sass:color";
section { section {
max-width: 60rem; max-width: 60rem;
@@ -53,5 +54,9 @@
font-size: 4.5rem; font-size: 4.5rem;
} }
} }
h3 {
color: color.scale($yellow, $alpha: -35%);
font-size: 0.75rem;
}
} }
</style> </style>
src/routes/blag/new/+page.server.ts
+5 -4
View File
@@ -1,8 +1,9 @@
export async function load({}) { export async function load({ }) {
console.log("new blag") console.log("new blag")
} }
export const actions = { 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
+64 -39
View File
@@ -1,7 +1,7 @@
<script lang="javascript"> <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* This is a paragraph that I need to put in *here is some italics*
1. This is a list 1. This is a list
2. This is a second 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** **Bold**
Regular; hmm double enter gets a new \<p> Regular; hmm double enter gets a new
> This is a quote > This is a quote
> This is starting to work > This is starting to work
> It will only line over on width basis I guess that makes sense > It will only line over on width basis I guess that makes sense
`) `);
$inspect("n", value) $inspect("n", value);
</script> </script>
<svelte:head> <svelte:head>
<title></title> <title></title>
<meta name="description" content="" /> <meta name="description" content="" />
</svelte:head> </svelte:head>
<section> <section>
<div> <div>
<h1>Editor</h1> <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>
<div id="preview"> <div id="preview">
<h1>Preview</h1> <h1>Preview</h1>
@@ -44,35 +51,53 @@ Regular; hmm double enter gets a new \<p>
</section> </section>
<style lang="scss"> <style lang="scss">
@use '/src/app.scss' as *; @use "/src/app.scss" as *;
section { section {
width: 100%; width: 100%;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
div{ div {
margin: 0 auto;
flex-basis: 45%; flex-basis: 45%;
textarea { margin: 0 auto;
resize: none; form {
width: 100%; label {
height: 40rem; display: flex;
line-height: 1.5; margin-top: 1rem;
border-radius: 5px; gap: 1rem;
border: 1px solid $green; input {
background: $green-42; background: $green-42;
color: $yellow; color: $yellow;
font-family: "Garamond"; 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; #preview {
color: black; :global(h1) {
} :global(strong) {
#preview{ font-family: "Initials";
:global(h1){ font-size: 1.5rem;
font-family: "Initials"; font-weight: 500;
}
text-align: center;
} }
:global(hr){ :global(hr) {
color: $green; color: $green;
} }
:global(blockquote) { :global(blockquote) {
@@ -82,15 +107,15 @@ Regular; hmm double enter gets a new \<p>
&:before { &:before {
color: $orange; color: $orange;
content: open-quote; content: open-quote;
font-size: 2rem; font-size: 1.5rem;
line-height: 0.1rem; line-height: 0.1rem;
vertical-align: -0.6rem; vertical-align: -0.9rem;
} }
&:p { &:p {
display: inline; display: inline;
} }
} }
} }
} }
</style> </style>