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' into page-docs

Browse Source
This commit is contained in:
lindsaym-fa
2024-12-10 05:01:06 -05:00
parent 3f79b35878 fd3ec885f9
commit ee9cc49956
10 changed files with 67 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.eleventy.js
View File

@@ -146,6 +146,7 @@ export default function (eleventyConfig) {
// }
return {
markdownTemplateEngine: 'njk',
dir: {
includes: '_includes',
layouts: '_layouts'

2
docs/_includes/base.njk
View File

@@ -76,7 +76,7 @@
{# Logo #}
<div id="docs-branding">
{# Nav toggle #}
<wa-button appearance="text" data-toggle-nav>
<wa-button appearance="text" size="small" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
<a href="/" aria-label="Web Awesome">

10
docs/_includes/sidebar.njk
View File

@@ -233,7 +233,6 @@
{# Layout #}
{% if not isAlpha %}
<h2>Layout</h2>
<h2>
<a href="/docs/layout" title="Overview">Layout
<wa-icon name="grid-2"></wa-icon>
@@ -273,11 +272,12 @@
{% endif %}
{# Theming #}
<h2>Theming</h2>
<h2>
<a href="/docs/theming" title="Overview">Theming
<wa-icon name="grid-2"></wa-icon>
</a>
</h2>
<ul>
<li>
<a href="/docs/theming/">Theming Overview</a>
</li>
<li>
<a href="/docs/theming/color">Color</a>
</li>

9
docs/_includes/svgs/page.njk Normal file
View File

@@ -0,0 +1,9 @@
<svg width="96" height="80" viewBox="0 0 96 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="1" y="13" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="1" y="73" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="25" y="61" width="46" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="25" y="25" width="46" height="30" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="1" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
<rect x="77" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
docs/assets/styles/docs.css
View File

@@ -38,9 +38,7 @@ wa-page > header {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
padding-inline-start: var(--wa-space-m);
padding-inline-end: var(--wa-space-s);
padding-inline: var(--wa-space-xl);
a[href='/'] {
color: var(--wa-color-text-normal);
@@ -49,6 +47,7 @@ wa-page > header {
wa-button[data-toggle-nav] {
--label-color: currentColor;
font-size: 1rem;
margin-inline-start: -0.875rem;
margin-inline-end: 0;
@@ -96,11 +95,10 @@ wa-page > header {
#outline {
h2 {
font-size: var(--wa-font-size-m);
margin-block-end: var(--wa-space-m);
&:not(:first-of-type) {
margin-block-start: var(--wa-space-xl);
}
margin: 0;
}
h2:not(:first-child) {
margin-block-start: var(--wa-space-xs);
}
ul {
border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
@@ -114,7 +112,9 @@ wa-page > header {
}
li {
list-style: none;
margin-block-end: var(--wa-space-m);
}
li + li {
margin-block-start: var(--wa-space-m);
}
li a {
color: var(--wa-color-text-normal);

10
docs/docs/components/index.md
View File

@@ -315,13 +315,21 @@ layout: page-outline
</wa-card>
</a>
<a href="/docs/components/drawer">
<wa-card id="drawer-card">
<wa-card with-header id="drawer-card">
<div slot="header">
{% include "svgs/drawer.njk" %}
</div>
<span class="page-name">Drawer</span>
</wa-card>
</a>
<a href="/docs/components/page">
<wa-card with-header>
<div slot="header">
{% include "svgs/page.njk" %}
</div>
<span class="page-name">Page</span>
</wa-card>
</a>
<a href="/docs/components/split-panel">
<wa-card with-header>
<div slot="header">

4
docs/docs/theming/color.md
View File

@@ -65,7 +65,7 @@ Lightness values on this scale have a strong correlation to [relative luminance]
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{name}-{#}`.
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
<div class="color-name">Red</div>
<ul class="color-group">
@@ -549,4 +549,4 @@ Finally, each color is named according to how much attention it draws. Here, we
swatch.appendChild(copyButton)
})
</script>
</script>