feat: more modular styling

moves styling over to sass and makes each individual theme easier to customize
This commit is contained in:
Spectralitree
2021-12-29 10:23:07 +01:00
parent 80cc442c40
commit 7ddc65bfab
9 changed files with 193 additions and 13 deletions

View File

@@ -9,8 +9,8 @@
import Main from "./pages/profiles/Main.svelte";
// theme cdns (I might make some myself too)
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
let light = "/styles/light.scss";
let dark = "/styles/dark.scss";
let styleSrc = dark;

View File

@@ -2,12 +2,10 @@
import {Navbar, Nav, NavItem, NavLink} from 'sveltestrap';
</script>
<div style="background-color: #292929">
<Navbar color="dark" dark>
<Navbar color="light" light class="footer">
<Nav>
<NavItem>
<NavLink href="https://pluralkit.me/">pluralkit.me</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
</Navbar>

View File

@@ -23,8 +23,7 @@ import { get } from 'svelte/store';
}
</script>
<div style="background-color: #292929" class="mb-4">
<Navbar color="light" light expand="lg">
<Navbar color="light" light expand="lg" class="mb-4">
<NavbarBrand>pk-webs</NavbarBrand>
<NavbarToggler on:click={toggle}></NavbarToggler>
<Collapse {isOpen} navbar expand="lg">
@@ -59,5 +58,4 @@ import { get } from 'svelte/store';
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</Navbar>