Initial commit with sveltekit
This commit is contained in:
Filip Krumpe
@@ -1,29 +0,0 @@
|
||||
<script>
|
||||
import Navbar from "./menu/Navbar.svelte";
|
||||
import Sidebar from "./menu/Sidebar.svelte";
|
||||
|
||||
import Main from "./pages/Main.svelte";
|
||||
|
||||
export let name = "Test 2";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<main class="w-full h-full">
|
||||
<Sidebar bind:open/>
|
||||
<Navbar bind:sidebar={open}/>
|
||||
|
||||
<Main name={name} />
|
||||
</main>
|
||||
|
||||
<svelte:head>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
<main class="p-4 text-gray-300">
|
||||
<svg height="100%" width="100%">
|
||||
<line x1=0 y1=4 x2=400 y2=4/>
|
||||
<line x1=0 y1=34 x2=200 y2=34/>
|
||||
<line x1=0 y1=64 x2=300 y2=64/>
|
||||
<line x1=0 y1=94 x2=280 y2=94/>
|
||||
</svg>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
svg line {
|
||||
stroke: currentColor;
|
||||
stroke-width: 12;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="%svelte.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
@@ -1,10 +0,0 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.querySelector('#svelte-app'),
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
@@ -1,44 +0,0 @@
|
||||
<script>
|
||||
export let open = false
|
||||
</script>
|
||||
|
||||
<button class="text-gray-500 hover:text-gray-700 cursor-pointer mr-4 border-none focus:outline-none" class:open on:click={() => open = !open}>
|
||||
<svg width=32 height=24>
|
||||
<line id="top" x1=0 y1=2 x2=32 y2=2/>
|
||||
<line id="middle" x1=0 y1=12 x2=24 y2=12/>
|
||||
<line id="bottom" x1=0 y1=22 x2=32 y2=22/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
min-height: 24px;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
svg line {
|
||||
stroke: currentColor;
|
||||
stroke-width: 3;
|
||||
transition: transform 0.3s ease-in-out
|
||||
}
|
||||
|
||||
button {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.open svg {
|
||||
transform: scale(0.7)
|
||||
}
|
||||
|
||||
.open #top {
|
||||
transform: translate(6px, 0px) rotate(45deg)
|
||||
}
|
||||
|
||||
.open #middle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.open #bottom {
|
||||
transform: translate(-12px, 9px) rotate(-45deg)
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<svg width=auto height=30>
|
||||
<text x=0 y=20>ACME</text>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
text {
|
||||
fill: currentColor
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 111 B |
@@ -1,4 +0,0 @@
|
||||
<nav class="hidden text-gray-500 uppercase text-bold sm:block">
|
||||
<a href="/about" class="hover:text-gray-700 hover:no-underline">About</a>
|
||||
<a href="/contact" class="hover:text-gray-700 hover:no-underline">Contact</a>
|
||||
</nav>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script>
|
||||
import Logo from './Logo.svelte';
|
||||
import Hamburger from './Hamburger.svelte';
|
||||
import Menu from './Menu.svelte';
|
||||
|
||||
export let sidebar = false;
|
||||
</script>
|
||||
|
||||
<header class="flex justify-between bg-gray-200 p-2 items-center text-gray-600 border-b-2">
|
||||
<nav class="flex">
|
||||
<Hamburger bind:open={sidebar}/>
|
||||
<Logo/>
|
||||
</nav>
|
||||
|
||||
<Menu/>
|
||||
</header>
|
||||
@@ -1,21 +0,0 @@
|
||||
<script>
|
||||
export let open = false
|
||||
</script>
|
||||
|
||||
<aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg" class:open>
|
||||
<nav class="p-12 text-xl">
|
||||
<a class="block" href="/">Home</a>
|
||||
<a class="block" href="/about">About</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
aside {
|
||||
left: -100%;
|
||||
transition: left 0.3s ease-in-out
|
||||
}
|
||||
|
||||
.open {
|
||||
left: 0
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script>
|
||||
export let open=true
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<aside class="abolute w-full h-full p-4" class:open class:hidden={!open}>
|
||||
<h1>Hello {name}!</h1>
|
||||
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
aside {
|
||||
left: -100%;
|
||||
transition: right 0.3s ease-in-out;
|
||||
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff3e00;
|
||||
text-transform: uppercase;
|
||||
font-size: 4em;
|
||||
font-weight: 100;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
Reference in New Issue
Block a user