liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix styling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

2
package.json
View File

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

14
src/App.svelte
View File

@ -9,8 +9,8 @@
import Main from "./pages/profiles/Main.svelte"; import Main from "./pages/profiles/Main.svelte";
// theme cdns (I might make some myself too) // theme cdns (I might make some myself too)
let light = "/styles/light.scss"; let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
let dark = "/styles/dark.scss"; let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
let styleSrc = dark; let styleSrc = dark;
@ -23,17 +23,19 @@
// not sure if there's a better way to handle this // not sure if there's a better way to handle this
function setStyle(style) { function setStyle(style) {
switch (style) { switch (style) {
case "light": styleSrc = light; case "light": document.getElementById("app").className = "light";
styleSrc = light;
localStorage.setItem("pk-style", "light"); localStorage.setItem("pk-style", "light");
break; break;
case "dark": styleSrc = dark; case "dark": document.getElementById("app").className = "dark";
styleSrc = dark;
localStorage.setItem("pk-style", "dark"); localStorage.setItem("pk-style", "dark");
break; break;
default: styleSrc = dark; default: document.getElementById("app").className = "dark";
styleSrc = dark;
localStorage.setItem("pk-style", "dark"); localStorage.setItem("pk-style", "dark");
}; };
}; };
</script> </script>
<svelte:head> <svelte:head>

16
styles/dark.scss
View File

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

11
styles/light.scss
View File

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

14
yarn.lock
View File

@ -1004,7 +1004,7 @@ svelte-navigator@^3.1.5:
dependencies: dependencies:
svelte2tsx "^0.1.151" svelte2tsx "^0.1.151"
svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8: svelte-preprocess@^4.0.0:
version "4.9.8" version "4.9.8"
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da" resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"
integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og== integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==
@ -1016,6 +1016,18 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
sorcery "^0.10.0" sorcery "^0.10.0"
strip-indent "^3.0.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: svelte-tiny-virtual-list@^1.1.7:
version "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" resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"