use new button styling
This commit is contained in:
parent
e342c7495d
commit
ddbbff3fd2
5 changed files with 11 additions and 21 deletions
|
|
@ -10,7 +10,7 @@
|
||||||
<div slot="tag" webc:nokeep>
|
<div slot="tag" webc:nokeep>
|
||||||
{% for tag in item.data.tags %}
|
{% for tag in item.data.tags %}
|
||||||
{% if tag != "posts" %}
|
{% if tag != "posts" %}
|
||||||
<span class="button post-tag">{{ tag }}</span>
|
<span class="button" data-small-button>{{ tag }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="details flow">
|
<div class="details flow">
|
||||||
<div class="control | cluster" aria-label="{{ meta.details.aria }}">
|
<div class="control | cluster" aria-label="{{ meta.details.aria }}">
|
||||||
<button id="expandAll" class="button post-tag">{{ meta.details.expand }}</button>
|
<button id="expandAll" class="button" data-small-button>{{ meta.details.expand }}</button>
|
||||||
<button id="collapseAll" class="button post-tag">{{ meta.details.collapse }}</button>
|
<button id="collapseAll" class="button" data-small-button>{{ meta.details.collapse }}</button>
|
||||||
</div>
|
</div>
|
||||||
{%- for item in itemList | alphabetic -%}
|
{%- for item in itemList | alphabetic -%}
|
||||||
<details id="{{ item.data.title | slugify }}">
|
<details id="{{ item.data.title | slugify }}">
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,10 @@
|
||||||
data-theme-switcher
|
data-theme-switcher
|
||||||
>
|
>
|
||||||
<h2 id="theme-switcher-label">{{ meta.themeSwitch.title }}</h2>
|
<h2 id="theme-switcher-label">{{ meta.themeSwitch.title }}</h2>
|
||||||
<button class="button" id="light-theme-toggle" data-theme="light">
|
<button class="button" id="light-theme-toggle" data-theme="light" data-ghost-button data-small-button>
|
||||||
<span>{{ meta.themeSwitch.light }}</span>
|
<span>{{ meta.themeSwitch.light }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button" id="dark-theme-toggle" data-theme="dark">
|
<button class="button" id="dark-theme-toggle" data-theme="dark" data-ghost-button data-small-button>
|
||||||
<span>{{ meta.themeSwitch.dark }}</span>
|
<span>{{ meta.themeSwitch.dark }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ schema: blog
|
||||||
%}
|
%}
|
||||||
<!-- tags -->
|
<!-- tags -->
|
||||||
{% for tag in tags %}{% if tag != "posts" %}
|
{% for tag in tags %}{% if tag != "posts" %}
|
||||||
<a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
|
<a class="button" href="/tags/{{ tag }}" data-small-button> {{ tag }} </a>
|
||||||
{% endif %}{% endfor %}
|
{% endif %}{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,12 @@
|
||||||
font-family: var(--font-base);
|
font-family: var(--font-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-switch .button {
|
|
||||||
--button-border: var(--color-bg-accent-2);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
font-size: var(--size-step-min-2);
|
|
||||||
padding: 0.1rem 0.625rem;
|
|
||||||
font-weight: var(--font-bold);
|
|
||||||
min-block-size: 1.5em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-switch .button[aria-pressed='true'] {
|
.theme-switch .button[aria-pressed='true'] {
|
||||||
--_color-primary-contrast: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-dark));
|
--_color-contrast: var(--color-tertiary);
|
||||||
--button-bg: var(--_color-primary-contrast);
|
--button-bg: var(--_color-contrast);
|
||||||
--button-text: var(--color-base-light);
|
--button-color: var(--color-dark);
|
||||||
--button-border: var(--_color-primary-contrast);
|
--button-border-color: var(--_color-contrast);
|
||||||
outline-color: var(--_color-primary-contrast);
|
outline-color: var(--_color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide without JS */
|
/* Hide without JS */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue