Handling images and css via lib folder and +layout.svelte, getting rid of links in app.html; announcement component featuring a message at the top of the site that can be closed by clicking the cross; added Montserrat fonts directly, omitting google api
@@ -4,7 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/css/normalize.css">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
39
frontend/src/components/announcement.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<!--
|
||||
announcement.svelte
|
||||
|
||||
used to display a short announcement at the top of the site
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let message;
|
||||
export let color = 'red';
|
||||
let noderef;
|
||||
</script>
|
||||
|
||||
<div bind:this={noderef} class="announcement" style="background-color: {color};">
|
||||
<span>{message}</span>
|
||||
<input class="close-button" type="button" value="" on:click={() => noderef.parentNode.removeChild(noderef)}>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.announcement {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
object-fit: contain;
|
||||
-webkit-mask-image: url('$lib/images/icons/ui/cross.svg');
|
||||
mask-image: url('$lib/images/icons/ui/cross.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
34
frontend/src/lib/css/font_imports.css
Normal file
@@ -0,0 +1,34 @@
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-style: normal;
|
||||
src: url("/fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-weight: bold;
|
||||
src: url("/fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
font-style: italic;
|
||||
src: url("/fonts/Montserrat/Montserrat-Italic.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat_Alternates;
|
||||
src: url("/fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat_Alternates;
|
||||
font-weight: bold;
|
||||
src: url("/fonts/Montserrat_Alternates/MontserratAlternates-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat_Alternates;
|
||||
font-style: italic;
|
||||
src: url("/fonts/Montserrat_Alternates/MontserratAlternates-Italic.ttf") format("truetype");
|
||||
}
|
||||
7
frontend/src/lib/css/fonts.css
Normal file
@@ -0,0 +1,7 @@
|
||||
:global(*) {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
:global(h1) {
|
||||
font-family: 'Montserrat_Alternates', sans-serif;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 903 B After Width: | Height: | Size: 903 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 9.7 MiB After Width: | Height: | Size: 9.7 MiB |
|
Before Width: | Height: | Size: 7.3 MiB After Width: | Height: | Size: 7.3 MiB |
10
frontend/src/routes/+layout.svelte
Normal file
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
/** @type {import('./$types').LayoutData} */
|
||||
|
||||
import '$lib/css/normalize.css';
|
||||
import '$lib/css/font_imports.css';
|
||||
import '$lib/css/fonts.css';
|
||||
|
||||
</script>
|
||||
|
||||
<slot></slot>
|
||||
@@ -1,8 +1,9 @@
|
||||
<script>
|
||||
import { PUBLIC_TEST } from '$env/static/public'
|
||||
import Announcement from "../components/announcement.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<Announcement message="This is an announcement" color="blue"/>
|
||||
|
||||
<p>{PUBLIC_TEST}</p>
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> <i>(SvelteKit)</i> to read the <b>SvelteKit</b> documentation</p>
|
||||