207 lines
3.2 KiB
CSS
207 lines
3.2 KiB
CSS
/* Zen custom styles */
|
|
|
|
/* Page */
|
|
|
|
.footer {
|
|
border-block-start: 2px solid var(--color-border);
|
|
}
|
|
|
|
/* Apply smaller text to blocks, footer etc. */
|
|
|
|
th,
|
|
label,
|
|
legend,
|
|
figcaption {
|
|
font-size: var(--fs-s);
|
|
}
|
|
|
|
.language-selector,
|
|
.footer {
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
/* Apply heading font stack and colour to labels etc. */
|
|
|
|
th,
|
|
label,
|
|
legend,
|
|
.main-menu,
|
|
.header,
|
|
.footer {
|
|
color: var(--color-headings);
|
|
font-family: var(--ff-headings);
|
|
}
|
|
|
|
th,
|
|
label {
|
|
font-weight: var(--fw-headings);
|
|
}
|
|
|
|
/* Article and content. */
|
|
|
|
article,
|
|
aside {
|
|
& > ul {
|
|
display: table;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
& > li {
|
|
display: table-row;
|
|
|
|
&::before {
|
|
padding-inline-end: var(--spacing-xs);
|
|
display: table-cell;
|
|
content: '\2981';
|
|
font-size: var(--fs-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
& > ol {
|
|
display: table;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
& > li {
|
|
display: table-row;
|
|
counter-increment: table-ol;
|
|
|
|
&::before {
|
|
padding-inline-end: var(--spacing-xs);
|
|
display: table-cell;
|
|
content: counter(table-ol) '.';
|
|
font-size: var(--fs-s);
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
article {
|
|
.submitted,
|
|
.tags {
|
|
@media (width >= 666px) {
|
|
display: inline-block;
|
|
padding-inline-end: 1rem;
|
|
}
|
|
}
|
|
|
|
code {
|
|
font-size: var(--fs-xs);
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
pre {
|
|
border-radius: var(--radius-xs);
|
|
padding: 5px;
|
|
border: 1px solid var(--color-border-light);
|
|
background-color: var(--color-text-bg);
|
|
overflow: auto;
|
|
max-height: 300px;
|
|
|
|
&.chroma {
|
|
max-height: initial;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
& > code {
|
|
display: inline-block;
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-dates {
|
|
text-align: end;
|
|
}
|
|
|
|
.repository-links {
|
|
justify-content: end;
|
|
align-items: center;
|
|
|
|
svg {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
/* Navigation */
|
|
|
|
.main-menu {
|
|
a {
|
|
display: block;
|
|
background-color: var(--color-button);
|
|
color: var(--color-button-text);
|
|
padding: 2px 8px;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--color-button-hover);
|
|
}
|
|
|
|
&:active,
|
|
&[aria-current] {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Search */
|
|
|
|
.search-text {
|
|
font-size: var(--fs-l);
|
|
}
|
|
|
|
/* Copy code */
|
|
|
|
[data-codeblock] {
|
|
position: relative;
|
|
|
|
& > pre {
|
|
padding-block-start: 1lh;
|
|
}
|
|
}
|
|
|
|
.codebutton {
|
|
position: absolute;
|
|
inset-inline-end: 1rem;
|
|
background: unset;
|
|
border: unset;
|
|
text-shadow: unset;
|
|
font-size: var(--fs-l);
|
|
color: var(--color-border-light);
|
|
rotate: 90deg;
|
|
cursor: pointer;
|
|
|
|
& > span {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:active {
|
|
scale: 1.15;
|
|
}
|
|
}
|
|
|
|
.flash-item {
|
|
--color-flash: var(--color-warning);
|
|
--color-flash-bg: light-dark(
|
|
oklch(from var(--color-flash) 100% 0.03 h),
|
|
oklch(from var(--color-flash) calc(l - 0.3) c h)
|
|
);
|
|
--color-flash-border: light-dark(
|
|
oklch(from var(--color-flash) calc(l + 0.2) c h),
|
|
oklch(from var(--color-flash) calc(l - 0.07) c h)
|
|
);
|
|
|
|
animation: --flash 500ms ease-in-out 1ms;
|
|
}
|
|
|
|
@keyframes --flash {
|
|
50% {
|
|
border-color: var(--color-flash-border);
|
|
background-color: var(--color-flash-bg);
|
|
}
|
|
}
|