hugo-book
This commit is contained in:
JamesFlare1212
364
themes/hugo-book/assets/_main.scss
Normal file
364
themes/hugo-book/assets/_main.scss
Normal file
@@ -0,0 +1,364 @@
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
scroll-behavior: smooth;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: $body-min-width;
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
letter-spacing: 0.33px;
|
||||
font-weight: $body-font-weight;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
box-sizing: border-box;
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: $body-font-weight;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:focus {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
aside nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 1em 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: $padding-16;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.book-brand {
|
||||
margin-top: 0;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
img {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
margin-inline-end: $padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
.book-menu {
|
||||
flex: 0 0 $menu-width;
|
||||
font-size: $font-size-14;
|
||||
|
||||
.book-menu-content {
|
||||
width: $menu-width;
|
||||
padding: $padding-16;
|
||||
background: var(--body-background);
|
||||
|
||||
@include fixed;
|
||||
}
|
||||
|
||||
a,
|
||||
label {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
input.toggle + label + ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input.toggle:checked + label + ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input.toggle + label::after {
|
||||
content: "▸";
|
||||
}
|
||||
|
||||
input.toggle:checked + label::after {
|
||||
content: "▾";
|
||||
}
|
||||
}
|
||||
|
||||
// for RTL support
|
||||
body[dir="rtl"] .book-menu {
|
||||
input.toggle + label::after {
|
||||
content: "◂";
|
||||
}
|
||||
|
||||
input.toggle:checked + label::after {
|
||||
content: "▾";
|
||||
}
|
||||
}
|
||||
|
||||
.book-section-flat {
|
||||
margin: $padding-16 * 2 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 * 3;
|
||||
}
|
||||
|
||||
.book-header {
|
||||
display: none;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
label {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
img.book-icon {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.book-search {
|
||||
position: relative;
|
||||
margin: $padding-16 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: $padding-8;
|
||||
|
||||
border: 0;
|
||||
border-radius: $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);
|
||||
}
|
||||
|
||||
small {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.book-toc {
|
||||
flex: 0 0 $toc-width;
|
||||
font-size: $font-size-12;
|
||||
|
||||
.book-toc-content {
|
||||
width: $toc-width;
|
||||
padding: $padding-16;
|
||||
|
||||
@include fixed;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
nav > ul > li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.book-footer {
|
||||
padding-top: $padding-16;
|
||||
font-size: $font-size-14;
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-inline-end: $padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
.book-comments {
|
||||
margin-top: $padding-16;
|
||||
}
|
||||
|
||||
.book-languages {
|
||||
margin-block-end: $padding-16 * 2;
|
||||
|
||||
.book-icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-inline-end: .5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive styles
|
||||
.book-menu-content,
|
||||
.book-toc-content,
|
||||
.book-page,
|
||||
.book-header aside,
|
||||
.markdown {
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: transform, margin, opacity, visibility;
|
||||
will-change: transform, margin, opacity;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-breakpoint) {
|
||||
#menu-control,
|
||||
#toc-control {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.book-menu {
|
||||
visibility: hidden;
|
||||
margin-inline-start: -$menu-width;
|
||||
font-size: $font-size-base;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.book-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.book-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menu-control:focus ~ main label[for="menu-control"] {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
#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: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#toc-control:focus ~ main label[for="toc-control"] {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user