diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss
index c4e42f8..76092a6 100644
--- a/packages/core/src/_reset.scss
+++ b/packages/core/src/_reset.scss
@@ -155,33 +155,3 @@
:where(sup) {
top: -0.5em;
}
-
-// ── Other ───────────────────────────────────────────────────────────────
-
-:where(a) {
- background-color: transparent;
-}
-
-:where(abbr[title]) {
- text-decoration: underline dotted;
-}
-
-:where(code, kbd, samp, pre) {
- font-family: monospace, monospace;
- font-size: 1em;
-}
-
-:where(sub, sup) {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-:where(sub) {
- bottom: -0.25em;
-}
-
-:where(sup) {
- top: -0.5em;
-}
diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
index 53f7103..e05b1bd 100644
--- a/packages/core/src/style.scss
+++ b/packages/core/src/style.scss
@@ -95,9 +95,11 @@ ul {
/* Make the marker position is inside the container */
list-style-position: inside;
margin: 0;
+ margin-bottom: var(--msp-spacing-2);
ul {
margin-left: var(--msp-spacing-3);
+ margin-bottom: 0;
}
}
@@ -126,3 +128,10 @@ video.respect-height {
li:not(:last-child) {
margin-bottom: var(--msp-spacing-1);
}
+
+:where(code, kbd, samp, pre):not([data-lang]) {
+ background-color: var(--msp-color-bg-surface-2);
+ padding: 0 var(--msp-spacing-1);
+ border-radius: var(--msp-border-radius);
+ white-space: nowrap;
+}
diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md
index 1a3f402..1c398f2 100644
--- a/packages/website/content/components/offcanvas.md
+++ b/packages/website/content/components/offcanvas.md
@@ -3,4 +3,74 @@
section = ["Components"]
+++
-# offcanvas.md
+# Offcanvas
+
+## Basic
+
+The offcanvas component serves as a sidebar that is hidden out of view until is
+toggled via an interactive element. The offcanvas is composed of the following
+elements:
+
+- `msp-offcanvas`: the main container.
+- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more.
+- `msp-offcanvas-content`: the container for the content.
+- `msp-offcanvas-header`: top section of the content.
+- `msp-offcanvas-body`: middle section of the content.
+- `msp-offcanvas-footer`: bottom section of the content.
+
+To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an
+element and attach the `data-msp-target` attribute.
+
+### Example:
+
+```html
+
+
+
+
+
+ ...
+
+
+```
+
+## Responsive
+
+It's possible to have the sidebar always visible and only hide the offcanvas
+when the viewport is below the brakepoint. For this add the class
+`msp-offcanvas-[breakpoint]`.
+
+Note that the toggle and backdrop are disabled when the viewport is above the brakepoint.
+
+### Example
+
+```html
+
+
+
+
+
+ ...
+
+
+```
diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss
index 52c28da..b7c6746 100644
--- a/packages/website/sass/style.scss
+++ b/packages/website/sass/style.scss
@@ -3,6 +3,6 @@
@use "@mini-strap/components/accordion/accordion.scss";
@use "@mini-strap/components/offcanvas/style.scss";
-html {
- // background-color: red;
+main {
+ padding: var(--msp-spacing-3);
}