chore: adds scss

This commit is contained in:
2024-01-22 15:14:30 -05:00
parent 9d764538d3
commit 62fe5095e7
9 changed files with 125 additions and 687 deletions

16
src/app.d.ts vendored
View File

@ -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 { };

View File

@ -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
View File

@ -0,0 +1,8 @@
* {
margin: 0;
padding: 0;
}
body {
background-color: $background;
}

View File

@ -0,0 +1,9 @@
<script lang="ts">
import '../app.scss';
</script>
<svelte:head>
<title>Library Manager</title>
</svelte:head>
<slot />

View File

@ -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
View 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;
}
}