trwnh.com/unified.test.hugo/assets/styles/common/elements.scss
2024-11-16 16:42:05 -06:00

66 lines
No EOL
1.3 KiB
SCSS

/* render <kbd> with slight depth */
@supports #{'selector\(:has(kbd))'} {
/* style individual keys only (for the innermost <kbd> element) */
kbd kbd,
kbd:not(:has(kbd)) {
font-family: monospace;
padding: 0.25em;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
border: 1px solid var(--primary-accent-transparent);
margin-inline: 0.25em;
}
}
@supports not #{'selector\(:has(kbd))'} {
/* style the entire key sequence */
kbd {
font-family: monospace;
padding: 0.25em;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
}
/* and prevent double-styling for nested keys */
kbd kbd {
background: none;
}
}
/* render <mark> as highlighting */
mark {
background: var(--primary-accent-transparent);
color: var(--ui-text);
--pad-x-highlight: 0.125em;
padding-inline-start: var(--pad-x-highlight);
padding-inline-end: var(--pad-x-highlight);
}
/* tables */
table {text-align: center;}
thead {
font-weight: bold;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
}
th, td {
border: 1px solid var(--ui-text);
padding: 0.5em;
}
/* figures */
figure {
}
figcaption {
}
/* extra style and flair */
code {
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 0.25rem;
}
/* fix pre */
pre {
margin: 0;
}
/* limit img to page width */
img {
max-inline-size: 100%;
}