js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Lea Verou
2024-12-10 11:54:04 -05:00
parent 99704faeb4 78c446f525
commit ba4cdc9b28
2 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
docs/assets/images/layout-anatomy.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 66 KiB

4
docs/docs/components/page.md
View File

@@ -125,9 +125,9 @@ wa-page[view='desktop'] [data-toggle-nav] {
}
```
### Widths and Heights
### Custom Widths
There are a number of [CSS custom properties](#css-custom-properties) you can use to set specific widths and heights for many slots on your page.
You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
```css