Merge branch 'main' of github/Draconizations/pk-webs-svelte into feat/dashboard

dashboard/styles/dark.scss

@@ -0,0 +1,23 @@
+.dark {
+    .navbar.bg-light {
+        background-color: var(--bs-body-bg) !important;
+    }
+    
+    .footer.bg-light {
+        background-color: var(--bs-dark) !important;
+    }
+    
+    > * {
+        .description a {
+            color: #159bd4 !important;
+        }
+    }
+
+    > * {
+        .nav-item {
+            .btn.btn-transparent {
+                color: rgba(250,250,250,.55);
+            }
+        }
+    }
+}

dashboard/styles/generic.scss

@@ -0,0 +1,161 @@
+/*
+This stylesheet should be used globally regardless of theming
+
+some specific rules are meant to be overwritten by the individual themes
+*/
+@import url('http://fonts.cdnfonts.com/css/open-dyslexic');
+
+// 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
+}
+
+.dyslexic {
+    font-family: 'Open-Dyslexic', sans-serif;
+}
+
+// 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: -20;
+    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;
+}
+
+// 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-dropdown {
+    position: static !important;
+    border: 1px solid rgba(128, 128, 128, 0.3) !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;
+ }

dashboard/styles/light.scss

@@ -0,0 +1,17 @@
+.light > * {
+    .footer.bg-light {
+        background-color: var(--bs-light) !important;
+    }
+    
+    .description a {
+        color: var(--bs-primary) !important;
+    }
+
+    > * {
+        .nav-item {
+            .btn.btn-transparent {
+                color: rgba(0,0,0,.55);
+            }
+        }
+    }
+}