443 lines
6.6 KiB
SCSS
443 lines
6.6 KiB
SCSS
html {
|
|
font-size: var(--font-size);
|
|
scroll-behavior: smooth;
|
|
touch-action: manipulation;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
min-width: $body-min-width;
|
|
color: var(--body-font-color);
|
|
background: var(--body-background) var(--body-background-tint);
|
|
|
|
font-weight: var(--body-font-weight);
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
a {
|
|
flex: auto;
|
|
align-items: center;
|
|
gap: .5em;
|
|
|
|
text-decoration: none;
|
|
cursor: default;
|
|
|
|
&[href], &[role=button] {
|
|
color: var(--color-link);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
small {
|
|
@extend .text-small;
|
|
}
|
|
|
|
:focus-visible, input.toggle:focus-visible + label {
|
|
@include outline;
|
|
}
|
|
|
|
nav ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
|
|
li {
|
|
position: relative;
|
|
}
|
|
|
|
a {
|
|
padding: 0.5em 0;
|
|
display: flex;
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
|
|
a[href]:hover, a[role=button]:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
ul {
|
|
padding-inline-start: 1.5em;
|
|
}
|
|
}
|
|
|
|
ul.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style-type: none;
|
|
padding-inline-start: 0px;
|
|
|
|
.page-item a {
|
|
padding: $padding-16;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: $container-max-width;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.book-icon {
|
|
filter: var(--icon-filter);
|
|
}
|
|
|
|
a .book-icon {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
.book-brand {
|
|
margin-top: 0;
|
|
margin-bottom: $padding-16;
|
|
|
|
img {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
}
|
|
|
|
.book-menu {
|
|
flex: 0 0 $menu-width;
|
|
font-size: var(--font-size-smaller);
|
|
|
|
.book-menu-content {
|
|
width: $menu-width;
|
|
padding: $padding-16;
|
|
|
|
@include fixed;
|
|
}
|
|
|
|
a, label {
|
|
color: inherit;
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
}
|
|
|
|
a.active {
|
|
color: var(--color-link);
|
|
}
|
|
|
|
label > img:last-child {
|
|
height: 1em;
|
|
width: 1em;
|
|
|
|
cursor: pointer;
|
|
|
|
align-self: center;
|
|
transition: transform 0.1s ease-in-out;
|
|
}
|
|
|
|
input.toggle + label + ul {
|
|
display: none;
|
|
}
|
|
|
|
input.toggle:checked + label {
|
|
> img:last-child {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
+ ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// for RTL support
|
|
body[dir="rtl"] .book-menu {
|
|
input.toggle + label > img:last-child {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
input.toggle:checked + label > img:last-child {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.book-section-flat {
|
|
margin: $padding-16 0;
|
|
|
|
> a,
|
|
> span,
|
|
> label {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
> ul {
|
|
padding-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.book-page {
|
|
min-width: $body-min-width;
|
|
flex-grow: 1;
|
|
padding: $padding-16;
|
|
}
|
|
|
|
.book-post {
|
|
margin-bottom: $padding-16 * 4;
|
|
|
|
.book-post-date img {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-inline-end: .5em;
|
|
}
|
|
|
|
.book-post-content {
|
|
margin-top: $padding-16;
|
|
}
|
|
|
|
.book-post-thumbnail {
|
|
flex: 0 0 34%;
|
|
|
|
img {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.book-header {
|
|
margin-bottom: $padding-16;
|
|
|
|
label {
|
|
line-height: 0;
|
|
}
|
|
|
|
h3 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: 0 $padding-16;
|
|
}
|
|
}
|
|
|
|
|
|
.book-layout-landing .book-header {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
nav > ul {
|
|
display: flex;
|
|
gap: $padding-16;
|
|
justify-content: end;
|
|
|
|
> li {
|
|
display: block;
|
|
white-space: nowrap;
|
|
|
|
> ul {
|
|
display: none;
|
|
position: absolute;
|
|
padding: 0;
|
|
}
|
|
|
|
&:hover > ul, &:focus-within > ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagefind-ui {
|
|
// --pagefind-ui-background: #84DE02;
|
|
// --pagefind-ui-text: #0048BA;
|
|
// --pagefind-ui-text: var(--body-font-color);
|
|
--pagefind-ui-border: var(--gray-100);
|
|
--pagefind-ui-background: var(--gray-100);
|
|
--pagefind-ui-text: var(--gray-500);
|
|
|
|
}
|
|
|
|
.book-search {
|
|
position: relative;
|
|
margin: $padding-8 0;
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: $padding-8;
|
|
|
|
border: $padding-1 solid var(--gray-200);
|
|
border-radius: var(--border-radius);
|
|
|
|
background: var(--gray-100);
|
|
color: var(--body-font-color);
|
|
|
|
&:required + .book-search-spinner {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.book-search-spinner {
|
|
position: absolute;
|
|
top: 0;
|
|
margin: $padding-8;
|
|
margin-inline-start: calc(100% - #{$padding-16 + $padding-8});
|
|
|
|
width: $padding-16;
|
|
height: $padding-16;
|
|
|
|
border: $padding-1 solid transparent;
|
|
border-top-color: var(--body-font-color);
|
|
border-radius: 50%;
|
|
|
|
@include spin(1s);
|
|
}
|
|
|
|
ul a {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
small {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.book-toc {
|
|
flex: 0 0 $toc-width;
|
|
font-size: var(--font-size-smallest);
|
|
|
|
.book-toc-content {
|
|
width: $toc-width;
|
|
padding: $padding-16;
|
|
|
|
@include fixed;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
|
|
img {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
nav > ul > li:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.book-footer {
|
|
padding-top: $padding-16;
|
|
font-size: var(--font-size-smaller);
|
|
|
|
a {
|
|
margin: $padding-4 0;
|
|
padding: $padding-4 0;
|
|
}
|
|
}
|
|
|
|
.book-comments {
|
|
margin-top: $padding-16;
|
|
}
|
|
|
|
.book-copyright {
|
|
margin-top: $padding-16;
|
|
}
|
|
|
|
.book-languages {
|
|
margin-bottom: $padding-16;
|
|
|
|
span {
|
|
padding: 0;
|
|
}
|
|
|
|
ul {
|
|
padding-inline-start: 1.5em;
|
|
}
|
|
}
|
|
|
|
// Responsive styles
|
|
.book-menu-content,
|
|
.book-toc-content {
|
|
transition: 0.2s ease-in-out;
|
|
transition-property: transform, margin, opacity, visibility;
|
|
will-change: transform, margin, opacity;
|
|
}
|
|
|
|
@media screen and (max-width: $mobile-breakpoint) {
|
|
.book-menu {
|
|
visibility: hidden;
|
|
margin-inline-start: -$menu-width;
|
|
z-index: 1;
|
|
|
|
.book-menu-content {
|
|
background: var(--body-background);
|
|
}
|
|
}
|
|
|
|
.book-toc {
|
|
display: none;
|
|
}
|
|
|
|
.book-header {
|
|
display: block;
|
|
}
|
|
|
|
.book-post-container {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
#menu-control,
|
|
#toc-control {
|
|
display: inline;
|
|
}
|
|
|
|
#menu-control:checked ~ main {
|
|
.book-menu {
|
|
visibility: initial;
|
|
}
|
|
|
|
.book-menu .book-menu-content {
|
|
transform: translateX($menu-width);
|
|
box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.book-page {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.book-menu-overlay {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
#toc-control:checked ~ main {
|
|
.book-header aside {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// for RTL support
|
|
body[dir="rtl"] #menu-control:checked ~ main {
|
|
.book-menu .book-menu-content {
|
|
transform: translateX(-$menu-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Extra space for big screens
|
|
@media screen and (min-width: $container-max-width) {
|
|
.book-page,
|
|
.book-menu .book-menu-content,
|
|
.book-toc .book-toc-content {
|
|
padding: $padding-16 * 2 $padding-16;
|
|
}
|
|
}
|