hugo-book
Code Issues

Rewrite color scheme mixins, move more parameters into schemes, update badge shortcode

Browse Source
This commit is contained in:
Alex Shpak
2025-10-06 00:36:32 +02:00
parent 9a9f4925d6
commit 7fe158c8ed
15 changed files with 142 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/_custom.scss
+14 -3
View File
@@ -1,3 +1,14 @@
/* You can add custom styles here. */
// @import "plugins/numbered";
/*
You can add custom styles here.
It could be plugins:
@import "plugins/numbered";
@import "plugins/scrollbars";
Or custom styles:
body { background: white; }
Or even theme mixins:
@mixin theme-light {
--body-background: white;
--body-font-color: black;
...
}
*/
assets/_defaults.scss
+64 -32
View File
@@ -4,15 +4,6 @@ $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: $padding-4 !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
$container-max-width: 80rem !default;
@@ -21,44 +12,85 @@ $toc-width: 16rem !default;
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
$hint-colors: (
default: #64748b,
info: #4486dd,
success: #3bad3b,
warning: #f59e42,
danger: #d84747,
:root {
--font-size: 16px;
--font-size-smaller: 0.875rem;
--font-size-smallest: 0.75rem;
note: #4486dd,
tip: #3bad3b,
important: #8144dd,
caution: #d84747
) !default;
--body-font-weight: 400;
--body-background: white;
--body-background-tint: transparent;
--body-font-color: black;
--border-radius: 0.25rem;
}
// Themes
@mixin theme-light {
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-500: #adb5bd;
--body-background: white;
--body-background-tint: none;
--body-font-color: black;
--color-link: #0055bb;
--color-visited-link: #5500bb;
--body-background: white;
--body-font-color: black;
--icon-filter: none;
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-500: #adb5bd;
@include accent("default", #64748b);
@include accent("note", #4486dd);
@include accent("tip", #3bad3b);
@include accent("important", #8144dd);
@include accent("warning", #f59e42);
@include accent("caution", #d84747);
// Fallback for {{< hint >}} shortcodes
@include accent("info", #4486dd);
@include accent("success", #3bad3b);
@include accent("danger", #d84747);
}
@mixin theme-dark {
--gray-100: #494e54;
--gray-200: #5c6165;
--gray-500: #999d9f;
--body-background: #343a40;
--body-background-tint: none;
--body-font-color: #e9ecef;
--color-link: #84b2ff;
--color-visited-link: #b88dff;
--body-background: #343a40;
--body-font-color: #e9ecef;
--icon-filter: brightness(0) invert(1);
--gray-100: #494e54;
--gray-200: #5c6165;
--gray-500: #999d9f;
@include accent("default", #64748b);
@include accent("note", #4486dd);
@include accent("tip", #3bad3b);
@include accent("important", #8144dd);
@include accent("warning", #f59e42);
@include accent("caution", #d84747);
// Fallback for {{< hint >}} shortcodes
@include accent("info", #4486dd);
@include accent("success", #3bad3b);
@include accent("danger", #d84747);
}
@mixin theme-auto {
@include theme-light;
@media (prefers-color-scheme: dark) {
@include theme-dark;
}
}
// Convenience mixing to declare a color and a transparent tint
@mixin accent($name, $color, $tint: 0.1) {
--color-accent-#{$name}: #{$color};
--color-accent-#{$name}-tint: #{rgba($color, $tint)};
}
assets/_fonts.scss
+5
View File
@@ -0,0 +1,5 @@
/*
This is an empty file for backward compatibility.
Custom font used to be defined here.
It will be removed eventually.
*/
assets/_main.scss
+11 -10
View File
@@ -1,5 +1,5 @@
html {
font-size: $font-size-base;
font-size: var(--font-size);
scroll-behavior: smooth;
touch-action: manipulation;
scrollbar-gutter: stable;
@@ -8,9 +8,9 @@ html {
body {
min-width: $body-min-width;
color: var(--body-font-color);
background: var(--body-background);
background: var(--body-background) var(--body-background-tint);
font-weight: $body-font-weight;
font-weight: var(--body-font-weight);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -22,7 +22,7 @@ h3,
h4,
h5,
h6 {
font-weight: $body-font-weight;
font-weight: inherit;
}
a {
@@ -59,6 +59,7 @@ nav ul {
a {
padding: .5em 0;
display: flex;
transition: opacity 0.1s ease-in-out;
}
a[href]:hover, a[role=button]:hover {
@@ -107,7 +108,7 @@ a .book-icon {
.book-menu {
flex: 0 0 $menu-width;
font-size: $font-size-14;
font-size: var(--font-size-smaller);
.book-menu-content {
width: $menu-width;
@@ -140,7 +141,7 @@ a .book-icon {
display: none;
}
input.toggle:checked + label{
input.toggle:checked + label {
> img:last-child {
transform: rotate(90deg);
}
@@ -257,7 +258,7 @@ body[dir="rtl"] .book-menu {
padding: $padding-8;
border: 0;
border-radius: $border-radius;
border-radius: var(--border-radius);
background: var(--gray-100);
color: var(--body-font-color);
@@ -294,7 +295,7 @@ body[dir="rtl"] .book-menu {
.book-toc {
flex: 0 0 $toc-width;
font-size: $font-size-12;
font-size: var(--font-size-smallest);
.book-toc-content {
width: $toc-width;
@@ -319,7 +320,7 @@ body[dir="rtl"] .book-menu {
.book-footer {
padding-top: $padding-16;
font-size: $font-size-14;
font-size: var(--font-size-smaller);
a {
margin: $padding-4 0;
@@ -436,4 +437,4 @@ body[dir="rtl"] .book-menu {
.book-toc .book-toc-content {
padding: $padding-16 * 2 $padding-16;
}
}
}
assets/_markdown.scss
+12 -12
View File
@@ -14,7 +14,7 @@
h4,
h5,
h6 {
font-weight: $body-font-weight;
font-weight: inherit;
line-height: 1;
margin-top: 1.5em;
margin-bottom: $padding-16;
@@ -32,12 +32,12 @@
}
}
h1 { font-size: $font-size-16 * 2; }
h2 { font-size: $font-size-16 * 1.5; }
h3 { font-size: $font-size-16 * 1.25; }
h4 { font-size: $font-size-16 * 1.125; }
h5 { font-size: $font-size-16 * 1; }
h6 { font-size: $font-size-16 * 0.875; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
b,
optgroup,
@@ -66,14 +66,14 @@
unicode-bidi: embed;
padding: 0 $padding-4;
background: var(--gray-200);
border-radius: $border-radius;
border-radius: var(--border-radius);
font-size: 0.875em;
}
pre {
padding: $padding-16;
background: var(--gray-100);
border-radius: $border-radius;
border-radius: var(--border-radius);
overflow-x: auto;
code {
@@ -91,7 +91,7 @@
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
border-inline-start: $padding-4 solid var(--gray-200);
border-radius: $border-radius;
border-radius: var(--border-radius);
:first-child {
margin-top: 0;
@@ -149,7 +149,7 @@
.highlight {
direction: ltr;
unicode-bidi: embed;
border-radius: $border-radius;
border-radius: var(--border-radius);
table tr {
td pre code > span {
@@ -171,7 +171,7 @@
padding: $padding-16;
margin: $padding-16 0;
border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
border-radius: var(--border-radius);
summary {
line-height: 1;
assets/_shortcodes.scss
+26 -30
View File
@@ -6,7 +6,7 @@
margin-bottom: $padding-16;
border: $padding-1 solid var(--gray-200);
border-radius: $border-radius;
border-radius: var(--border-radius);
overflow: hidden;
@@ -67,12 +67,12 @@
// {{< button >}}
a.book-btn[href] {
display: inline-block;
font-size: $font-size-14;
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: $border-radius;
border-radius: var(--border-radius);
cursor: pointer;
&:hover {
@@ -80,23 +80,29 @@
}
}
// {{< hint >}}
.book-hint {
@each $name, $color in $hint-colors {
@each $name in (note, tip, important, warning, caution, default, info, success, danger) {
&.#{$name} {
border-color: $color;
background-color: rgba($color, 0.1);
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: $font-size-14;
font-weight: $body-font-weight;
font-size: var(--font-size-smaller);
font-weight: var(body-font-weight);
vertical-align: middle;
border-radius: $border-radius;
border-radius: var(--border-radius);
border: $padding-1 solid var(--accent-color);
overflow: hidden;
text-wrap: nowrap;
color: var(--body-font-color);
@@ -106,19 +112,9 @@
padding: 0 $padding-8;
}
span.book-badge-title {
--background-opacity: 0.1;
}
span.book-badge-value {
--background-opacity: 1;
color: var(--body-background);
}
@each $name, $color in $hint-colors {
&.#{$name} span {
background-color: rgba($color, var(--background-opacity));
}
background-color: var(--accent-color);
}
}
@@ -158,7 +154,6 @@
@extend .markdown-inner;
border-inline-start: $padding-1 solid var(--gray-500);
padding-inline-start: $padding-16 * 3;
padding-bottom: $padding-16 * 2;
}
@@ -173,9 +168,9 @@
display: block;
overflow: hidden;
height: 100%;
border-radius: $border-radius;
border-radius: var(--border-radius);
border: $padding-1 solid var(--gray-200);
> a {
display: block;
height: 100%;
@@ -183,12 +178,13 @@
&[href], &[href]:visited {
color: var(--body-font-color);
}
&[href]:hover {
text-decoration: none;
background: var(--gray-100);
}
}
> a > img, > img {
width: 100%;
display: block;
@@ -215,12 +211,12 @@
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;
@@ -243,11 +239,11 @@
.book-codeblock-filename {
background: var(--gray-200);
font-size: $font-size-14;
font-size: var(--font-size-smaller);
margin-top: $padding-16;
padding: $padding-4 $padding-16;
border-start-start-radius: $border-radius;
border-start-end-radius: $border-radius;
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
a {
color: var(--body-font-color);
assets/_utils.scss
-6
View File
@@ -70,12 +70,6 @@ input.toggle {
position: absolute;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
@mixin spin($duration) {
animation: spin $duration ease infinite;
@keyframes spin {
assets/_variables.scss
+1 -3
View File
@@ -1,3 +1 @@
/* You can override SASS variables here. */
// @import "plugins/dark";
/* You can override SCSS variables here. */
assets/book.scss
+6 -2
View File
@@ -1,6 +1,5 @@
@import "defaults";
@import "variables";
@import "themes/{{ default "light" .Site.Params.BookTheme }}";
@import "normalize";
@import "utils";
@@ -11,5 +10,10 @@
@import "markdown";
@import "shortcodes";
// Custom defined styles
// Custom defined styles, theme mixins also placed there
@import "custom";
// Select theme mixing based on site parameter
:root {
@include theme-{{ default "light" .Site.Params.BookTheme }};
}
assets/themes/_auto.scss
-9
View File
@@ -1,9 +0,0 @@
:root {
@include theme-light;
}
@media (prefers-color-scheme: dark) {
:root {
@include theme-dark;
}
}
assets/themes/_dark.scss
-3
View File
@@ -1,3 +0,0 @@
:root {
@include theme-dark;
}
assets/themes/_light.scss
-3
View File
@@ -1,3 +0,0 @@
:root {
@include theme-light;
}