trwnh.com/unified.test.hugo/assets/styles/common/elements.scss

77 lines
1.6 KiB
SCSS
Raw Normal View History

/* 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 {
margin: 0;
2024-11-14 00:16:24 +00:00
max-width: max-content;
}
figcaption {
padding-block: 1em;
padding-inline: 1em;
}
2024-11-13 17:24:48 +00:00
figure img {
display: block;
margin: 0 auto;
}
figure img ~ figcaption {
background: var(--ui-overlay);
color: var(--ui-overlay-text);
text-align: center;
}
/* extra style and flair */
code {
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 0.25rem;
}
/* fix pre */
pre {
margin: 0;
2024-10-16 07:43:37 +00:00
}
/* limit img to page width */
img {
2024-10-18 07:33:33 +00:00
max-inline-size: 100%;
}