diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte
index 48b4f797..a8057f2b 100644
--- a/src/routes/_internal/components/Sidebar.svelte
+++ b/src/routes/_internal/components/Sidebar.svelte
@@ -1,159 +1,156 @@
\ No newline at end of file
+
+ &__toggle {
+ position: fixed;
+ left: 16px;
+ bottom: 16px;
+ padding: 8px;
+ aspect-ratio: 1 / 1;
+ background-color: var(--accent-color);
+ z-index: 20;
+ border-radius: var(--rounded);
+ color: white;
+ box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+ transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
+
+ :global(.icon) {
+ width: 32px;
+ height: auto;
+ }
+
+ @media (--md) {
+ visibility: hidden;
+ }
+ }
+
+ &.slideIn {
+ left: 0;
+
+ .sidebar__toggle {
+ left: calc(32px + min(70vw, var(--sidebar-width)));
+ }
+ }
+
+ scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
+
+ &::-webkit-scrollbar {
+ width: 14px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: var(--sidebar-color);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb-color);
+ border-radius: 999px;
+ border: 3px solid var(--sidebar-color);
+ }
+ }
+
diff --git a/src/routes/classes/Actions.md b/src/routes/classes/Actions.md
index 5ecd8dfd..7ee91fbf 100644
--- a/src/routes/classes/Actions.md
+++ b/src/routes/classes/Actions.md
@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
diff --git a/src/routes/classes/Stat.md b/src/routes/classes/Stat.md
index 11353737..7bbecdb9 100644
--- a/src/routes/classes/Stat.md
+++ b/src/routes/classes/Stat.md
@@ -1,6 +1,6 @@
### Single Example
-```svelte example
+```svelte example raised
@@ -13,7 +13,7 @@
### Group Example
-```svelte example
+```svelte example raised
diff --git a/src/routes/components/Badge.md b/src/routes/components/Badge.md
index ab244b8c..55830e4a 100644
--- a/src/routes/components/Badge.md
+++ b/src/routes/components/Badge.md
@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
diff --git a/src/routes/components/Button.md b/src/routes/components/Button.md
index 5f4d8985..fd6fe387 100644
--- a/src/routes/components/Button.md
+++ b/src/routes/components/Button.md
@@ -6,12 +6,12 @@
import IconDownload from 'virtual:icons/heroicons-outline/download'
-
+
```
-### Group example
+### Color variants example
-```svelte example
+```svelte example raised
+
+
+
```
\ No newline at end of file
diff --git a/src/routes/components/Checkbox.md b/src/routes/components/Checkbox.md
index fd63a679..44c3893b 100644
--- a/src/routes/components/Checkbox.md
+++ b/src/routes/components/Checkbox.md
@@ -1,6 +1,6 @@
### Text-only Example
-```svelte example
+```svelte example raised
@@ -10,7 +10,7 @@
### Text with Icon Example
-```svelte example
+```svelte example raised
@@ -20,7 +20,7 @@
### Force an option to be selected with `neverEmpty`
-```svelte example
+```svelte example raised
diff --git a/src/routes/components/Select.md b/src/routes/components/Select.md
index 2604d4f1..2beecfcb 100644
--- a/src/routes/components/Select.md
+++ b/src/routes/components/Select.md
@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
diff --git a/src/routes/getting-started/configure.md b/src/routes/getting-started/configure.md
new file mode 100644
index 00000000..7dfc9f18
--- /dev/null
+++ b/src/routes/getting-started/configure.md
@@ -0,0 +1,40 @@
+---
+title: Configure
+---
+
+To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files.
+
+## SvelteKit
+
+Add the following parts to your `svelte.config.js` file:
+
+```js
+import { preprocess, plugins } from 'omorphia/config/svelte.config'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+ preprocess: [
+ preprocess,
+ ],
+
+ kit: {
+ vite: {
+ plugins: [
+ ...plugins,
+ ],
+ },
+ },
+};
+
+export default config;
+```
+
+## PostCSS
+
+Create a `postcss.config.cjs` file in the root of your project.
+
+Add the following line to that file:
+
+```js
+module.exports = require('omorphia/config/postcss.config.cjs')
+```
\ No newline at end of file
diff --git a/src/routes/getting-started/postcss.md b/src/routes/getting-started/postcss.md
deleted file mode 100644
index d91c459e..00000000
--- a/src/routes/getting-started/postcss.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: PostCSS Configuration
----
-
-Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
-
-Install PostCSS with:
-
-```bash
-pnpx svelte-add@latest postcss
-```
-
-This is the recommended `postcss.config.cjs` setup:
-
-```js
-const config = {
- plugins: [
- require('postcss-import'),
- require('postcss-strip-inline-comments'),
- require('postcss-nested'),
- require('postcss-preset-env'),
- require('autoprefixer'),
- require('postcss-extend-rule'),
- process.env.NODE_ENV === 'development' && require('cssnano')({
- preset: 'default',
- })
- ],
-};
-
-module.exports = config;
-```
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 92cc890c..477218dd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,21 @@
{
- "paths": {
- "omorphia/*": [
- "src/package/*"
- ],
- "omorphia": [
- "src/package"
- ],
- "$package/*": [
- "src/package/*"
- ],
- "$routes/*": [
- "src/routes/*"
- ]
- },
+ "compilerOptions": {
+ "paths": {
+ "omorphia/*": [
+ "src/package/*"
+ ],
+ "omorphia": [
+ "src/package"
+ ],
+ "$package/*": [
+ "src/package/*"
+ ],
+ "$routes/*": [
+ "src/routes/*"
+ ],
+ "$lib":["src/package"],
+ "$lib/*":["src/package/*"]
+ }
+ },
"extends": "./.svelte-kit/tsconfig.json"
}