@@ -25,17 +36,28 @@ const BrowserFrame = styled(BrowserFrameComponent)`
border-radius: ${themeVal('shape.rounded')};
.controls {
+ width: 100%;
display: flex;
- gap: 0.5rem;
- padding: 0.625rem 0.5rem;
+ align-items: center;
+ justify-content: space-between;
- span {
- display: block;
- width: 0.75rem;
- height: 0.75rem;
- content: '';
- border-radius: ${themeVal('shape.ellipsoid')};
- background: ${themeVal('color.base-300')};
+ .buttons {
+ gap: 0.5rem;
+ padding: 0.625rem 0.5rem;
+ display: flex;
+ span {
+ display: block;
+ width: 0.75rem;
+ height: 0.75rem;
+ content: '';
+ border-radius: ${themeVal('shape.ellipsoid')};
+ background: ${themeVal('color.base-300')};
+ }
+ }
+
+ .link {
+ padding-right: .625rem;
+ font-size: 0.875rem;
}
}
`;
diff --git a/docs/content/MDX_BLOCKS.md b/docs/content/MDX_BLOCKS.md
index d57521327..25faf04e8 100644
--- a/docs/content/MDX_BLOCKS.md
+++ b/docs/content/MDX_BLOCKS.md
@@ -563,6 +563,25 @@ The scrollytelling is defined as a series os `Chapters` inside the `Scrollytelli
- As with other properties, the user is not allowed to change the projection used in a chapter
- Once a chapter with a set projection is reached, that projection will be used on subsequent chapters, until one specifies a different projection.
+
+## Embed
+
+It is possible to embed individual webpages within a Story, like an interactive notebook, like so:
+
+```jsx
+
+
+
+```
+
+### Embed properties
+| Option | Type | Description |
+|---|---|---|
+| src | string | URL for the page that needs to be embedded |
+| height | number | Height needed for the embedded block within the story. Note that the width is automatically set to the full page witdh. |
+
## Some gotchas
- Do not use h1(`# heading 1`) for your header. `h1` is reserved for page title.