diff --git a/index.html b/index.html index b48b617e..6e78bb48 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ pk-webs | home - - + -
- + - -
\ No newline at end of file + \ No newline at end of file diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte index b0805146..f834e913 100644 --- a/src/lib/Navigation.svelte +++ b/src/lib/Navigation.svelte @@ -23,8 +23,7 @@ import { get } from 'svelte/store'; } -
- + pk-webs @@ -59,5 +58,4 @@ import { get } from 'svelte/store'; - -
\ No newline at end of file + \ No newline at end of file diff --git a/styles/dark.scss b/styles/dark.scss new file mode 100644 index 00000000..28ce844e --- /dev/null +++ b/styles/dark.scss @@ -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; +} \ No newline at end of file diff --git a/styles/generic.scss b/styles/generic.scss new file mode 100644 index 00000000..2dd5652c --- /dev/null +++ b/styles/generic.scss @@ -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; + } \ No newline at end of file diff --git a/styles/light.scss b/styles/light.scss new file mode 100644 index 00000000..6c45c038 --- /dev/null +++ b/styles/light.scss @@ -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; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 753fcce8..fa5f7283 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"