Dark mode (#66)
This commit is contained in:
Robert Kaussow
GitHub
parent
5eff47c68b
commit
59be9a504f
50 changed files with 1527 additions and 1154 deletions
|
|
@ -12,7 +12,6 @@ steps:
|
|||
commands:
|
||||
- npm install > /dev/null
|
||||
- npx gulp default
|
||||
- npx gulp svg-sprite-list
|
||||
environment:
|
||||
FORCE_COLOR: true
|
||||
NPM_CONFIG_LOGLEVEL: error
|
||||
|
|
@ -271,6 +270,6 @@ depends_on:
|
|||
|
||||
---
|
||||
kind: signature
|
||||
hmac: b90658ce0f5c766fa00660dcf4f712911c01c788872f8315c6216461d83e11ae
|
||||
hmac: d1c4573ebbf3d02675d9801b0f15aa767422640c2eed98e20db44c96e11e3f9a
|
||||
|
||||
...
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -12,6 +12,7 @@ CHANGELOG.md
|
|||
# auto-generated files
|
||||
assets/sprites/
|
||||
assets/*.css
|
||||
assets/js/darkmode.min.js
|
||||
static/*.css
|
||||
!static/custom.css
|
||||
static/js/*.js
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
|
||||
|
||||
|
||||
|
||||
|
||||
## Build and release process
|
||||
|
||||
|
|
|
|||
51
assets/js/darkmode.raw.js
Normal file
51
assets/js/darkmode.raw.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
const DARK_MODE = "dark";
|
||||
const LIGHT_MODE = "light";
|
||||
const AUTO_MODE = "auto";
|
||||
const THEME = "hugo-geekdoc";
|
||||
|
||||
const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE];
|
||||
|
||||
(applyTheme = function (init = true) {
|
||||
let html = document.documentElement;
|
||||
let currentMode = TOGGLE_MODES.includes(localStorage.getItem(THEME))
|
||||
? localStorage.getItem(THEME)
|
||||
: AUTO_MODE;
|
||||
|
||||
html.setAttribute("class", "color-toggle-" + currentMode);
|
||||
localStorage.setItem(THEME, currentMode);
|
||||
|
||||
if (currentMode === AUTO_MODE) {
|
||||
html.removeAttribute("color-mode");
|
||||
} else {
|
||||
html.setAttribute("color-mode", currentMode);
|
||||
}
|
||||
|
||||
if (!init) {
|
||||
// Reload required to re-initialise e.g. Mermaid with the new theme and re-parse the Mermaid code blocks.
|
||||
location.reload();
|
||||
}
|
||||
})();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
const darkModeToggle = document.getElementById("gdoc-dark-mode");
|
||||
|
||||
darkModeToggle.onclick = function () {
|
||||
let currentMode = localStorage.getItem(THEME);
|
||||
let nextMode = toggle(TOGGLE_MODES, currentMode);
|
||||
|
||||
localStorage.setItem(THEME, TOGGLE_MODES[nextMode]);
|
||||
applyTheme(false);
|
||||
};
|
||||
});
|
||||
|
||||
function toggle(list = [], value) {
|
||||
current = list.indexOf(value);
|
||||
max = list.length - 1;
|
||||
next = 0;
|
||||
|
||||
if (current < max) {
|
||||
next = current + 1;
|
||||
}
|
||||
|
||||
return next;
|
||||
}
|
||||
|
|
@ -34,3 +34,4 @@ params:
|
|||
geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
|
||||
|
||||
geekdocImageLazyLoading: true
|
||||
geekdocDarkModeDim: true
|
||||
|
|
|
|||
4
exampleSite/content/features/_index.html
Normal file
4
exampleSite/content/features/_index.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Features
|
||||
weight: -15
|
||||
---
|
||||
13
exampleSite/content/features/dark-mode/_index.md
Normal file
13
exampleSite/content/features/dark-mode/_index.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: Dark Mode
|
||||
---
|
||||
|
||||
Say hello to the dark mode of the Geekdoc theme!
|
||||
|
||||
[](images/geekdoc-dark.png)
|
||||
|
||||
The dark mode can be used in two different ways. If you have JavaScript disabled in your browser, the dark mode automatically detects the preferred system settings via the `prefers-color-scheme` parameter. Depending on the value, the theme will automatically switch between dark and light mode if this feature is supported by your operating system and browser.
|
||||
|
||||
The second mode requires JavaScript and is controlled by a dark mode switch in the upper right corner. You can switch between three modes: Auto, Dark and Light. Auto mode works the same as the first method mentioned above and automatically detects the system setting. Dark and Light modes allow you to force one of them for your Geekdoc page only, regardless of the system setting. This works even if your browser or operating system does not support the system setting. The current selection is stored locally via the Web Storage API.
|
||||
|
||||
To avoid very bright spots often caused by images while using the dark mode we have added an optional auto-dim feature that can be enabled with the side parameter `geekdocDarkModeDim` (see [Configuration](/usage/configuration/)). As this may have an impact on the quality of the images it is disabled by default.
|
||||
BIN
exampleSite/content/features/dark-mode/images/geekdoc-dark.png
Normal file
BIN
exampleSite/content/features/dark-mode/images/geekdoc-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: Icons
|
||||
title: Icon Sets
|
||||
---
|
||||
|
||||
{{< toc >}}
|
||||
|
||||
## Custom icons
|
||||
## Custom icon sets
|
||||
|
||||
The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome. If the framework don't provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be [svgsprit.es](https://svgsprit.es/).
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ The result of a valid minimal SVG sprite file could look like this:
|
|||
|
||||
**Example:**
|
||||
|
||||
FontAwesome provides three pre-build sprites included in the regular Web download pack, `sprites/brands.svg`, `sprites/regular.svg` and `sprites/solid.svg`. Choose your sprite to use and copy it to your projects root directory into `assets/sprites`, right beside your `content` folder. The result should look like this:
|
||||
FontAwesome provides three pre-build sprites included in the regular Web download pack, `sprites/brands.svg`, `sprites/regular.svg` and `sprites/solid.svg`. Choose your sprite to use and copy it to your projects root directory into `assets/sprites`, right beside your `content` folder:
|
||||
|
||||
```Bash
|
||||
my_projcet/
|
||||
15
exampleSite/content/features/theming/_index.md
Normal file
15
exampleSite/content/features/theming/_index.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
|
||||
|
||||
All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
|
||||
|
||||
[](images/theme-example.png)
|
||||
|
||||
**Custom CSS:**
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- spellchecker-disable -->
|
||||
{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}}
|
||||
<!-- spellchecker-enable -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Happy customizing!
|
||||
BIN
exampleSite/content/features/theming/images/theme-example.png
Normal file
BIN
exampleSite/content/features/theming/images/theme-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
|
|
@ -74,7 +74,7 @@ resources:
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-1" size="large" lazy=false >}}
|
||||
{{< img name="forest-1" lazy=false >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-2" size="large" lazy=true >}}
|
||||
{{< img name="forest-2" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-3" size="large" lazy=true >}}
|
||||
{{< img name="forest-3" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-4" size="large" lazy=true >}}
|
||||
{{< img name="forest-4" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-5" size="large" lazy=true >}}
|
||||
{{< img name="forest-5" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-6" size="large" lazy=true >}}
|
||||
{{< img name="forest-6" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
||||
|
|
@ -140,6 +140,6 @@ copious quo ad. Stet probates in duo.
|
|||
|
||||
<!-- spellchecker-disable -->
|
||||
|
||||
{{< img name="forest-7" size="large" lazy=true >}}
|
||||
{{< img name="forest-7" lazy=true >}}
|
||||
|
||||
<!-- spellchecker-enable -->
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ fastidious copious quo ad. Stet probates in duo.
|
|||
This is tab **Linux** content.
|
||||
|
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
|
||||
investiture. **Ornateness** bland it ex enc, est yeti am bongo detract re. Pro ad
|
||||
investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad
|
||||
prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim
|
||||
fastidious copious quo ad. Stet probates in duo.
|
||||
{{< /tab >}}
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
If you want to customize the color scheme of the theme to give it your individual touch you are just a few lines CSS away. In general, you have to override the defaults, the easiest way to do so is to create a `static/custom.css` file right in your site root.
|
||||
|
||||
All necessary class names are listed below. If you miss some classes required for a color scheme you are very welcome to create an [Issue](https://github.com/thegeeklab/hugo-geekdoc/issues) or Pull Request. For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- markdownlint-disable -->
|
||||
<!-- spellchecker-disable -->
|
||||
{{< highlight CSS "linenos=table" >}}
|
||||
/* default link color */
|
||||
a { color: #1c388e; }
|
||||
a:visited { color: #73bfb8 }
|
||||
|
||||
/* site header */
|
||||
.gdoc-header { background: #e66a4e; border-color: #404040; }
|
||||
.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
|
||||
|
||||
/* page links */
|
||||
.gdoc-page__footer a, .gdoc-page__footer a:visited { color: #1c388e; }
|
||||
.gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
|
||||
|
||||
/* site footer */
|
||||
.gdoc-footer { background: #404040; color: #ffffff; }
|
||||
.gdoc-footer__link{ color: #fecf50; }
|
||||
.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
|
||||
|
||||
/* custom shortcodes */
|
||||
/* button */
|
||||
.gdoc-button { color: #495057; }
|
||||
.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
|
||||
|
||||
/* hint */
|
||||
.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
|
||||
.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
|
||||
.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
|
||||
{{< /highlight >}}
|
||||
<!-- spellchecker-enable -->
|
||||
<!-- markdownlint-enable -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
And that is how the result will looks like. Happy customizing!
|
||||
|
||||
[](images/colorscheme-example.png)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
|
|
@ -90,6 +90,10 @@ enableGitInfo = true
|
|||
# a subdirectory is used within Hugo's BaseURL.
|
||||
# See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
|
||||
geekdocOverwriteHTMLBase = false
|
||||
|
||||
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
||||
# bright spots while using the dark mode.
|
||||
geekdocDarkModeDim = false
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
|
@ -178,6 +182,10 @@ params:
|
|||
# a subdirectory is used within Hugo's BaseURL.
|
||||
# See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
|
||||
geekdocOverwriteHTMLBase: false
|
||||
|
||||
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
||||
# bright spots while using the dark mode.
|
||||
geekdocDarkModeDim: false
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ main:
|
|||
ref: "/level-2/level-2-2"
|
||||
```
|
||||
|
||||
As an advantage you can add [icons](/usage/icons/) to your menu entries e.g. `icon: "notification"`.
|
||||
As an advantage you can add [icons](/features/icon-sets/) to your menu entries e.g. `icon: "notification"`.
|
||||
|
||||
[](/media/bundle-menu.png)
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
"arrow_right_alt",
|
||||
"bitbucket",
|
||||
"bookmark",
|
||||
"brightness_auto",
|
||||
"brightness_dark",
|
||||
"brightness_light",
|
||||
"cloud_off",
|
||||
"code",
|
||||
"date",
|
||||
|
|
|
|||
|
|
@ -1,25 +1,116 @@
|
|||
/* defaut link color */
|
||||
a { color: #1c388e; }
|
||||
a:visited { color: #73bfb8 }
|
||||
/* Light mode theming */
|
||||
:root,
|
||||
:root[color-mode="light"] {
|
||||
--header-background: #4ec58a;
|
||||
--header-font-color: #ffffff;
|
||||
|
||||
/* site header */
|
||||
.gdoc-header { background: #e66a4e; border-color: #404040; }
|
||||
.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
|
||||
--body-background: #ffffff;
|
||||
--body-font-color: #343a40;
|
||||
|
||||
/* page links */
|
||||
.gdoc-page__footer a, .gdoc-page__footer a:visited, .gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
|
||||
--button-background: #62cb97;
|
||||
--button-border-color: #4ec58a;
|
||||
|
||||
/* site footer */
|
||||
.gdoc-footer { background: #404040; color: #ffffff; }
|
||||
.gdoc-footer__link{ color: #fecf50; }
|
||||
.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
|
||||
--link-color: #518169;
|
||||
--link-color-visited: #c54e8a;
|
||||
|
||||
--code-background: #f5f6f8;
|
||||
--code-accent-color: #e3e7eb;
|
||||
--code-accent-color-lite: #eff1f3;
|
||||
|
||||
/* button shortcode */
|
||||
.gdoc-button { color: #495057; }
|
||||
.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
|
||||
--accent-color: #e9ecef;
|
||||
--accent-color-lite: #f8f9fa;
|
||||
|
||||
/* hint shortcode */
|
||||
.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
|
||||
.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
|
||||
.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
|
||||
--control-icons: #b2bac1;
|
||||
|
||||
--footer-background: #2f333e;
|
||||
--footer-font-color: #ffffff;
|
||||
--footer-link-color: #ffcc5c;
|
||||
--footer-link-color-visited: #ffcc5c;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--header-background: #4ec58a;
|
||||
--header-font-color: #ffffff;
|
||||
|
||||
--body-background: #ffffff;
|
||||
--body-font-color: #343a40;
|
||||
|
||||
--button-background: #62cb97;
|
||||
--button-border-color: #4ec58a;
|
||||
|
||||
--link-color: #518169;
|
||||
--link-color-visited: #c54e8a;
|
||||
|
||||
--code-background: #f5f6f8;
|
||||
--code-accent-color: #e3e7eb;
|
||||
--code-accent-color-lite: #eff1f3;
|
||||
|
||||
--accent-color: #e9ecef;
|
||||
--accent-color-lite: #f8f9fa;
|
||||
|
||||
--control-icons: #b2bac1;
|
||||
|
||||
--footer-background: #2f333e;
|
||||
--footer-font-color: #ffffff;
|
||||
--footer-link-color: #ffcc5c;
|
||||
--footer-link-color-visited: #ffcc5c;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode theming */
|
||||
:root[color-mode="dark"] {
|
||||
--header-background: #4ec58a;
|
||||
--header-font-color: #ffffff;
|
||||
|
||||
--body-background: #343a40;
|
||||
--body-font-color: #ced3d8;
|
||||
|
||||
--button-background: #62cb97;
|
||||
--button-border-color: #4ec58a;
|
||||
|
||||
--link-color: #7ac29e;
|
||||
--link-color-visited: #c27a9e;
|
||||
|
||||
--code-background: #2f353a;
|
||||
--code-accent-color: #262b2f;
|
||||
--code-accent-color-lite: #2b3035;
|
||||
|
||||
--accent-color: #2b3035;
|
||||
--accent-color-lite: #2f353a;
|
||||
|
||||
--control-icons: #b2bac1;
|
||||
|
||||
--footer-background: #2f333e;
|
||||
--footer-font-color: #ffffff;
|
||||
--footer-link-color: #ffcc5c;
|
||||
--footer-link-color-visited: #ffcc5c;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--header-background: #4ec58a;
|
||||
--header-font-color: #ffffff;
|
||||
|
||||
--body-background: #343a40;
|
||||
--body-font-color: #ced3d8;
|
||||
|
||||
--button-background: #62cb97;
|
||||
--button-border-color: #4ec58a;
|
||||
|
||||
--link-color: #7ac29e;
|
||||
--link-color-visited: #c27a9e;
|
||||
|
||||
--code-background: #2f353a;
|
||||
--code-accent-color: #262b2f;
|
||||
--code-accent-color-lite: #2b3035;
|
||||
|
||||
--accent-color: #2b3035;
|
||||
--accent-color-lite: #2f353a;
|
||||
|
||||
--control-icons: #b2bac1;
|
||||
|
||||
--footer-background: #2f333e;
|
||||
--footer-font-color: #ffffff;
|
||||
--footer-link-color: #ffcc5c;
|
||||
--footer-link-color-visited: #ffcc5c;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
22
gulpfile.js
22
gulpfile.js
|
|
@ -6,6 +6,7 @@ const autoprefixer = require("gulp-autoprefixer");
|
|||
const iconfont = require("gulp-iconfont");
|
||||
const clean = require("gulp-clean");
|
||||
const filelist = require("gulp-filelist");
|
||||
const minify = require("gulp-minify");
|
||||
|
||||
const realFavicon = require("gulp-real-favicon");
|
||||
const path = require("path");
|
||||
|
|
@ -196,6 +197,23 @@ gulp.task("iconfont", function () {
|
|||
.pipe(gulp.dest("static/fonts/"));
|
||||
});
|
||||
|
||||
gulp.task("min-js", function () {
|
||||
return gulp
|
||||
.src(["assets/js/*.raw.js"])
|
||||
.pipe(
|
||||
minify({
|
||||
noSource: true,
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
rename(function (path) {
|
||||
path.basename = path.basename.split(".")[0];
|
||||
path.extname = ".min.js";
|
||||
})
|
||||
)
|
||||
.pipe(gulp.dest("assets/js/"));
|
||||
});
|
||||
|
||||
gulp.task("asset-rev", function () {
|
||||
return gulp
|
||||
.src(["assets/*.min.css", "assets/js/*.min.js"], {
|
||||
|
|
@ -229,9 +247,11 @@ gulp.task("svg", gulp.series("svg-sprite", "svg-sprite-list"));
|
|||
|
||||
gulp.task(
|
||||
"default",
|
||||
gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate", "asset")
|
||||
gulp.series("sass", "svg", "iconfont", "favicon-generate", "min-js", "asset")
|
||||
);
|
||||
|
||||
gulp.task("devel", function () {
|
||||
gulp.watch("src/sass/**/*.*css", gulp.series("sass", "asset"));
|
||||
gulp.watch("assets/js/*.raw.js", gulp.series("min-js"));
|
||||
gulp.watch("assets/js/*.js", gulp.series("asset"));
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 508 KiB |
BIN
images/tn.png
BIN
images/tn.png
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 130 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.Language.Lang }}">
|
||||
<html lang="{{ .Site.Language.Lang }}" class="color-toggle-hidden">
|
||||
|
||||
<head>
|
||||
{{ partial "head/meta" . }}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<body itemscope itemtype="https://schema.org/WebPage">
|
||||
{{ partial "svg-icon-symbols" . }}
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrapper {{ if default false .Site.Params.geekdocDarkModeDim }}dark-mode-dim{{ end }}">
|
||||
<input type="checkbox" class="hidden" id="menu-control" />
|
||||
{{ partial "site-header" (dict "Root" . "MenuEnabled" true) }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
|
||||
{{ $description := default (default .Site.Title .Site.Params.description) (default .Summary .Description) }}
|
||||
{{ $keywords := default .Site.Params.Keywords .Keywords }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">
|
||||
|
||||
<script src="{{ index .Site.Data.assets "js/darkmode.min.js" | relURL }}"></script>
|
||||
|
||||
<link rel="preload" as="font" href="{{ "fonts/Metropolis.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" as="font" href="{{ "fonts/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" as="font" href="{{ "fonts/LiberationSans-Bold.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
|
||||
|
|
|
|||
|
|
@ -12,5 +12,10 @@
|
|||
{{ .Root.Site.Title }}
|
||||
</span>
|
||||
</a>
|
||||
<span id="gdoc-dark-mode">
|
||||
<svg class="icon gdoc_brightness_dark"><use xlink:href="#gdoc_brightness_dark"></use></svg>
|
||||
<svg class="icon gdoc_brightness_light"><use xlink:href="#gdoc_brightness_light"></use></svg>
|
||||
<svg class="icon gdoc_brightness_auto"><use xlink:href="#gdoc_brightness_auto"></use></svg>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
|
||||
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
|
||||
{{ $customAlt := .Get "alt" }}
|
||||
{{ $customSize := .Get "size" }}
|
||||
{{ $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }}
|
||||
|
|
@ -16,21 +16,19 @@
|
|||
<div class="flex justify-center">
|
||||
<figure class="gdoc-markdown__figure">
|
||||
<a class="gdoc-markdown__link--raw" href="{{ .RelPermalink }}">
|
||||
<img
|
||||
{{ if $lazyLoad }}loading="lazy"{{ end }}
|
||||
{{ with $customSize }}
|
||||
src="{{ index $size $customSize }}" alt="{{ $caption }}"
|
||||
{{ else }}
|
||||
srcset="{{ $size.tiny }} 320w,
|
||||
{{ $size.small }} 600w,
|
||||
{{ $size.medium }} 1200w,
|
||||
{{ $size.large }} 2x"
|
||||
sizes="(max-width: 320px) 320w,
|
||||
(max-width: 600px) 600w,
|
||||
(max-width: 1200px) 1200w,
|
||||
2x"
|
||||
src="{{ $size.large }}" alt="{{ $caption }}"
|
||||
{{ end }}/>
|
||||
<picture>
|
||||
<source
|
||||
{{ with $customSize }}
|
||||
srcset="{{ index $size $customSize }}"
|
||||
{{ else }}
|
||||
srcset="{{ $size.small }} 600w,
|
||||
{{ $size.medium }} 1200w"
|
||||
sizes="100vw"
|
||||
{{ end }} />
|
||||
<img
|
||||
{{ if $lazyLoad }}loading="lazy"{{ end }}
|
||||
src="{{ $size.large }}" alt="{{ $caption }}" />
|
||||
</picture>
|
||||
</a>
|
||||
{{ with $caption }}
|
||||
<figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | $.Page.RenderString }}){{ end }}</figcaption>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,25 @@
|
|||
<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
let currentMode = localStorage.getItem(THEME);
|
||||
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
let primaryColor = "#ececff";
|
||||
let darkMode = false;
|
||||
|
||||
console.log(currentMode)
|
||||
|
||||
if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
|
||||
primaryColor = "#6C617E";
|
||||
darkMode = true;
|
||||
}
|
||||
|
||||
mermaid.initialize({
|
||||
flowchart: { useMaxWidth: true }
|
||||
flowchart: { useMaxWidth: true },
|
||||
theme: "base",
|
||||
themeVariables: {
|
||||
darkMode: darkMode,
|
||||
primaryColor: primaryColor,
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
824
package-lock.json
generated
824
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -14,13 +14,14 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "4.0.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "7.0.1",
|
||||
"gulp-clean": "0.4.0",
|
||||
"gulp-clean-css": "4.3.0",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-filelist": "2.0.5",
|
||||
"gulp-iconfont": "11.0.0",
|
||||
"gulp-minify": "^3.1.0",
|
||||
"gulp-real-favicon": "0.3.2",
|
||||
"gulp-rename": "2.0.0",
|
||||
"gulp-rev": "9.0.0",
|
||||
|
|
|
|||
1
src/iconfont/uEA19-brightness_dark.svg
Normal file
1
src/iconfont/uEA19-brightness_dark.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565q-1.51 0-3.079.697 1.917.871 3.108 2.701T15.22 14t-1.191 4.037-3.108 2.701q1.568.697 3.079.697zm9.933-11.559L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809z"/></svg>
|
||||
|
After Width: | Height: | Size: 422 B |
1
src/iconfont/uEA1A-brightness_light.svg
Normal file
1
src/iconfont/uEA1A-brightness_light.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565 8.743 8.743 6.565 14t2.178 5.257T14 21.435zm9.933-3.311v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809L27.999 14z"/></svg>
|
||||
|
After Width: | Height: | Size: 357 B |
1
src/iconfont/uEA1B-brightness_auto.svg
Normal file
1
src/iconfont/uEA1B-brightness_auto.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M16.846 18.938h2.382L15.22 7.785h-2.44L8.772 18.938h2.382l.871-2.44h3.95zm7.087-9.062L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809zm-11.385 4.937L14 10.282l1.452 4.531h-2.904z"/></svg>
|
||||
|
After Width: | Height: | Size: 381 B |
5
src/icons/brightness_auto.svg
Normal file
5
src/icons/brightness_auto.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
|
||||
<title>brightness_auto</title>
|
||||
<path d="M16.846 18.938h2.382l-4.008-11.153h-2.44l-4.008 11.153h2.382l0.871-2.44h3.95zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809zM12.548 14.813l1.452-4.531 1.452 4.531h-2.904z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 475 B |
5
src/icons/brightness_dark.svg
Normal file
5
src/icons/brightness_dark.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
|
||||
<title>brightness_dark</title>
|
||||
<path d="M14 21.435q3.079 0 5.257-2.178t2.178-5.257-2.178-5.257-5.257-2.178q-1.51 0-3.079 0.697 1.917 0.871 3.108 2.701t1.191 4.037-1.191 4.037-3.108 2.701q1.568 0.697 3.079 0.697zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 523 B |
5
src/icons/brightness_light.svg
Normal file
5
src/icons/brightness_light.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
|
||||
<title>brightness_light</title>
|
||||
<path d="M14 21.435q3.079 0 5.257-2.178t2.178-5.257-2.178-5.257-5.257-2.178-5.257 2.178-2.178 5.257 2.178 5.257 5.257 2.178zM23.933 18.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809l4.066 4.124z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 457 B |
|
|
@ -1,7 +1,76 @@
|
|||
:root,
|
||||
:root[color-mode="light"] {
|
||||
@include light_mode;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
@include light_mode;
|
||||
}
|
||||
}
|
||||
|
||||
:root[color-mode="dark"] {
|
||||
@include dark_mode;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include dark_mode;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
letter-spacing: 0.33px;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
&.color-toggle-hidden {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_dark,
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-light {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_light {
|
||||
display: inline-block;
|
||||
}
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-dark {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.gdoc_brightness_auto,
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-toggle-auto {
|
||||
#gdoc-dark-mode {
|
||||
.gdoc_brightness_light {
|
||||
display: none;
|
||||
}
|
||||
.gdoc_brightness_dark {
|
||||
display: none;
|
||||
}
|
||||
.gdoc_brightness_auto {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -11,11 +80,6 @@ body {
|
|||
}
|
||||
|
||||
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;
|
||||
|
|
@ -45,14 +109,14 @@ h6 {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $color-link-visited;
|
||||
color: var(--link-color-visited);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +125,7 @@ img {
|
|||
}
|
||||
|
||||
.fake-link:hover {
|
||||
background-image: linear-gradient($color-link, $color-link);
|
||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -72,6 +136,11 @@ img {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -93,8 +162,8 @@ img {
|
|||
}
|
||||
|
||||
.gdoc-header {
|
||||
background: $main-color;
|
||||
color: $white;
|
||||
background: var(--header-background);
|
||||
color: var(--header-font-color);
|
||||
border-bottom: 0.3em solid $second-color;
|
||||
|
||||
&__link,
|
||||
|
|
@ -220,7 +289,7 @@ img {
|
|||
.gdoc-nav__entry,
|
||||
.gdoc-search__entry {
|
||||
flex: 1;
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
|
|
@ -229,7 +298,7 @@ img {
|
|||
}
|
||||
|
||||
&:visited {
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,17 +312,17 @@ img {
|
|||
margin-bottom: $padding-16 * 1.2;
|
||||
|
||||
.icon {
|
||||
color: $gray-600;
|
||||
color: var(--control-icons);
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
|
@ -268,7 +337,7 @@ img {
|
|||
|
||||
&__nav {
|
||||
&:hover {
|
||||
background-image: linear-gradient($color-link, $color-link);
|
||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -285,7 +354,7 @@ img {
|
|||
|
||||
&__anchorwrap {
|
||||
&:hover .gdoc-page__anchor .icon {
|
||||
color: $gray-500;
|
||||
color: var(--control-icons);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -327,14 +396,14 @@ img {
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
color: $body-font-color;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -365,15 +434,15 @@ img {
|
|||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-footer {
|
||||
background: $second-color;
|
||||
color: $white;
|
||||
background: var(--footer-background);
|
||||
color: var(--footer-font-color);
|
||||
|
||||
&__item {
|
||||
margin-right: 1em;
|
||||
|
|
@ -381,10 +450,10 @@ img {
|
|||
}
|
||||
|
||||
&__link {
|
||||
color: $color-link-footer;
|
||||
color: var(--footer-link-color);
|
||||
|
||||
&:visited {
|
||||
color: $color-link-footer;
|
||||
color: var(--footer-link-color-visited);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -396,7 +465,7 @@ img {
|
|||
position: absolute;
|
||||
top: 0.625em;
|
||||
left: $padding-16 * 0.5;
|
||||
color: $gray-600;
|
||||
color: var(--control-icons);
|
||||
width: $font-size-16;
|
||||
height: $font-size-16;
|
||||
}
|
||||
|
|
@ -412,11 +481,11 @@ img {
|
|||
padding: $padding-8;
|
||||
padding-left: $padding-32;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
background: $gray-100;
|
||||
color: $body-font-color;
|
||||
background: var(--accent-color-lite);
|
||||
color: var(--body-font-color);
|
||||
|
||||
&:required + &__spinner {
|
||||
display: block;
|
||||
|
|
@ -433,7 +502,7 @@ img {
|
|||
height: $padding-16;
|
||||
|
||||
border: $border-1 solid transparent;
|
||||
border-top-color: $body-font-color;
|
||||
border-top-color: var(--body-font-color);
|
||||
border-radius: 50%;
|
||||
|
||||
@include spin(1s);
|
||||
|
|
@ -441,9 +510,10 @@ img {
|
|||
|
||||
&__list {
|
||||
visibility: hidden;
|
||||
background: $white;
|
||||
background: var(--body-background);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 3px 0 var(--accent-color),
|
||||
0 1px 2px 0 var(--accent-color-lite);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: $padding-8;
|
||||
|
|
@ -465,7 +535,6 @@ img {
|
|||
|
||||
> li > span {
|
||||
font-weight: bold;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
> li + li {
|
||||
|
|
@ -491,12 +560,12 @@ img {
|
|||
.icon {
|
||||
width: $font-size-16 * 8;
|
||||
height: $font-size-16 * 8;
|
||||
color: $gray-700;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
&__link,
|
||||
&__link:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&__message {
|
||||
|
|
@ -529,7 +598,7 @@ img {
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
378
src/sass/_chroma_dark.scss
Normal file
378
src/sass/_chroma_dark.scss
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
@mixin chroma_dark {
|
||||
/* Theme: Dracula */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: var(--code-accent-color-lite);
|
||||
border-right: $border-1 solid var(--code-accent-color);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #8be9fd;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #8be9fd;
|
||||
font-style: italic;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #bd93f9;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #6272a4;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #8b080b;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #44475a;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,377 +0,0 @@
|
|||
.chroma {
|
||||
background-color: #ffffff;
|
||||
color: #555;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: $color-code;
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: $gray-200;
|
||||
border-right: $border-1 solid #dcdfe3;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #0086b3;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: #999999;
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #800080;
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #555555;
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #000080;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #008080;
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #009926;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #990073;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #009999;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: #999999;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #888888;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: #555555;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
410
src/sass/_chroma_light.scss
Normal file
410
src/sass/_chroma_light.scss
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
@mixin chroma_github {
|
||||
/* Theme: GitHub */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
background-color: var(--code-accent-color-lite);
|
||||
border-right: $border-1 solid var(--code-accent-color);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td code {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) {
|
||||
width: 100%;
|
||||
margin-left: 2em;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #ffffcc;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #0086b3;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: #999999;
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #800080;
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #555555;
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #000080;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: #008080;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #009926;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #dd1144;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #990073;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #009999;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #009999;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: #999999;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #888888;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: #555555;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
71
src/sass/_color_mode.scss
Normal file
71
src/sass/_color_mode.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
@mixin light_mode {
|
||||
@include chroma_github;
|
||||
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
|
||||
--body-background: #{$body-background};
|
||||
--body-font-color: #{$body-font-color};
|
||||
|
||||
--button-background: #{lighten($main-color, 2)};
|
||||
--button-border-color: #{$main-color};
|
||||
|
||||
--link-color: #{$link-color};
|
||||
--link-color-visited: #{$link-color-visited};
|
||||
|
||||
--code-background: #{$code-background};
|
||||
--code-accent-color: #{darken($code-background, 6)};
|
||||
--code-accent-color-lite: #{darken($code-background, 2)};
|
||||
|
||||
--accent-color: #{$gray-200};
|
||||
--accent-color-lite: #{$gray-100};
|
||||
|
||||
--control-icons: #{lighten($body-font-color, 50)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
}
|
||||
|
||||
@mixin dark_mode {
|
||||
@include chroma_dark;
|
||||
|
||||
--header-background: #{$main-color};
|
||||
--header-font-color: #{$white};
|
||||
|
||||
--body-background: #{$body-background-dark};
|
||||
--body-font-color: #{lighten($body-background-dark, 60)};
|
||||
|
||||
--button-background: #{lighten($main-color, 2)};
|
||||
--button-border-color: #{$main-color};
|
||||
|
||||
--link-color: #{$link-color-dark};
|
||||
--link-color-visited: #{$link-color-visited-dark};
|
||||
|
||||
--code-background: #{$code-background-dark};
|
||||
--code-accent-color: #{darken($code-background-dark, 4)};
|
||||
--code-accent-color-lite: #{darken($code-background-dark, 2)};
|
||||
|
||||
--accent-color: #{darken($body-background-dark, 4)};
|
||||
--accent-color-lite: #{darken($body-background-dark, 2)};
|
||||
|
||||
--control-icons: #{lighten($body-font-color, 50)};
|
||||
|
||||
--footer-background: #{$second-color};
|
||||
--footer-font-color: #{$white};
|
||||
--footer-link-color: #{$link-color-footer};
|
||||
--footer-link-color-visited: #{$link-color-footer};
|
||||
|
||||
.dark-mode-dim .gdoc-markdown {
|
||||
img {
|
||||
filter: brightness(0.75) grayscale(0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-markdown {
|
||||
.gdoc-hint {
|
||||
filter: saturate(2.5) brightness(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,8 +12,8 @@ $font-size-16: 1rem !default;
|
|||
$font-size-32: 2rem !default;
|
||||
|
||||
$border-1: 1px !default;
|
||||
$border-2: 2px !default;
|
||||
$border-4: 4px !default;
|
||||
$border-2: 1.5px !default;
|
||||
$border-4: 3px !default;
|
||||
|
||||
$border-radius: 0.15rem !default;
|
||||
|
||||
|
|
@ -30,22 +30,33 @@ $gray-800: rgba(52, 58, 64, 1) !default;
|
|||
$gray-900: rgba(33, 37, 41, 1) !default;
|
||||
$black: rgba(0, 0, 0, 1) !default;
|
||||
|
||||
$color-link: rgba(10, 83, 154, 1) !default;
|
||||
$color-link-visited: rgba(119, 73, 191, 1) !default;
|
||||
$color-link-footer: rgba(255, 163, 30, 1) !default;
|
||||
|
||||
$color-code: rgba($gray-200, 0.5) !default;
|
||||
$link-color: rgba(10, 83, 154, 1) !default;
|
||||
$link-color-visited: rgba(119, 73, 191, 1) !default;
|
||||
$link-color-footer: rgba(255, 163, 30, 1) !default;
|
||||
|
||||
$body-background: white !default;
|
||||
$body-font-color: $gray-800 !default;
|
||||
$body-font-weight: normal !default;
|
||||
$body-min-width: 20rem !default;
|
||||
|
||||
$body-background-dark: $gray-800 !default;
|
||||
$body-font-color-dark: $gray-100 !default;
|
||||
|
||||
$container-max-width: 80rem !default;
|
||||
|
||||
$main-color: rgba(65, 134, 201, 1) !default;
|
||||
$second-color: rgba(47, 51, 62, 1) !default;
|
||||
|
||||
$body-background-dark: mix(
|
||||
invert($body-background, 75%),
|
||||
$second-color
|
||||
) !default;
|
||||
$link-color-dark: lighten(desaturate($link-color, 40), 25) !default;
|
||||
$link-color-visited-dark: lighten($link-color-visited, 10) !default;
|
||||
|
||||
$code-background: lighten($gray-200, 4) !default;
|
||||
$code-background-dark: darken($body-background-dark, 2) !default;
|
||||
|
||||
$header-height: 3.5rem !default;
|
||||
$menu-width: 16rem !default;
|
||||
|
||||
|
|
@ -53,8 +64,8 @@ $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
|
|||
|
||||
// Panel colors
|
||||
$hint-colors: (
|
||||
info: rgba(102, 187, 255, 1),
|
||||
ok: rgba(139, 195, 74, 1),
|
||||
warning: rgba(255, 221, 102, 1),
|
||||
danger: rgba(255, 102, 102, 1),
|
||||
info: rgba(0, 145, 234, 1),
|
||||
ok: rgba(0, 200, 83, 1),
|
||||
warning: rgba(255, 171, 0, 1),
|
||||
danger: rgba(213, 0, 0, 1),
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
font-weight: 600;
|
||||
|
||||
> code {
|
||||
border-top: 3px solid $gray-300;
|
||||
border-top: $border-4 solid var(--accent-color);
|
||||
font-size: 0.75em !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
&__figure {
|
||||
padding: $padding-4;
|
||||
margin: $padding-16 0;
|
||||
background-color: $gray-300;
|
||||
background-color: var(--accent-color);
|
||||
display: table;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
background-color: $gray-300;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 $padding-4 $padding-4;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
margin: $padding-16 0;
|
||||
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
|
||||
|
||||
border-left: $border-4 solid $gray-200;
|
||||
border-left: $border-4 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
:first-child {
|
||||
|
|
@ -121,18 +121,18 @@
|
|||
tr th,
|
||||
tr td {
|
||||
padding: $padding-8 $padding-16;
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: $padding-2;
|
||||
height: $border-2;
|
||||
border: none;
|
||||
background: $gray-200;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -156,9 +156,9 @@
|
|||
}
|
||||
|
||||
code {
|
||||
background-color: $color-code;
|
||||
background-color: var(--code-background);
|
||||
font-size: 0.85em;
|
||||
line-height: 1.45;
|
||||
line-height: 1.45em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&__head {
|
||||
background: $gray-100;
|
||||
background: var(--accent-color-lite);
|
||||
padding: $padding-8 $padding-16;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
margin-top: $padding-16;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
|
||||
overflow: hidden;
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
&__content {
|
||||
order: 999; //Move content blocks to the end
|
||||
width: 100%;
|
||||
border-top: $border-1 solid $gray-100;
|
||||
border-top: $border-1 solid var(--accent-color-lite);
|
||||
padding: $padding-16;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__control:checked + &__label {
|
||||
border-bottom: $border-1 solid $color-link;
|
||||
border-bottom: $border-2 solid var(--link-color);
|
||||
}
|
||||
&__control:checked + &__label + &__content {
|
||||
display: block;
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
// {{< button >}}
|
||||
.gdoc-button {
|
||||
display: inline-block;
|
||||
color: $gray-700;
|
||||
border: $border-1 solid $gray-500;
|
||||
background: var(--accent-color-lite);
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
margin: $padding-8 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, 0.9);
|
||||
border-color: $main-color;
|
||||
background: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +108,8 @@
|
|||
@each $name, $color in $hint-colors {
|
||||
&.#{$name} {
|
||||
border-left-color: $color;
|
||||
background-color: rgba($color, 0.1);
|
||||
background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
|
||||
color: $body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/sass/_test.scss
Normal file
1
src/sass/_test.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
color: red;
|
||||
|
|
@ -20,8 +20,9 @@
|
|||
|
||||
.flex-grid {
|
||||
flex-direction: column;
|
||||
border: $border-1 solid $gray-200;
|
||||
border: $border-1 solid var(--accent-color);
|
||||
border-radius: $border-radius;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
@import "_defaults";
|
||||
@import "_color_mode";
|
||||
@import "_chroma_light";
|
||||
@import "_chroma_dark";
|
||||
|
||||
@import "_normalize";
|
||||
@import "_utils";
|
||||
|
|
@ -6,5 +9,4 @@
|
|||
@import "_base";
|
||||
|
||||
@import "_markdown";
|
||||
@import "_chroma_github";
|
||||
@import "_shortcodes";
|
||||
|
|
|
|||
Loading…
Reference in a new issue