mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
add project instructions for palettes + make themes consistent
This commit is contained in:
lindsaym-fa
@@ -66,14 +66,50 @@ layout: page
|
||||
</div>
|
||||
|
||||
<h2>Using This Palette</h2>
|
||||
|
||||
<div id="import-code">
|
||||
{% for palette in themer.palettes %}
|
||||
<div class="palette-instructions" data-palette="{{ palette.name | lower }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<p>
|
||||
To import this palette, set <code><html class="wa-palette-{{ palette.name | lower }}"></code> and import the following stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="/dist/styles/color/palettes/{{ palette.filename }}" /></code></pre>
|
||||
</div>
|
||||
<div class="palette-instructions" data-palette="{{ palette.name | lower }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="projects"><wa-icon name="briefcase" variant="regular"></wa-icon> Projects</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="file-zipper" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="projects">
|
||||
<h3 class="wa-heading-m">For Pro Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, <wa-icon name="paintbrush" variant="regular"></wa-icon> Edit Your Theme to open the Theme Builder. Select <strong>{{ palette.name | capitalize }}</strong> as your Color Palette.
|
||||
</p>
|
||||
<h3 class="wa-heading-m">For Free Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, set your Color Palette to <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>{{ palette.name | capitalize }}</strong>.
|
||||
</p>
|
||||
<p>Save your palette and watch it come to life anywhere you're using your project.</p>
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-js">import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}';</code></pre>
|
||||
<p>
|
||||
Then apply the following class to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-palette-{{ palette.name | lower }}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="/dist/styles/themes/{{ palette.filename }}" /></code></pre>
|
||||
<p>
|
||||
Then apply the following class to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-palette-{{ palette.name | lower }}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -87,47 +87,51 @@ to create a project with any one of these themes.
|
||||
|
||||
<h2>Using This Theme</h2>
|
||||
|
||||
{% for theme in themer.themes %}
|
||||
<wa-tab-group class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<wa-tab panel="projects"><wa-icon name="briefcase" variant="regular"></wa-icon> Projects</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="file-zipper" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
<div id="import-code">
|
||||
{% for theme in themer.themes %}
|
||||
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="projects"><wa-icon name="briefcase" variant="regular"></wa-icon> Projects</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="file-zipper" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="projects">
|
||||
<h3 class="wa-heading-m">For Pro Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, <wa-icon name="paintbrush" variant="regular"></wa-icon> Edit Your Theme to open the Theme Builder. Select <strong>{{ theme.filename | stripExtension | capitalize }}</strong> as your Starting Theme.
|
||||
</p>
|
||||
<h3 class="wa-heading-m">For Free Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, set your Theme to <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>{{ theme.filename | stripExtension | capitalize }}</strong> and your Color Palette to <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>{{ theme.palette.filename | stripExtension | capitalize }}</strong>.
|
||||
</p>
|
||||
<p>Save your theme and watch it come to life anywhere you're using your project.</p>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="projects">
|
||||
<h3 class="wa-heading-m">For Pro Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, <wa-icon name="paintbrush" variant="regular"></wa-icon> Edit Your Theme to open the Theme Builder. Select <strong>{{ theme.filename | stripExtension | capitalize }}</strong> as your Starting Theme.
|
||||
</p>
|
||||
<h3 class="wa-heading-m">For Free Projects:</h3>
|
||||
<p>
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> Settings, set your Theme to <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>{{ theme.filename | stripExtension | capitalize }}</strong> and your Color Palette to <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>{{ theme.palette.filename | stripExtension | capitalize }}</strong>.
|
||||
</p>
|
||||
<p>Save your theme and watch it come to life anywhere you're using your project.</p>
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-js">import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';</code></pre>
|
||||
<p>
|
||||
Then apply the following classes to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="npm">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-js">import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';</code></pre>
|
||||
<p>
|
||||
Then apply the following classes to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" /></code></pre>
|
||||
<p>
|
||||
Then apply the following classes to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
{% endfor %}
|
||||
<wa-tab-panel name="self-hosted">
|
||||
<p>
|
||||
To use this theme, import the theme's stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" /></code></pre>
|
||||
<p>
|
||||
Then apply the following classes to the <code><html></code> element:
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}"></code></pre>
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<script type="module">
|
||||
|
||||
Reference in New Issue
Block a user