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

feat: more modular styling

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

3
index.html
View File

@ -5,8 +5,7 @@
<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="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css" />
<link rel='stylesheet' href='/style.css'>
<link rel="stylesheet" href="/styles/dark.scss" />
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">

1
package.json
View File

@ -26,6 +26,7 @@
"gh-pages": "^3.2.3",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"sass": "^1.45.1",
"svelecte": "^3.4.5",
"svelte-autosize": "^1.0.1",
"svelte-icons": "^2.1.0",

4
src/App.svelte
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;

6
src/lib/Footer.svelte
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>

6
src/lib/Navigation.svelte
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>

11
styles/dark.scss Normal file
View File

@ -0,0 +1,11 @@
@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 {
background-color: var(--bs-body-bg) !important;
}
.footer.bg-light {
background-color: var(--bs-dark) !important;
}

153
styles/generic.scss Normal file
View File

@ -0,0 +1,153 @@
/*
This stylesheet should be used globally regardless of theming
some specific rules are meant to be overwritten by the individual themes
*/
// some variables
$breakpoint-xs: 0px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;
$gray-transparent: rgba(128, 128, 128, 0.3);
// general elements
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
blockquote {
padding-left: 0.5em;
margin: 0.25em 0 0.25em 0 !important;
border-left: 4px solid $gray-transparent; // overwrite this in the individual styles
}
code {
color: var(--bs-body-color) !important; // overwrite
}
// pk-webs specific elements
.icon {
height: 1.5em;
width: 1.5em;
margin-right: 0.5em;
}
.avatar {
height: 2.5em;
width: 2.5em;
}
.modal-content {
border: none !important;
}
.banner {
z-index: -200;
width: 100%;
height: 40vh;
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
@media (min-width: $breakpoint-md) {
.banner {
height: 50vh;
}
}
.description a {
text-decoration: none;
color: #457ead !important;
font-weight: bold;
}
// bootstrap elements
.container {
flex: 1 0 auto !important;
}
.nav-tabs * .nav-link {
background-color: var(--bs-body-bg) !important;
border-color: $gray-transparent !important; // overwrite
border-bottom: none !important
}
.nav-tabs {
gap: 0.25em;
}
.nav-tabs {
border-bottom: none !important;
}
.accordion-button::after {
display: none;
}
.pagination {
justify-content: center !important;
}
.page-link {
z-index: initial !important;
}
// svelecte styling
.svelecte-control .sv-control {
border-color: $gray-transparent !important; // overwrite
}
.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
color: var(--bs-body-color) !important; //this can also be optionally overwritten
background-color: var(--bs-body-bg) !important;
}
.sv-item-btn {
background-color: var(--bs-light) !important;
}
.sv-item {
cursor: pointer !important;
}
// discord markdown styling
.d-spoiler {
color: var(--bs-dark); //overwrite
background-color: var(--bs-dark); //overwrite
border-radius: 2px;
transition-delay: 6000s;
}
.d-spoiler::selection {
color: var(--bs-dark); //overwrite
background-color: transparent;
}
.d-spoiler:active {
background-color: $gray-transparent; // overwrite
color: var(--bs-body-color); //overwrite
transition-delay: 0s;
}
.d-emoji {
height: 1.125em;
width: auto;
margin: 0 .05em 0 .1em;
vertical-align: -0.1125em;
}
//twemoji
img.emoji {
height: 1.125em;
width: auto;
margin: 0 .05em 0 .1em;
vertical-align: -0.1125em;
}

6
styles/light.scss Normal file
View File

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

16
yarn.lock
View File

@ -183,7 +183,7 @@ chalk@^4.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chokidar@^3.4.1:
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@ -533,6 +533,11 @@ highlight.js@^11.2.0:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
immutable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -893,6 +898,15 @@ sander@^0.5.0:
mkdirp "^0.5.1"
rimraf "^2.5.2"
sass@^1.45.1:
version "1.45.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.1.tgz#fa03951f924d1ba5762949567eaf660e608a1ab0"
integrity sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
semver@^6.0.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"