huge upgrade to theme and pagefind search bar.
This commit is contained in:
254
themes/hugo-book.backup/assets/_shortcodes.scss
Normal file
254
themes/hugo-book.backup/assets/_shortcodes.scss
Normal file
@@ -0,0 +1,254 @@
|
||||
.markdown {
|
||||
|
||||
// {{< tabs >}}
|
||||
.book-tabs {
|
||||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: $padding-8 $padding-16;
|
||||
border-bottom: $padding-1 transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.book-tabs-content {
|
||||
order: 999; //Move content blocks to the end
|
||||
width: 100%;
|
||||
border-top: $padding-1 solid var(--gray-100);
|
||||
padding: $padding-16;
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label {
|
||||
border-bottom: $padding-1 solid var(--color-link);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label+.book-tabs-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// {{< columns >}}
|
||||
.book-columns {
|
||||
gap: $padding-16;
|
||||
|
||||
>div {
|
||||
margin: $padding-16 0;
|
||||
min-width: $body-min-width * 0.66;
|
||||
}
|
||||
|
||||
>ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: $padding-16;
|
||||
|
||||
>li {
|
||||
flex: 1 1;
|
||||
min-width: $body-min-width * 0.66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// {{< button >}}
|
||||
a.book-btn[href] {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-smaller);
|
||||
color: var(--color-link);
|
||||
line-height: $padding-16 * 2;
|
||||
padding: 0 $padding-16;
|
||||
border: $padding-1 solid var(--color-link);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.book-hint {
|
||||
@each $name in (note, tip, important, warning, caution, default, info, success, danger) {
|
||||
&.#{$name} {
|
||||
border-color: var(--color-accent-#{$name});
|
||||
background-color: var(--color-accent-#{$name}-tint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// {{< badge >}}
|
||||
.book-badge {
|
||||
@each $name in (note, tip, important, warning, caution, default, info, success, danger) {
|
||||
&.#{$name} {
|
||||
--accent-color: var(--color-accent-#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-smaller);
|
||||
font-weight: var(--body-font-weight);
|
||||
vertical-align: middle;
|
||||
border-radius: var(--border-radius);
|
||||
border: $padding-1 solid var(--accent-color);
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
color: var(--body-font-color);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 $padding-8;
|
||||
}
|
||||
|
||||
span.book-badge-value {
|
||||
color: var(--body-background);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
// {{< steps >}}
|
||||
.book-steps {
|
||||
position: relative;
|
||||
|
||||
>ol {
|
||||
counter-reset: steps;
|
||||
list-style: none;
|
||||
padding-inline-start: $padding-16 + $padding-4;
|
||||
margin-top: $padding-16 * 2;
|
||||
|
||||
>li::before {
|
||||
content: counter(steps);
|
||||
counter-increment: steps;
|
||||
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: $padding-8;
|
||||
|
||||
height: $padding-16 * 1.5;
|
||||
width: $padding-16 * 1.5;
|
||||
padding: $padding-4;
|
||||
border-radius: $padding-8;
|
||||
|
||||
white-space: nowrap;
|
||||
line-height: $padding-16;
|
||||
|
||||
color: var(--body-background);
|
||||
background: var(--gray-500);
|
||||
outline: $padding-4 solid var(--body-background);
|
||||
}
|
||||
|
||||
>li {
|
||||
@extend .markdown-inner;
|
||||
border-inline-start: $padding-1 solid var(--gray-500);
|
||||
padding-inline-start: $padding-16 * 3;
|
||||
padding-bottom: $padding-16 * 2;
|
||||
}
|
||||
|
||||
>li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// {{< card >}}
|
||||
.book-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
&[href], &[href]:visited {
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: none;
|
||||
background: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
> a > img, > img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.markdown-inner {
|
||||
padding: $padding-16;
|
||||
}
|
||||
}
|
||||
|
||||
// {{< image >}}
|
||||
.book-image {
|
||||
input + img {
|
||||
cursor: zoom-in;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input:checked + img {
|
||||
position: fixed;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
background: var(--body-background);
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
cursor: zoom-out;
|
||||
padding: $padding-16;
|
||||
}
|
||||
}
|
||||
|
||||
// {{< asciinema >}}
|
||||
.book-asciinema {
|
||||
margin: $padding-16 0;
|
||||
}
|
||||
|
||||
.book-hero {
|
||||
min-height: $padding-16 * 24;
|
||||
align-content: center;
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.book-codeblock-filename {
|
||||
background: var(--gray-100);
|
||||
border: $padding-1 solid var(--gray-200);
|
||||
border-bottom: 0;
|
||||
font-size: var(--font-size-smaller);
|
||||
margin-top: $padding-16;
|
||||
padding: $padding-4 $padding-8;
|
||||
border-start-start-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
|
||||
a {
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
+ .highlight pre {
|
||||
margin-top: 0;
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user