bloodwiing/EchoForum
bloodwiing/EchoForum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic styling

Browse Source
This commit is contained in:
Donatas Kirda 2024-05-10 11:35:43 +03:00
parent 7fede754ea
commit 14ce3c0662
Signed by: bloodwiing
GPG Key ID: 63020D8D3F4A164F
10 changed files with 205 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.html
View File

@ -3,6 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Taviraj:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/font.scss">
<link rel="stylesheet" href="/css/base.scss">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

1
src/lib/db.server.js
View File

@ -4,7 +4,6 @@ import ssh2 from 'ssh2';
// @ts-ignore // @ts-ignore
export const sql = postgres( export const sql = postgres(
// 'postgres://doki8902:ChangeItN8w@pgsql3.mif:5432/studentu',
{ {
host: env.PG_HOST, host: env.PG_HOST,
port: parseInt(env.PG_PORT), port: parseInt(env.PG_PORT),

12
src/routes/(app)/+layout.svelte
View File

@ -1 +1,11 @@
<slot /> <style>
.content {
margin: 16px;
width: calc(100% - 16px);
height: 100%;
}
</style>
<div class="content">
<slot />
</div>

2
src/routes/(app)/+page.svelte
View File

@ -1,2 +0,0 @@
<h1>Welcome to Echo</h1>
<p>Currently suppored link: <a href="/posts">/posts</a></p>

2
src/routes/(app)/posts/[name]/+page.server.js
View File

@ -15,8 +15,6 @@ export async function load({ params, locals }) {
const comments = await getCommentsForPost(locals.sql, post_id); const comments = await getCommentsForPost(locals.sql, post_id);
console.log(comments);
return { return {
post: post, post: post,
comments: comments comments: comments

39
src/routes/(app)/posts/[name]/+page.svelte
View File

@ -21,15 +21,32 @@
}) })
</script> </script>
<h1>{post.name}</h1> <style>
{#if post.author} .post {
<a href="/users/{getNamedId(post.author.id, post.author.name)}">{post.author.name}</a> display: flex;
{:else} flex-direction: column;
<p>Deleted</p> }
{/if}
<p>{post.content}</p> h1 {
<div> margin: 0;
{#each commentTree as reply} text-align: center;
<Comment commentNode={reply}></Comment> }
{/each} </style>
<div class="post">
<h1 class="taviraj-light">{post.name}</h1>
{#if post.author}
<a href="/users/{getNamedId(post.author.id, post.author.name)}">{post.author.name}</a>
{:else}
<p>Deleted</p>
{/if}
<p>{post.content}</p>
<div>
{#each commentTree as reply}
<Comment commentNode={reply}></Comment>
{/each}
</div>
</div> </div>

0
src/routes/(app)/+page.server.js → src/routes/+page.server.js
View File

27
src/routes/+page.svelte Normal file
View File

@ -0,0 +1,27 @@
<style>
h1 {
font-size: 2.5rem;
}
.center {
position: absolute;
top: 0px;
width: 100%;
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
--accent-1: rgb(131, 4, 53);
--accent-2: rgb(0, 18, 36);
background: radial-gradient(circle at top, var(--accent-1), transparent),
radial-gradient(circle at bottom, var(--accent-2), transparent),
#111;
}
</style>
<div class="center">
<h1 class="taviraj-light">Welcome to Echo</h1>
<p>Currently suppored link: <a href="/posts">/posts</a></p>
</div>

14
static/css/base.scss Normal file
View File

@ -0,0 +1,14 @@
:root {
font-size: 16px;
}
body {
background-color: #111;
margin: 0;
position: relative;
}
* {
color: white;
}

120
static/css/font.scss Normal file
View File

@ -0,0 +1,120 @@
.taviraj-thin {
font-family: "Taviraj", serif;
font-weight: 100;
font-style: normal;
}
.taviraj-extralight {
font-family: "Taviraj", serif;
font-weight: 200;
font-style: normal;
}
.taviraj-light {
font-family: "Taviraj", serif;
font-weight: 300;
font-style: normal;
}
.taviraj-regular {
font-family: "Taviraj", serif;
font-weight: 400;
font-style: normal;
}
.taviraj-medium {
font-family: "Taviraj", serif;
font-weight: 500;
font-style: normal;
}
.taviraj-semibold {
font-family: "Taviraj", serif;
font-weight: 600;
font-style: normal;
}
.taviraj-bold {
font-family: "Taviraj", serif;
font-weight: 700;
font-style: normal;
}
.taviraj-extrabold {
font-family: "Taviraj", serif;
font-weight: 800;
font-style: normal;
}
.taviraj-black {
font-family: "Taviraj", serif;
font-weight: 900;
font-style: normal;
}
.taviraj-thin-italic {
font-family: "Taviraj", serif;
font-weight: 100;
font-style: italic;
}
.taviraj-extralight-italic {
font-family: "Taviraj", serif;
font-weight: 200;
font-style: italic;
}
.taviraj-light-italic {
font-family: "Taviraj", serif;
font-weight: 300;
font-style: italic;
}
.taviraj-regular-italic {
font-family: "Taviraj", serif;
font-weight: 400;
font-style: italic;
}
.taviraj-medium-italic {
font-family: "Taviraj", serif;
font-weight: 500;
font-style: italic;
}
.taviraj-semibold-italic {
font-family: "Taviraj", serif;
font-weight: 600;
font-style: italic;
}
.taviraj-bold-italic {
font-family: "Taviraj", serif;
font-weight: 700;
font-style: italic;
}
.taviraj-extrabold-italic {
font-family: "Taviraj", serif;
font-weight: 800;
font-style: italic;
}
.taviraj-black-italic {
font-family: "Taviraj", serif;
font-weight: 900;
font-style: italic;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 1000
.nunito-sans-300 {
font-family: "Nunito Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100,
"YTLC" 500;
}