ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement new css.Build.

Browse source
This commit is contained in:
Fredrik Jonsson 2026-04-08 11:17:24 +02:00
commit d984bcaf5d
1 changed files with 1681 additions and 1695 deletions
Download patch file Download diff file Expand all files Collapse all files

320
assets/css/_zen.css
View file

@ -1,207 +1,205 @@
/* Zen custom styles */
@layer zen {
/* Page */
/* Page */
body {
background-color: var(--color-backdrop);
}
body {
background-color: var(--color-backdrop);
}
.page {
background-color: var(--color-body-bg);
}
.page {
background-color: var(--color-body-bg);
}
.footer {
border-block-start: 2px solid var(--color-border);
}
.footer {
border-block-start: 2px solid var(--color-border);
}
/* Apply smaller text to blocks, footer etc. */
/* Apply smaller text to blocks, footer etc. */
th,
label,
legend,
figcaption {
font-size: var(--fs-s);
}
th,
label,
legend,
figcaption {
font-size: var(--fs-s);
}
.language-selector,
.footer {
font-size: var(--fs-xs);
}
.language-selector,
.footer {
font-size: var(--fs-xs);
}
/* Apply heading font stack and colour to labels etc. */
/* 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,
legend,
.main-menu,
.header,
.footer {
color: var(--color-headings);
font-family: var(--ff-headings);
}
th,
label {
font-weight: var(--fw-headings);
}
th,
label {
font-weight: var(--fw-headings);
}
/* Article and content. */
/* Article and content. */
article,
aside {
& > ul {
display: table;
list-style: none;
padding: 0;
article,
aside {
& > ul {
display: table;
list-style: none;
padding: 0;
& > li {
display: table-row;
& > 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;
}
&::before {
padding-inline-end: var(--spacing-xs);
display: table-cell;
content: '\2981';
font-size: var(--fs-s);
}
}
}
article {
.submitted,
.tags {
@media (min-width: 666px) {
display: inline-block;
padding-inline-end: 1rem;
& > 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 (min-width: 666px) {
display: inline-block;
padding-inline-end: 1rem;
}
}
code {
font-size: var(--fs-xs);
overflow-wrap: break-word;
}
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;
}
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;
}
& > code {
display: inline-block;
white-space: pre;
}
}
}
.content-dates {
text-align: end;
.content-dates {
text-align: end;
}
.repository-links {
justify-content: end;
align-items: center;
svg {
order: 1;
}
}
/* Navigation */
.repository-links {
justify-content: end;
align-items: center;
.main-menu {
a {
display: block;
background-color: var(--color-button);
color: var(--color-button-text);
padding: 2px 8px;
text-decoration: none;
svg {
order: 1;
&:hover,
&:focus {
background-color: var(--color-button-hover);
}
}
/* 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;
}
&:active,
&[aria-current] {
text-decoration: underline;
}
}
}
/* Search */
/* Search */
.search-text {
font-size: var(--fs-l);
}
.search-text {
font-size: var(--fs-l);
}
/* Copy code */
/* Copy code */
[data-codeblock] {
position: relative;
[data-codeblock] {
position: relative;
& > pre {
padding-block-start: 1lh;
}
& > 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);
rotate: 90deg;
cursor: pointer;
& > span {
pointer-events: none;
}
.codebutton {
position: absolute;
inset-inline-end: 1rem;
background: unset;
border: unset;
text-shadow: unset;
font-size: var(--fs-l);
color: var(--color-border);
rotate: 90deg;
cursor: pointer;
& > span {
pointer-events: none;
}
&:hover,
&:focus-visible,
&:active {
scale: 1.15;
}
&:hover,
&:focus-visible,
&:active {
scale: 1.15;
}
}
.flash-item {
animation: --flash 500ms ease-in-out 1ms;
}
.flash-item {
animation: --flash 500ms ease-in-out 1ms;
}
@keyframes --flash {
50% {
border-color: var(--color-warning);
background-color: var(--color-warning-bg);
}
@keyframes --flash {
50% {
border-color: var(--color-warning);
background-color: var(--color-warning-bg);
}
}