chore: adds scss
This commit is contained in:
16
src/app.d.ts
vendored
16
src/app.d.ts
vendored
@ -1,13 +1,13 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
export { };
|
||||
|
21
src/app.html
21
src/app.html
@ -1,12 +1,15 @@
|
||||
<!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, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
8
src/app.scss
Normal file
8
src/app.scss
Normal file
@ -0,0 +1,8 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $background;
|
||||
}
|
9
src/routes/+layout.svelte
Normal file
9
src/routes/+layout.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import '../app.scss';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Library Manager</title>
|
||||
</svelte:head>
|
||||
|
||||
<slot />
|
@ -1,2 +1,4 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<p>
|
||||
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
|
||||
</p>
|
||||
|
52
src/variables.scss
Normal file
52
src/variables.scss
Normal file
@ -0,0 +1,52 @@
|
||||
// Gruvbox colors.
|
||||
$background: #282828;
|
||||
$dark-red: #cc241d;
|
||||
$dark-green: #98971a;
|
||||
$dark-yellow: #d79921;
|
||||
$dark-blue: #458588;
|
||||
$dark-purple: #b16286;
|
||||
$dark-aqua: #689d6a;
|
||||
$dark-gray: #928374;
|
||||
|
||||
$foreground: #ebdbb2;
|
||||
$light-red: #fb4934;
|
||||
$light-green: #b8bb26;
|
||||
$light-yellow: #fabd2f;
|
||||
$light-blue: #83a598;
|
||||
$light-purple: #d3869b;
|
||||
$light-aqua: #8ec07c;
|
||||
$light-gray: #a89984;
|
||||
|
||||
// Screen size definitions.
|
||||
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape).
|
||||
$screen-md-min: 768px; // Small tablets (portrait).
|
||||
$screen-lg-min: 992px; // Tablets and small desktops.
|
||||
$screen-xl-min: 1200px; // Large tablets and desktops.
|
||||
|
||||
// Small devices
|
||||
@mixin sm {
|
||||
@media (min-width: #{$screen-sm-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices
|
||||
@mixin md {
|
||||
@media (min-width: #{$screen-md-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Large devices
|
||||
@mixin lg {
|
||||
@media (min-width: #{$screen-lg-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra-large devices
|
||||
@mixin xl {
|
||||
@media (min-width: #{$screen-xl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user