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" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" href="%sveltekit.assets%/css/normalize.css">
|
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<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 |
@@ -1 +1 @@
|
|||||||
// place files you want to import through the `$lib` alias in this folder.
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
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>
|
<script>
|
||||||
import { PUBLIC_TEST } from '$env/static/public'
|
import Announcement from "../components/announcement.svelte";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Welcome to SvelteKit</h1>
|
<Announcement message="This is an announcement" color="blue"/>
|
||||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
|
||||||
|
|
||||||
<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>
|
||||||