Something went wrong. Try again.
Attic is a cozy space with lofty ambitions. attic.social
Something went wrong. Try again.
1.4 kB · 61 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162.Button,button[type] { --block-size: calc(var(--font-size-button) + 30px); border: 15px solid transparent; border-image: var(--button-border) 15 fill stretch; block-size: var(--block-size); color: rgb(var(--color-black)); display: block; font-family: var(--font-family-2); font-size: var(--font-size-button); font-weight: 400; inline-size: fit-content; line-height: 1; min-inline-size: var(--min-inline-size, var(--block-size)); padding: 0 5px; /*text-box: trim-both ex alphabetic;*/ text-align: center; text-decoration: none; text-transform: uppercase; text-shadow: 2px 2px rgb(var(--color-brown) / 0.3); transition: border-image 100ms;
&:hover { border-image-source: var(--button-border-hover); }
&:disabled { opacity: 0.5; pointer-events: none; }
&[data-danger] { &:not(:hover) { border-image-source: var(--button-border-danger); color: rgb(var(--color-red)); } }
:where(.Bookmark) & { --font-size-button: var(--font-size-3); border-width: 10px; block-size: calc(var(--font-size-button) + 20px); }}
.Button-rss { position: relative;
&:not(:hover) { border-image-source: var(--button-rss); }
&::after { background: url("/images/rss.svg") center / 65% auto no-repeat; content: ""; display: block; inset: -15px; position: absolute; pointer-events: none; }}