diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk new file mode 100644 index 000000000..6e75aec6e --- /dev/null +++ b/docs/_layouts/blank.njk @@ -0,0 +1,69 @@ + + + + + + + {% if noindex %}{% endif %} + + {{ title }} + + + + + {# Scripts #} + {# Hydration stuff #} + + + + + + {# Web Awesome #} + + + + + + + + {# Set the theme to prevent flashing #} + + + + + {% block beforeContent %}{% endblock %} + + {% block content %} + {{ content | safe }} + {% endblock %} + + {% block afterContent %}{% endblock %} + + + diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md new file mode 100644 index 000000000..efb77fd91 --- /dev/null +++ b/docs/docs/components/page-samples/documentation.md @@ -0,0 +1,238 @@ +--- +title: Sample Docs Page +description: TODO +layout: blank +--- + + + + +
+
+ +
+ +
+ + + + +
+ +
+
+

Identification

+

Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.

+

Range and Habitat

+

Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.

+

Behavior

+

Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.

+

Conservation

+

Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.

+
+ + + + \ No newline at end of file diff --git a/docs/docs/experimental/default-page-spacing.md b/docs/docs/experimental/default-page-spacing.md new file mode 100644 index 000000000..d409a4817 --- /dev/null +++ b/docs/docs/experimental/default-page-spacing.md @@ -0,0 +1,100 @@ +--- +title: Default Layout and Spacing +description: TODO +layout: blank +--- + + + + +
+ Banner + Banner + Banner +
+
+ Header + Header + Header +
+ + + + +
+ Main Header + Main Header + Main Header +
+
+

Main

+

No flex properties here! The author can specify their own preferred content flow and layout in the default slot.

+
+
+ Main Footer + Main Footer + Main Footer +
+ + + \ No newline at end of file diff --git a/src/components/page/page.styles.ts b/src/components/page/page.styles.ts index 9692513cc..ea28da538 100644 --- a/src/components/page/page.styles.ts +++ b/src/components/page/page.styles.ts @@ -3,6 +3,7 @@ import { css } from 'lit'; export default css` :host { display: block; + background-color: var(--wa-color-surface-default); box-sizing: border-box; height: 100%; --menu-width: auto; @@ -14,6 +15,82 @@ export default css` --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px)); } + ::slotted( + :is( + [slot='banner'], + [slot='header'], + [slot='subheader'], + [slot='navigation-header'], + [slot='navigation'], + [slot='navigation-footer'], + [slot='menu'], + [slot='main-header'], + [slot='main-footer'], + [slot='aside'], + [slot='footer'] + ) + ) { + background-color: var(--wa-color-surface-default); + } + + ::slotted([slot='banner']) { + display: flex; + align-items: center; + justify-content: center; + gap: var(--wa-space-m); + padding: var(--wa-space-xs) var(--wa-space-m); + } + + ::slotted([slot='header']) { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-m); + } + + ::slotted([slot='subheader']) { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-xs) var(--wa-space-m); + } + + ::slotted([slot*='navigation']), + ::slotted([slot='menu']), + ::slotted([slot='aside']) { + display: flex; + flex-direction: column; + gap: var(--wa-space-m); + padding: var(--wa-space-m); + } + + ::slotted([slot='main-header']) { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-m) var(--wa-space-3xl); + } + + ::slotted(:not([slot])) { + padding: var(--wa-space-3xl); + } + + ::slotted([slot='main-footer']), + ::slotted([slot='footer']) { + display: flex; + align-items: start; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-3xl); + } + :host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) { --banner-height: 0px !important; } diff --git a/src/themes/applied.css b/src/themes/applied.css index 4e1896079..7cecc5293 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -9,6 +9,13 @@ html { margin: 0; } +:is(html, body):has(wa-page) { + min-height: 100%; + height: 100%; + padding: 0; + margin: 0; +} + *, *::before, *::after { diff --git a/src/themes/default.css b/src/themes/default.css index 9954966bf..0352e8651 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -229,7 +229,7 @@ --wa-line-height-normal: 1.6; --wa-line-height-expanded: 2; - --wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted; + --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted; --wa-link-decoration-hover: underline; /**