use new button styling

This commit is contained in:
madrilene 2024-11-29 18:10:24 +01:00
parent e342c7495d
commit ddbbff3fd2
5 changed files with 11 additions and 21 deletions

View file

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

View file

@ -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 }}">

View file

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

View file

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

View file

@ -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 */