From 715a4286f932c0dbcd6dcf36a562486632a7e4d8 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 14 Jun 2024 12:00:47 -0400 Subject: [PATCH 1/9] light dismiss the nav --- src/components/page/page.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/page/page.ts b/src/components/page/page.ts index b89055a7a..c901756b6 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -245,8 +245,9 @@ export default class WaPage extends WebAwesomeElement { (this.navOpen = this.navigationDrawer.open)} @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)} From 83715779dc1b98ba4f8d3fb92172f9f0c098063f Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Fri, 14 Jun 2024 18:57:52 -0400 Subject: [PATCH 2/9] implement MVP home page --- docs/_includes/logo-simple.njk | 4 +- .../assets/styles}/cera_typeface.css | 0 docs/assets/styles/docs.css | 4 +- docs/index.md | 284 +++++++++++++++++- 4 files changed, 288 insertions(+), 4 deletions(-) rename {src/themes => docs/assets/styles}/cera_typeface.css (100%) diff --git a/docs/_includes/logo-simple.njk b/docs/_includes/logo-simple.njk index 910ecd9d3..1d58e868e 100644 --- a/docs/_includes/logo-simple.njk +++ b/docs/_includes/logo-simple.njk @@ -1 +1,3 @@ - + + + \ No newline at end of file diff --git a/src/themes/cera_typeface.css b/docs/assets/styles/cera_typeface.css similarity index 100% rename from src/themes/cera_typeface.css rename to docs/assets/styles/cera_typeface.css diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 444b910bc..f1c2bdcaf 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -3,9 +3,11 @@ @import 'copy-code.css'; @import 'outline.css'; @import 'search.css'; +@import 'cera_typeface.css'; :root { --wa-brand-orange: #f36944; + --wa-brand-grey: #30323b; } html.wa-theme-default-dark .only-light, @@ -32,7 +34,7 @@ wa-page > header { display: flex; align-items: center; justify-content: space-between; - height: 64px; + height: 4rem; padding-inline: var(--wa-space-xl); a[href='/'] { diff --git a/docs/index.md b/docs/index.md index df3cf2ff8..d3be2ea9d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,6 +4,286 @@ description: Build better with Web Awesome, the open source library of web compo layout: page.njk --- -This is the homepage. It will soon look awesome. Until then, click the button. 👇 + -Go somewhere +
+
+ +

Make something awesome with open-source web components

+
+ Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. + +
+
+
+ +
+
+

What's Web Awesome?

+

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

+
+
+
+ +

Entirely native

+
+

Built on web standards to last for years to come. No excess tooling. No third-party bloat.

+
+
+
+ +

Fully customizable

+
+

Show off your own style with components that consistently adapt to your theme.

+
+
+
+ +

Accessibility forward

+
+

Build a website that everyone can use. Designed to be inclusive and usable by everyone.

+
+
+
+ +

Proudly open source

+
+

Use Web Awesome Free however you like. Always free, always open source.

+
+
+
+ +
+
+

You put the awesome in Web Awesome

+

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

+

Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.

+
+
+
+
+ +

Get in touch

+
+

Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at hello@webawesome.com.

+
+
+
+ +

Follow us

+
+

Keep up with Web Awesome through updates, announcements, and polls. Find us on Twitter (X) and Instagram.

+
+
+
+ + + +
+ +
+
+ Let's Make Something Awesome +

Web Awesome is the design system platform and open source library of web components from your fellow nerds at Font Awesome.

+
+
+ Special thanks +
+ Lit + Custom Elements Manifest + 11ty + Floating UI + animate.css + Lunr +
+
+
+
+ © Fonticons, Inc. +
+
+
From bd40f7b9c67aa3c239f21a495891cee2488451e3 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Fri, 14 Jun 2024 19:12:21 -0400 Subject: [PATCH 3/9] improve docs header responsiveness --- docs/_includes/base.njk | 22 +++++++++++----------- docs/assets/styles/docs.css | 13 +++++++++++++ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 37bd5f22c..cc3614fbe 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -43,18 +43,18 @@
- {# Nav toggle #} - - - - {# Logo #}
+ {# Nav toggle #} + + + - {% include "logo.njk" %} + {% include "logo.njk" %} + {% include "logo-simple.njk" %} - {{ package.version }} - Alpha + {{ package.version }} + Alpha
@@ -63,8 +63,8 @@ - Light - Dark + Light + Dark Light @@ -78,7 +78,7 @@ Search - / + /
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f1c2bdcaf..ff5d93d6b 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -23,6 +23,11 @@ wa-page[view='desktop'] [data-toggle-nav] { display: none; } +wa-page[view='desktop'] .only-mobile, +wa-page:not([view='desktop']) .only-desktop { + display: none; +} + /* Header */ wa-page::part(header) { background-color: var(--wa-color-surface-default); @@ -42,6 +47,14 @@ wa-page > header { line-height: 1; } + wa-button[data-toggle-nav] { + --label-color: currentColor; + margin-inline-end: 0.75rem; + &::part(base) { + padding: 0; + } + } + svg { width: auto; height: 1.75rem; From 4357323bbb7cf0c856c8bd36eeef1424011df3e8 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 12:26:54 -0400 Subject: [PATCH 4/9] add whitespace --- src/components/option/option.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/option/option.ts b/src/components/option/option.ts index afc3a822e..be3689f04 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --background-color-hover - The options's background color on hover. * @cssproperty --label-color-current - The current option's label color. * @cssproperty --label-color-hover - The label color on hover. + * * @csspart checked-icon - The checked icon, a `` element. * @csspart base - The component's base wrapper. * @csspart label - The option's label. From d88f27f3e16498c0fa7c8a71a71928c368f3f2f4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 12:27:10 -0400 Subject: [PATCH 5/9] update docs --- docs/assets/styles/docs.css | 7 ++++++- docs/docs/experimental/style-guide.md | 9 ++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index ff5d93d6b..356a333d5 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -222,7 +222,6 @@ wa-page > main { } /* Swatches */ - .swatch { background-color: transparent; border-color: var(--wa-color-neutral-border-normal); @@ -234,3 +233,9 @@ wa-page > main { height: 2.5em; padding-inline: var(--wa-space-xs); } + +/* Utilities */ +.two-columns { + columns: 2; + gap: 1rem; +} diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md index 3004c7a48..5efbf2593 100644 --- a/docs/docs/experimental/style-guide.md +++ b/docs/docs/experimental/style-guide.md @@ -21,11 +21,10 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. ## Inline Text ```html - Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. ``` -
+

Bold

Italics

Underline

@@ -85,17 +84,17 @@ Individual details look like this. Grouping them provides accordion-style functionality. -
+
Enim diam

Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.

-
+
Arcu non odio

Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.

-
+
Ut porttitor

Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.

From dfa1f2adf738751f682261116553b4cc940d6cfd Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:39 -0400 Subject: [PATCH 6/9] remove example --- docs/docs/theming/typography.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md index 567a40234..46fa02b39 100644 --- a/docs/docs/theming/typography.md +++ b/docs/docs/theming/typography.md @@ -75,7 +75,3 @@ Together with [`--wa-color-link`](/docs/theming/color/#text), these custom prope | ------------------------------ | ---------------------------------------------------------------------------------- | | `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` | | `--wa-link-decoration-hover` | `underline` | - -```html {.example} -Web Awesome anchor -``` \ No newline at end of file From cd837cb291880db3a8a0418883ab28a6b404c777 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:46 -0400 Subject: [PATCH 7/9] reword --- docs/docs/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/localization.md b/docs/docs/localization.md index e99b32811..f4cb00e24 100644 --- a/docs/docs/localization.md +++ b/docs/docs/localization.md @@ -4,7 +4,7 @@ description: Discover how to localize Web Awesome with minimal effort. layout: page.njk --- -Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `` element. Here's an example that renders Web Awesome components in Spanish. +Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `` element. Here's an example that renders Web Awesome components in Spanish. ```html From a62f9b28f0ece7f373f219f730dea044bb946332 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:53 -0400 Subject: [PATCH 8/9] fix footer --- docs/assets/styles/search.css | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css index 47ae0313d..d22bcc748 100644 --- a/docs/assets/styles/search.css +++ b/docs/assets/styles/search.css @@ -224,6 +224,7 @@ header { #site-search footer { flex: 0 0 auto; display: flex; + flex-direction: row; justify-content: center; gap: 2rem; color: var(--wa-color-text-quiet); From 4adfcecb8069d70aac3c85e15eff355990a6a4a9 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:36:32 -0400 Subject: [PATCH 9/9] update example --- docs/docs/theming/component-groups.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md index d74af4409..1eaac0e8e 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -112,9 +112,6 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon | `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | ```html {.example} - - - -
- + +This is a tooltip ``` \ No newline at end of file