Update docs examples + Add Select component + Add Card, Base, Title classes

src/lib/styles/classes/base.postcss

@@ -0,0 +1,26 @@
+.base {
+    display: flex;
+    justify-content: center;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    padding: 1rem;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    &::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}

src/lib/styles/classes/card.postcss

@@ -0,0 +1,97 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+}

src/lib/styles/classes/link.postcss

@@ -0,0 +1,7 @@
+.link {
+    color: var(--color-link);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

src/lib/styles/classes/title.postcss

@@ -0,0 +1,8 @@
+.title {
+    font-size: 1.5rem;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 1.25rem;
+}

src/lib/styles/themes.postcss

@@ -1,4 +0,0 @@
-@import "themes/base.postcss";
-@import "themes/light.postcss";
-@import "themes/dark.postcss";
-@import "themes/oled.postcss";

src/lib/styles/variables.postcss

@@ -1,3 +0,0 @@
-@import "variables/borders.postcss";
-@import "variables/typography.postcss";
-@import "variables/spacing.postcss";