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
+88 -32
View File
@@ -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(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>
src/routes/+page.svelte
+5
View File
@@ -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
+4 -3
View File
@@ -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
+47 -22
View File
@@ -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>
<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,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{
margin: 0 auto;
div {
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>