fix: fix styling

This commit is contained in:
Spectralitree 2021-12-30 13:02:19 +01:00
parent b64f2adf11
commit c223896a67
6 changed files with 44 additions and 31 deletions

View File

@ -5,7 +5,9 @@
<link rel="icon" href="./myriad.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pk-webs | home</title>
<link rel="stylesheet" href="/styles/generic.scss" />
<link rel="stylesheet" href="/styles/dark.scss" />
<link rel="stylesheet" href="/styles/light.scss" />
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">

View File

@ -13,7 +13,7 @@
"@tsconfig/svelte": "^2.0.1",
"svelte": "^3.44.0",
"svelte-check": "^2.2.7",
"svelte-preprocess": "^4.9.8",
"svelte-preprocess": "^4.10.1",
"svelte-toggle": "^3.1.0",
"tslib": "^2.3.1",
"typescript": "^4.4.4",

View File

@ -9,8 +9,8 @@
import Main from "./pages/profiles/Main.svelte";
// theme cdns (I might make some myself too)
let light = "/styles/light.scss";
let dark = "/styles/dark.scss";
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 styleSrc = dark;
@ -23,17 +23,19 @@
// not sure if there's a better way to handle this
function setStyle(style) {
switch (style) {
case "light": styleSrc = light;
case "light": document.getElementById("app").className = "light";
styleSrc = light;
localStorage.setItem("pk-style", "light");
break;
case "dark": styleSrc = dark;
case "dark": document.getElementById("app").className = "dark";
styleSrc = dark;
localStorage.setItem("pk-style", "dark");
break;
default: styleSrc = dark;
default: document.getElementById("app").className = "dark";
styleSrc = dark;
localStorage.setItem("pk-style", "dark");
};
};
</script>
<svelte:head>

View File

@ -1,15 +1,13 @@
@use "./generic.scss";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css");
// bootstrap
.navbar.bg-light {
.dark > * {
.navbar.bg-light {
background-color: var(--bs-body-bg) !important;
}
}
.footer.bg-light {
.footer.bg-light {
background-color: var(--bs-dark) !important;
}
}
.description a {
.description a {
color: #159bd4 !important;
}
}

View File

@ -1,10 +1,9 @@
@use "./generic.scss";
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css");
.footer.bg-light {
.light > * {
.footer.bg-light {
background-color: var(--bs-light) !important;
}
}
.description a {
.description a {
color: var(--bs-primary) !important;
}
}

View File

@ -1004,7 +1004,7 @@ svelte-navigator@^3.1.5:
dependencies:
svelte2tsx "^0.1.151"
svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
svelte-preprocess@^4.0.0:
version "4.9.8"
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"
integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==
@ -1016,6 +1016,18 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
sorcery "^0.10.0"
strip-indent "^3.0.0"
svelte-preprocess@^4.10.1:
version "4.10.1"
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz#5f435e8aaa82976165bc8f5fa690e2e5ba084760"
integrity sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==
dependencies:
"@types/pug" "^2.0.4"
"@types/sass" "^1.16.0"
detect-indent "^6.0.0"
magic-string "^0.25.7"
sorcery "^0.10.0"
strip-indent "^3.0.0"
svelte-tiny-virtual-list@^1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"