update logo

This commit is contained in:
Cory LaViska
2023-09-27 16:05:44 -04:00
parent 4b0ee8907f
commit 946f08db4b
9 changed files with 23 additions and 61 deletions

View File

@@ -172,8 +172,7 @@
"valuetext",
"webawesome",
"WEBP",
"Webpacker",
"wordmark"
"Webpacker"
],
"ignorePaths": [
"package.json",

View File

@@ -77,7 +77,7 @@
<aside id="sidebar" data-preserve-scroll>
<header>
<a href="/">
{% include 'workmark.njk' %}
{% include 'logo.njk' %}
</a>
<div class="sidebar-version">
{{ meta.version }}
@@ -85,13 +85,13 @@
</header>
<div class="sidebar-buttons">
<wa-button outline size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
<wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
<wa-icon slot="prefix" name="github"></wa-icon> Code
</wa-button>
<wa-button outline size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
<wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
<wa-icon slot="prefix" name="star-fill"></wa-icon> Star
</wa-button>
<wa-button outline size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
<wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
<wa-icon slot="prefix" name="twitter"></wa-icon> Follow
</wa-button>
</div>

1
docs/_includes/logo.njk Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

View File

@@ -92,7 +92,7 @@ h1:first-of-type {
}
/* Color matching logos */
svg.wordmark {
svg.logo {
color: var(--wa-color-brand-text-on-surface);
}
@@ -438,9 +438,8 @@ pre:hover .copy-code-button,
font-size: var(--wa-font-size-s);
color: var(--wa-color-text-quiet);
text-align: right;
margin-top: -0.5rem;
margin-right: 1rem;
margin-bottom: -0.5rem;
margin-top: -1rem;
margin-bottom: -1rem;
}
.sidebar-buttons {
@@ -745,10 +744,6 @@ html.sidebar-open #menu-toggle {
height: auto;
}
.splash .wordmark {
max-width: 22rem;
}
.splash-start h1:first-of-type {
font-size: var(--wa-font-size-l);
font-weight: var(--wa-font-weight-normal);
@@ -819,30 +814,10 @@ html.sidebar-open #menu-toggle {
flex: 1 1 auto;
}
.repo-button--github wa-icon {
color: var(--wa-color-text-normal);
}
.repo-button--github:hover wa-icon {
.repo-button wa-icon {
color: var(--wa-color-text-inverse);
}
.repo-button--star wa-icon {
color: var(--wa-color-yellow-70);
}
.repo-button--star:hover wa-icon {
color: var(--wa-color-yellow-80);
}
.repo-button--twitter wa-icon {
color: var(--wa-color-blue-60);
}
.repo-button--twitter:hover wa-icon {
color: var(--wa-color-blue-70);
}
@media screen and (max-width: 400px) {
:not(.sidebar-buttons) > .repo-button {
width: 100%;

View File

@@ -164,7 +164,7 @@ It's often helpful to have a button that works like a link. This is possible by
```html:preview
<wa-button href="https://example.com/">Link</wa-button>
<wa-button href="https://example.com/" target="_blank">New Window</wa-button>
<wa-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</wa-button>
<wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
<wa-button href="https://example.com/" disabled>Disabled</wa-button>
```
@@ -177,7 +177,7 @@ const App = () => (
<WaButton href="https://example.com/" target="_blank">
New Window
</WaButton>
<WaButton href="/assets/images/wordmark.svg" download="shoelace.svg">
<WaButton href="/assets/images/logo.svg" download="shoelace.svg">
Download
</WaButton>
<WaButton href="https://example.com/" disabled>

View File

@@ -15,29 +15,29 @@ toc: false
<wa-option value="mellow">Mellow</wa-option>
<wa-option value="playful">Playful</wa-option>
</wa-select>
<wa-select name="heading-text" label="Heading" value="sans-serif">
<wa-select name="heading-text" label="Heading" value="">
<wa-option value="">Theme default</wa-option>
<wa-option value="serif">Serif</wa-option>
<wa-option value="sans-serif">Sans-serif</wa-option>
<wa-option value="monospace">Monospace</wa-option>
<wa-option value="cursive">Cursive</wa-option>
</wa-select>
<wa-select name="body-text" label="Body" value="sans-serif">
<wa-select name="body-text" label="Body" value="">
<wa-option value="">Theme default</wa-option>
<wa-option value="serif">Serif</wa-option>
<wa-option value="sans-serif">Sans-serif</wa-option>
<wa-option value="monospace">Monospace</wa-option>
<wa-option value="cursive">Cursive</wa-option>
</wa-select>
<h3>Borders</h3>
<wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
<wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
<wa-range name="border-width" label="Width" min="1" max="8" value="1" step="1" tooltip="none"></wa-range>
<wa-select name="border-style" label="Style" value="solid">
<wa-range name="border-width" label="Border Width" min="1" max="8" value="1" step="1" tooltip="none"></wa-range>
<wa-select name="border-style" label="Border Style" value="solid">
<wa-option value="solid">Solid</wa-option>
<wa-option value="dashed">Dashed</wa-option>
<wa-option value="dotted">Dotted</wa-option>
<wa-option value="double">Double</wa-option>
</wa-select>
<h3>Other</h3>
<wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
</div>
</div>
@@ -217,7 +217,7 @@ toc: false
background: var(--wa-color-surface-lowered);
padding-inline: var(--wa-space-xl);
padding-block-end: var(--wa-space-2xl);
translate: calc((var(--knobs-width) - 4rem) / 2);
translate: calc((var(--knobs-width) + 2rem) / 2);
}
.overlap {

View File

@@ -7,9 +7,9 @@ toc: false
<div class="splash">
<div class="splash-start">
{% include 'workmark.njk' %}
{% include 'logo.njk' %}
# <wa-visually-hidden>Web Awesome:</wa-visually-hidden> A forward-thinking library of web components.
# <wa-visually-hidden>Web Awesome:</wa-visually-hidden>
- Works with all frameworks 🧩
- Works with CDNs 🚛