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

improve docs header responsiveness

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-14 19:12:21 -04:00
parent 83715779dc
commit bd40f7b9c6
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_includes/base.njk
View File

@@ -43,18 +43,18 @@
<wa-page>
<header slot="header">
{# Nav toggle #}
<wa-button variant="text" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
{# Logo #}
<div id="docs-branding">
{# Nav toggle #}
<wa-button variant="text" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
<a href="/" aria-label="Web Awesome">
{% include "logo.njk" %}
<span class="only-desktop">{% include "logo.njk" %}</span>
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
</a>
<small id="version-number">{{ package.version }}</small>
<wa-badge variant="warning">Alpha</wa-badge>
<small id="version-number" class="only-desktop">{{ package.version }}</small>
<wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
</div>
<div id="docs-toolbar">
@@ -63,8 +63,8 @@
<wa-button slot="trigger" size="small" pill caret title="Press \ to toggle">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
<span class="only-light">Light</span>
<span class="only-dark">Dark</span>
<span class="only-light only-desktop">Light</span>
<span class="only-dark only-desktop">Dark</span>
</wa-button>
<wa-menu>
<wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
@@ -78,7 +78,7 @@
<wa-button id="search-trigger" outline size="small" data-search>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
Search
<kbd slot="suffix">/</kbd>
<kbd slot="suffix" class="only-desktop">/</kbd>
</wa-button>
</div>
</header>

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

@@ -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;