OwlBoard/owlboard-svelte
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add assets and header component

Browse Source
This commit is contained in:
Fred Boniface
2023-06-12 21:50:47 +01:00
parent 4b64fb2218
commit eec74572ca
56 changed files with 363 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app.css Normal file
View File

@@ -0,0 +1,71 @@
/* FONTS */
@font-face {
font-family: 'firamono';
src: url('/font/firamono/firamono-regular.woff2') format('woff2'),
url('/font/firamono/firamono-regular.woff') format('woff'),
url('/font/firamono/firamono-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'firamono';
src: url('/font/firamono/firamono-500.woff2') format('woff2'),
url('/font/firamono/firamono-500.woff') format('woff'),
url('/font/firamono/firamono-500.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'urwgothic';
src: url('/font/urwgothic/urwgothic.woff2') format('woff2'),
url('/font/urwgothic/urwgothic.woff') format('woff'),
url('/font/urwgothic/urwgothic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'urwgothic';
src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'),
url('/font/urwgothic/urwgothicDemi.woff') format('woff'),
url('/font/urwgothic/urwgothicDemi.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
/* COLOR VARS */
:root {
--main-bg-color: #404c55;
--second-bg-color: #2b343c; /* Use as first arg in radial gradient */
--accent-color: #007979;
--overlay-color: #3c6f79de;
--main-text-color: #00b7b7;
--second-text-color: #0afdfd;
--note-text-color: #9de7ff;
--link-color: azure;
--box-border-color: ;
--link-visited-color: azure;
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00; /* Use as second arg in radial gradient */
--main-warning-color: orange;
--board-name-color: #fcfc09;
}
html{
width: 100%;
height: 100%;
}
body {
background-color: var(--main-bg-color);
background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
color: var(--main-text-color);
font-family: urwgothic, sans-serif;
text-align: center;
padding-bottom: 60px; /*Footer height*/
}
a {
color: var(--link-color)
}
p {
color: var(--second-text-color)
}

6
src/app.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<link rel="icon" href="%sveltekit.assets%/images/icon.svg">
<meta name="viewport" content="width=device-width">
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

8
src/components/header-menu.svelte
View File

@@ -1,8 +0,0 @@
<div class="headerBar">
</div>
<style>
.headerBar {
background: blue;
height: 50px;
}
</style>

48
src/components/header.svelte Normal file
View File

@@ -0,0 +1,48 @@
<script>
export let title = 'title'
</script>
<div class="headerBar">
<a href="/">
<picture>
<source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
<img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
</picture>
</a>
<header>{title}</header>
</div>
<div class="headerBlock">
<!-- This exists to prevent the headerBar overlapping anything below it -->
</div>
<style>
.headerBar {
background: var(--overlay-color);
position: fixed;
top: 0; left: 0;
width: 100%;
margin: 0;
padding: 0;
height: 50px;
}
img {
position: absolute;
height: 40px;
left: 8px;
top: 5px;
}
header {
font-family: urwgothic, sans-serif;
font-weight: 600;
margin-top: 6px;
margin-left: 20px;
font-size: 20pt;
}
.headerBlock {
height: 50px;
margin: 0;
padding: 0;
}
</style>

4
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,4 @@
<script>
import '../app.css'
</script>
<slot />

21
src/routes/+page.svelte
View File

@@ -1,7 +1,20 @@
<script>
import Menu from '../components/header-menu.svelte'
import Menu from '../components/header.svelte'
export const prerender = true;
const title = "Test Route"
</script>
<Menu />
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<svelte:head>
<title>OwlBoard - {title}</title>
</svelte:head>
<Menu {title} />
<h1>owlboard-svelte</h1>
<p><a href="/public-board?zzz">public-board</a></p>
<style>
h1 {
font-family: urwgothic;
}
</style>

12
src/routes/public-board/+page.svelte
View File

@@ -1,11 +1,9 @@
<script>
export const prerender = true;
import Menu from '../../components/header.svelte'
const testText = "This should not appear in markup"
</script>
<h2>Test Route</h2>
<Menu />
<style>
h2 {
color: palevioletred;
}
</style>
<h1>Test Route</h1>
<p>{testText}</p>