dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1.Button,
2button[type] {
3 --block-size: calc(var(--font-size-button) + 30px);
4 border: 15px solid transparent;
5 border-image: var(--button-border) 15 fill stretch;
6 block-size: var(--block-size);
7 color: rgb(var(--color-black));
8 display: block;
9 font-family: var(--font-family-2);
10 font-size: var(--font-size-button);
11 font-weight: 400;
12 inline-size: fit-content;
13 line-height: 1;
14 min-inline-size: var(--min-inline-size, var(--block-size));
15 padding: 0 5px;
16 /*text-box: trim-both ex alphabetic;*/
17 text-align: center;
18 text-decoration: none;
19 text-transform: uppercase;
20 text-shadow: 2px 2px rgb(var(--color-brown) / 0.3);
21 transition: border-image 100ms;
22
23 &:hover {
24 border-image-source: var(--button-border-hover);
25 }
26
27 &:disabled {
28 opacity: 0.5;
29 pointer-events: none;
30 }
31
32 &[data-danger] {
33 &:not(:hover) {
34 border-image-source: var(--button-border-danger);
35 color: rgb(var(--color-red));
36 }
37 }
38
39 :where(.Bookmark) & {
40 --font-size-button: var(--font-size-3);
41 border-width: 10px;
42 block-size: calc(var(--font-size-button) + 20px);
43 }
44}
45
46.Button-rss {
47 position: relative;
48
49 &:not(:hover) {
50 border-image-source: var(--button-rss);
51 }
52
53 &::after {
54 background: url("/images/rss.svg") center / 65% auto no-repeat;
55 content: "";
56 display: block;
57 inset: -15px;
58 position: absolute;
59 pointer-events: none;
60 }
61}