luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Created new main card and created a container for inner element of main page.

Browse Source
This commit is contained in:
Luke Else 2023-08-31 22:27:21 +01:00
parent ba437de706
commit d69078ff26
4 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" type="text/css" href="vars.css">
<meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark" />
%sveltekit.head%
@ -23,24 +24,12 @@
--font: Consolas, 'Cascadia Code';
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 110%;
color: var(--fg);
margin: 2rem;
}
nav {
position: relative;
overflow:visible;
display: flex;
justify-content: center;
gap: 1.5em;
padding: 0em 0em 1.5em 0em;
z-index: 2;
height: 1.5em;
border-radius: 4px;
}
a {
text-decoration: none;
position: relative;

24
src/routes/+layout.svelte
View File

@ -1,4 +1,22 @@
<style>
.main-container {
margin-left: 10%;
margin-right: 10%;
}
nav {
position: relative;
overflow:visible;
display: flex;
justify-content: center;
gap: 1.5em;
padding: 0em 0em 1.5em 0em;
z-index: 2;
height: 1.5em;
border-radius: 4px;
}
</style>
<nav>
<a href = "test">//tab</a>
@ -6,4 +24,8 @@
<a href = "test">//tab</a>
</nav>
<slot />
<div class="main-container">
<slot />
</div>

6
src/routes/+page.svelte
View File

@ -1,2 +1,8 @@
<script>
import Main from './Main.svelte';
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<Main></Main>

19
src/routes/main.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
</script>
<style>
.card {
background-color: var(--bg-grad);
border-radius: 1em;
padding: .1em 2em .1em 2em;
}
h1 {
color: var(--red);
}
</style>
<div class="card">
<h1>This is a test card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu dictum varius duis at consectetur. Enim lobortis scelerisque fermentum dui. Eu mi bibendum neque egestas congue quisque egestas. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Eget est lorem ipsum dolor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Risus quis varius quam quisque id diam vel quam. Arcu non sodales neque sodales ut. Malesuada fames ac turpis egestas integer eget aliquet nibh. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.</p>
</div>