Introduce SCSS plugins: dark mode and numbered headings

This commit is contained in:
Alex Shpak 2019-10-08 17:03:40 +02:00
parent 1cd5040d84
commit 007bc10c07
18 changed files with 428 additions and 409 deletions

View file

@ -1,2 +1 @@
/* To be overridden by theme user */
// @import "variables";
/* To be overridden by theme user, scss variables are also accessible here */

50
assets/_defaults.scss Normal file
View file

@ -0,0 +1,50 @@
// Used in layout
$padding-1: 1px !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-16: 1rem !default;
$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
$font-size-14: 0.875rem !default;
$font-size-16: 1rem !default;
$border-radius: 0.15rem !default;
// Grayscale
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$color-link: #05b !default;
$color-visited-link: #8440f1 !default;
$color-dark-link: $gray-800 !default;
$body-background: white !default;
$body-font-color: $gray-800 !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
$container-max-width: 80rem !default;
$header-height: 3.5rem !default;
$menu-width: 16rem !default;
$toc-width: 16rem !default;
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
$sm-breakpoint: $menu-width + $body-min-width !default;
// Panel colors
$hint-colors: (
info: #6bf,
warning: #fd6,
danger: #f66
) !default;

288
assets/_main.scss Normal file
View file

@ -0,0 +1,288 @@
html {
font-size: $font-size-base;
letter-spacing: 0.33px;
scroll-behavior: smooth;
}
html,
body {
min-width: $body-min-width;
overflow-x: hidden;
}
body {
color: $body-font-color;
background: $body-background;
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: $color-link;
&:visited {
color: $color-visited-link;
}
}
img {
vertical-align: baseline;
}
aside nav ul {
padding: 0;
margin: 0;
list-style: none;
li {
margin: 1em 0;
}
a {
display: block;
}
a:hover {
opacity: 0.5;
}
ul {
padding-left: $padding-16;
}
}
ul.pagination {
display: flex;
justify-content: center;
list-style-type: none;
.page-item a {
padding: $padding-16;
}
}
.container {
max-width: $container-max-width;
margin: 0 auto;
}
.book-brand {
margin-top: 0;
img {
height: 1.5em;
width: auto;
vertical-align: middle;
margin-right: $padding-8;
}
}
.book-menu {
flex: 0 0 $menu-width;
font-size: $font-size-14;
nav {
width: $menu-width;
padding: $padding-16;
@include fixed;
}
@include dark-links;
}
.book-section-flat {
margin-bottom: $padding-16 * 2;
&:not(:first-child) {
margin-top: $padding-16 * 2;
}
> a,
> span {
font-weight: bolder;
}
> ul {
padding-left: 0;
}
}
.book-page {
min-width: $body-min-width;
flex-grow: 1;
padding: $padding-16;
}
.book-header {
margin-bottom: $padding-16;
display: none;
}
.book-search {
position: relative;
margin: $padding-16 0;
border-bottom: 1px solid transparent;
&::after {
display: block;
content: "";
clear: both;
}
input {
width: 100%;
padding: $padding-8;
border: 0;
border-radius: $padding-4;
background: $gray-100;
&:required + .book-search-spinner {
display: block;
}
}
.book-search-spinner {
position: absolute;
margin: $padding-8;
right: 0;
top: 0;
width: $padding-16;
height: $padding-16;
border: $padding-1 solid transparent;
border-top-color: $body-font-color;
border-radius: 50%;
@include spin(1s);
}
}
.book-toc {
flex: 0 0 $toc-width;
font-size: $font-size-12;
nav {
width: $toc-width;
padding: $padding-16;
@include fixed;
}
img {
height: 1em;
}
nav > ul > li:first-child {
margin-top: 0;
}
// Classes to hide nested levels of ToC (can be replaced by @for, but it's more clear like this)
&.level-1 ul ul,
&.level-2 ul ul ul,
&.level-3 ul ul ul ul,
&.level-4 ul ul ul ul ul,
&.level-5 ul ul ul ul ul ul,
&.level-6 ul ul ul ul ul ul ul {
display: none;
}
}
.book-footer {
display: flex;
padding-top: $padding-16;
font-size: $font-size-14;
img {
height: 1em;
}
}
.book-posts {
min-width: $body-min-width;
max-width: $body-min-width * 2;
flex-grow: 1;
padding: $padding-16;
article {
padding-bottom: $padding-16;
}
}
.book-home {
padding: $padding-16;
}
// Responsive styles
aside nav,
.book-page,
.book-posts,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin-left, opacity;
will-change: transform, margin-left;
}
@media screen and (max-width: $md-breakpoint) {
.book-toc {
display: none;
}
}
@media screen and (max-width: $sm-breakpoint) {
.book-menu {
margin-left: -$menu-width;
font-size: $font-size-base;
}
.book-header {
display: flex;
}
#menu-control:checked + main {
.book-menu nav,
.book-page,
.book-posts {
transform: translateX($menu-width);
}
.book-header label {
transform: rotate(90deg);
}
.markdown {
opacity: 0.25;
}
}
}
// Extra space for big screens
@media screen and (min-width: $container-max-width) {
.book-page,
.book-posts,
.book-menu nav,
.book-toc nav {
padding: $padding-16 * 2 $padding-16;
}
}

View file

@ -1,5 +1,3 @@
@import "variables";
.markdown-inner {
// Util class to remove extra margin in nested markdown content
> :first-child {

View file

@ -1,50 +1 @@
// Used in layout
$padding-1: 1px !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-16: 1rem !default;
$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
$font-size-14: 0.875rem !default;
$font-size-16: 1rem !default;
$border-radius: 0.15rem !default;
// Grayscale
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$color-link: #05b !default;
$color-visited-link: #8440f1 !default;
$color-dark-link: $gray-800 !default;
$body-background: white !default;
$body-font-color: $gray-800 !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
$container-max-width: 80rem !default;
$header-height: 3.5rem !default;
$menu-width: 16rem !default;
$toc-width: 16rem !default;
$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
$sm-breakpoint: $menu-width + $body-min-width !default;
// Panel colors
$hint-colors: (
info: #6bf,
warning: #fd6,
danger: #f66
);
/* To be overridden by theme user, e.g. set SASS vars*/

View file

@ -1,301 +1,13 @@
@import "normalize";
@import "defaults";
@import "variables";
@import "normalize";
@import "utils";
@import "main";
@import "fonts";
@import "markdown";
@import "shortcodes";
html {
font-size: $font-size-base;
letter-spacing: 0.33px;
scroll-behavior: smooth;
}
html,
body {
min-width: $body-min-width;
overflow-x: hidden;
}
body {
color: $body-font-color;
background: $body-background;
font-family: sans-serif;
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: $color-link;
&:visited {
color: $color-visited-link;
}
}
img {
vertical-align: baseline;
}
aside nav ul {
padding: 0;
margin: 0;
list-style: none;
li {
margin: 1em 0;
}
a {
display: block;
}
a:hover {
opacity: 0.5;
}
ul {
padding-left: $padding-16;
}
}
ul.pagination {
display: flex;
justify-content: center;
list-style-type: none;
.page-item a {
padding: $padding-16;
}
}
.container {
max-width: $container-max-width;
margin: 0 auto;
}
.book-brand {
margin-top: 0;
img {
height: 1.5em;
width: auto;
vertical-align: middle;
margin-right: $padding-8;
}
}
.book-menu {
flex: 0 0 $menu-width;
font-size: $font-size-14;
nav {
width: $menu-width;
padding: $padding-16;
@include fixed;
}
@include dark-links;
}
.book-section-flat {
margin-bottom: $padding-16 * 2;
&:not(:first-child) {
margin-top: $padding-16 * 2;
}
> a,
> span {
font-weight: bolder;
}
> ul {
padding-left: 0;
}
}
.book-page {
min-width: $body-min-width;
flex-grow: 1;
padding: $padding-16;
}
.book-header {
margin-bottom: $padding-16;
display: none;
}
.book-search {
position: relative;
margin: $padding-16 0;
border-bottom: 1px solid transparent;
&::after {
display: block;
content: "";
clear: both;
}
input {
width: 100%;
padding: $padding-8;
border: 0;
border-radius: $padding-4;
background: $gray-100;
&:required + .book-search-spinner {
display: block;
}
}
.book-search-spinner {
position: absolute;
margin: $padding-8;
right: 0;
top: 0;
width: $padding-16;
height: $padding-16;
border: $padding-1 solid transparent;
border-top-color: $body-font-color;
border-radius: 50%;
@include spin(1s);
}
}
.book-toc {
flex: 0 0 $toc-width;
font-size: $font-size-12;
nav {
width: $toc-width;
padding: $padding-16;
@include fixed;
}
img {
height: 1em;
}
nav > ul > li:first-child {
margin-top: 0;
}
// Classes to hide nested levels of ToC (can be replaced by @for, but it's more clear like this)
&.level-1 ul ul,
&.level-2 ul ul ul,
&.level-3 ul ul ul ul,
&.level-4 ul ul ul ul ul,
&.level-5 ul ul ul ul ul ul,
&.level-6 ul ul ul ul ul ul ul {
display: none;
}
}
.book-footer {
display: flex;
padding-top: $padding-16;
font-size: $font-size-14;
img {
height: 1em;
}
}
.book-posts {
min-width: $body-min-width;
max-width: $body-min-width * 2;
flex-grow: 1;
padding: $padding-16;
article {
padding-bottom: $padding-16;
}
}
.book-home {
padding: $padding-16;
}
// Responsive styles
aside nav,
.book-page,
.book-posts,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin-left, opacity;
will-change: transform, margin-left;
}
@media screen and (max-width: $md-breakpoint) {
.book-toc {
display: none;
}
}
@media screen and (max-width: $sm-breakpoint) {
.book-menu {
margin-left: -$menu-width;
font-size: $font-size-base;
}
.book-header {
display: flex;
}
#menu-control:checked + main {
.book-menu nav,
.book-page,
.book-posts {
transform: translateX($menu-width);
}
.book-header label {
transform: rotate(90deg);
}
.markdown {
opacity: 0.25;
}
}
}
// Extra space for big screens
@media screen and (min-width: $container-max-width) {
.book-page,
.book-posts,
.book-menu nav,
.book-toc nav {
padding: $padding-16 * 2 $padding-16;
}
}
// Add fonts
@import "fonts";
// Add custom defined styles
// Custom defined styles
@import "custom";

View file

@ -0,0 +1,9 @@
$gray-100: rgba(255, 255, 255, 0.1);
$gray-200: rgba(255, 255, 255, 0.2);
$body-background: #343a40;
$body-font-color: #e9ecef;
$color-link: #84b2ff;
$color-visited-link: #b88dff;
$color-dark-link: $body-font-color;

View file

@ -0,0 +1,23 @@
.book-page {
.markdown {
@for $h from 1 through 6 {
> h#{$h} {
counter-increment: h#{$h};
counter-reset: h#{$h + 1};
$content: "";
@for $n from 1 through $h {
$content: $content + 'counter(h#{$n})"."';
}
&::before {
content: unquote($content) " ";
}
}
}
}
+ .book-toc nav ul {
list-style: decimal;
}
}

View file

@ -1,2 +1,3 @@
@import "variables";
// You can add custom styles here.
// @import "plugins/numbered";

View file

@ -1,13 +1,3 @@
// You can override SASS variables here. Below example of simple dark theme.
/* You can override SASS variables here. Below example of simple dark theme. */
/*
$gray-100: rgba(255, 255, 255, 0.1);
$gray-200: rgba(255, 255, 255, 0.2);
$body-background: #343a40;
$body-font-color: #e9ecef;
$color-link: #84b2ff;
$color-visited-link: #b88dff;
$color-dark-link: $body-font-color;
*/
// @import "plugins/dark";

View file

@ -1 +0,0 @@
{"Target":"book.min.e2750c58bf0545d36d2426996f9d6108a275d000f33e7552d83ea28bdcd34ab7.css","MediaType":"text/css","Data":{"Integrity":"sha256-4nUMWL8FRdNtJCaZb51hCKJ10ADzPnVS2D6ii9zTSrc="}}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
{"Target":"book.min.4e5c3d92718456dab80c87ced0c4c63d3984fb3a742f718957ca25c01c6dcdb6.css","MediaType":"text/css","Data":{"Integrity":"sha256-Tlw9knGEVtq4DIfO0MTGPTmE+zp0L3GJV8olwBxtzbY="}}

View file

@ -3,9 +3,10 @@
{{- template "_internal/opengraph.html" . -}}
<title>{{ partial "docs/title" . }} | {{ .Site.Title -}}</title>
<link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
<!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->
{{- $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
{{- $styles := resources.Get "book.scss" | resources.ExecuteAsTemplate "book.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
{{ if default true .Site.Params.BookSearch }}
@ -13,8 +14,7 @@
<script defer src="{{ $searchJS.RelPermalink }}" integrity="{{ $searchJS.Data.Integrity }}"></script>
{{ end }}
<!-- Favicon -->
<link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
{{- template "_internal/google_analytics_async.html" . -}}
<!-- RSS -->
{{ with .OutputFormats.Get "rss" -}}
@ -25,5 +25,3 @@
Made with Book Theme
https://github.com/alex-shpak/hugo-book
{{ "-->" | safeHTML }}
{{ template "_internal/google_analytics_async.html" . }}