diff --git a/.drone.yml b/.drone.yml index 3d5fb3e..be76665 100644 --- a/.drone.yml +++ b/.drone.yml @@ -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 ... diff --git a/.gitignore b/.gitignore index 818d532..f3a5402 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/README.md b/README.md index f48a152..11ff715 100644 --- a/README.md +++ b/README.md @@ -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). -![Desktop and mobile preview](https://github.com/thegeeklab/hugo-geekdoc/blob/main/images/readme.png) +![Desktop and mobile preview](https://raw.githubusercontent.com/thegeeklab/hugo-geekdoc/main/images/readme.png) ## Build and release process diff --git a/assets/js/darkmode.raw.js b/assets/js/darkmode.raw.js new file mode 100644 index 0000000..a57e261 --- /dev/null +++ b/assets/js/darkmode.raw.js @@ -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; +} diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index c0e8c90..ace3ab1 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -34,3 +34,4 @@ params: geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy geekdocImageLazyLoading: true + geekdocDarkModeDim: true diff --git a/exampleSite/content/features/_index.html b/exampleSite/content/features/_index.html new file mode 100644 index 0000000..d0498eb --- /dev/null +++ b/exampleSite/content/features/_index.html @@ -0,0 +1,4 @@ +--- +title: Features +weight: -15 +--- diff --git a/exampleSite/content/usage/code-blocks.md b/exampleSite/content/features/code-blocks.md similarity index 100% rename from exampleSite/content/usage/code-blocks.md rename to exampleSite/content/features/code-blocks.md diff --git a/exampleSite/content/features/dark-mode/_index.md b/exampleSite/content/features/dark-mode/_index.md new file mode 100644 index 0000000..d40b78e --- /dev/null +++ b/exampleSite/content/features/dark-mode/_index.md @@ -0,0 +1,13 @@ +--- +title: Dark Mode +--- + +Say hello to the dark mode of the Geekdoc theme! + +[![Geekdoc in dark mode](images/geekdoc-dark.png)](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. diff --git a/exampleSite/content/features/dark-mode/images/geekdoc-dark.png b/exampleSite/content/features/dark-mode/images/geekdoc-dark.png new file mode 100644 index 0000000..aa88b41 Binary files /dev/null and b/exampleSite/content/features/dark-mode/images/geekdoc-dark.png differ diff --git a/exampleSite/content/usage/icons.md b/exampleSite/content/features/icon-sets.md similarity index 95% rename from exampleSite/content/usage/icons.md rename to exampleSite/content/features/icon-sets.md index ecef1ae..f7c6b61 100644 --- a/exampleSite/content/usage/icons.md +++ b/exampleSite/content/features/icon-sets.md @@ -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/ diff --git a/exampleSite/content/features/theming/_index.md b/exampleSite/content/features/theming/_index.md new file mode 100644 index 0000000..482f32a --- /dev/null +++ b/exampleSite/content/features/theming/_index.md @@ -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. + +[![Beach Color Palette](images/theme-example.png)](images/theme-example.png) + +**Custom CSS:** + + + +{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}} + + + +Happy customizing! diff --git a/exampleSite/content/features/theming/images/theme-example.png b/exampleSite/content/features/theming/images/theme-example.png new file mode 100644 index 0000000..5074a37 Binary files /dev/null and b/exampleSite/content/features/theming/images/theme-example.png differ diff --git a/exampleSite/content/shortcodes/images/_index.md b/exampleSite/content/shortcodes/images/_index.md index 923106c..9f4d310 100644 --- a/exampleSite/content/shortcodes/images/_index.md +++ b/exampleSite/content/shortcodes/images/_index.md @@ -74,7 +74,7 @@ resources: -{{< img name="forest-1" size="large" lazy=false >}} +{{< img name="forest-1" lazy=false >}} @@ -85,7 +85,7 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-2" size="large" lazy=true >}} +{{< img name="forest-2" lazy=true >}} @@ -96,7 +96,7 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-3" size="large" lazy=true >}} +{{< img name="forest-3" lazy=true >}} @@ -107,7 +107,7 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-4" size="large" lazy=true >}} +{{< img name="forest-4" lazy=true >}} @@ -118,7 +118,7 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-5" size="large" lazy=true >}} +{{< img name="forest-5" lazy=true >}} @@ -129,7 +129,7 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-6" size="large" lazy=true >}} +{{< img name="forest-6" lazy=true >}} @@ -140,6 +140,6 @@ copious quo ad. Stet probates in duo. -{{< img name="forest-7" size="large" lazy=true >}} +{{< img name="forest-7" lazy=true >}} diff --git a/exampleSite/content/shortcodes/tabs.md b/exampleSite/content/shortcodes/tabs.md index 42ea492..e396ce0 100644 --- a/exampleSite/content/shortcodes/tabs.md +++ b/exampleSite/content/shortcodes/tabs.md @@ -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 >}} diff --git a/exampleSite/content/usage/color-schemes/_index.md b/exampleSite/content/usage/color-schemes/_index.md deleted file mode 100644 index ca1e5ec..0000000 --- a/exampleSite/content/usage/color-schemes/_index.md +++ /dev/null @@ -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: - - - - -{{< 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 >}} - - - - -And that is how the result will looks like. Happy customizing! - -[![HC-primary Color Scheme](images/colorscheme-example.png)](images/colorscheme-example.png) diff --git a/exampleSite/content/usage/color-schemes/images/colorscheme-example.png b/exampleSite/content/usage/color-schemes/images/colorscheme-example.png deleted file mode 100644 index 2ad1cb1..0000000 Binary files a/exampleSite/content/usage/color-schemes/images/colorscheme-example.png and /dev/null differ diff --git a/exampleSite/content/usage/configuration.md b/exampleSite/content/usage/configuration.md index 5033f54..1c2b4c7 100644 --- a/exampleSite/content/usage/configuration.md +++ b/exampleSite/content/usage/configuration.md @@ -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 >}} diff --git a/exampleSite/content/usage/menus.md b/exampleSite/content/usage/menus.md index 3efa152..184750d 100644 --- a/exampleSite/content/usage/menus.md +++ b/exampleSite/content/usage/menus.md @@ -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"`. [![Example bundle menu](/media/bundle-menu.png)](/media/bundle-menu.png) diff --git a/exampleSite/data/sprites/geekdoc.json b/exampleSite/data/sprites/geekdoc.json index a5b3f06..5d02075 100644 --- a/exampleSite/data/sprites/geekdoc.json +++ b/exampleSite/data/sprites/geekdoc.json @@ -4,6 +4,9 @@ "arrow_right_alt", "bitbucket", "bookmark", + "brightness_auto", + "brightness_dark", + "brightness_light", "cloud_off", "code", "date", diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example index 2b4fda6..e695ec5 100644 --- a/exampleSite/static/custom.css.example +++ b/exampleSite/static/custom.css.example @@ -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; + } +} diff --git a/gulpfile.js b/gulpfile.js index 97f25ad..2c916b2 100644 --- a/gulpfile.js +++ b/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")); }); diff --git a/images/readme.png b/images/readme.png index 9142bab..ffa7039 100644 Binary files a/images/readme.png and b/images/readme.png differ diff --git a/images/screenshot-plain.png b/images/screenshot-plain.png deleted file mode 100644 index 2fb085f..0000000 Binary files a/images/screenshot-plain.png and /dev/null differ diff --git a/images/screenshot.png b/images/screenshot.png index f2b625f..7ac2579 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png index 4745ca3..b3bb1d3 100644 Binary files a/images/tn.png and b/images/tn.png differ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6c2f781..d700646 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head/meta" . }} @@ -12,7 +12,7 @@ {{ partial "svg-icon-symbols" . }} -
+
{{ partial "site-header" (dict "Root" . "MenuEnabled" true) }} diff --git a/layouts/partials/head/meta.html b/layouts/partials/head/meta.html index f386236..651f4b1 100644 --- a/layouts/partials/head/meta.html +++ b/layouts/partials/head/meta.html @@ -1,5 +1,6 @@ + {{ $description := default (default .Site.Title .Site.Params.description) (default .Summary .Description) }} {{ $keywords := default .Site.Params.Keywords .Keywords }} diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html index 2f36fe8..21e300e 100644 --- a/layouts/partials/head/others.html +++ b/layouts/partials/head/others.html @@ -1,5 +1,7 @@ + + diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 0a4a2e3..487ee2e 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -12,5 +12,10 @@ {{ .Root.Site.Title }} + + + + +
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index fcf2189..a950e86 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -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 @@
- {{ $caption }} + + + {{ $caption }} + {{ with $caption }}
{{ . }}{{ with $source.Params.credits }} ({{ . | $.Page.RenderString }}){{ end }}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html index 9488453..4ef9597 100644 --- a/layouts/shortcodes/mermaid.html +++ b/layouts/shortcodes/mermaid.html @@ -3,8 +3,25 @@ diff --git a/package-lock.json b/package-lock.json index af1b376..f966735 100644 --- a/package-lock.json +++ b/package-lock.json @@ -99,6 +99,17 @@ "requires": { "micromatch": "^3.1.4", "normalize-path": "^2.1.1" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "^1.0.1" + } + } } }, "append-buffer": { @@ -715,14 +726,6 @@ "path-is-absolute": "^1.0.0", "readdirp": "^2.2.1", "upath": "^1.1.1" - }, - "dependencies": { - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true - } } }, "chownr": { @@ -990,13 +993,21 @@ "dev": true }, "copy-props": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.4.tgz", - "integrity": "sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz", + "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==", "dev": true, "requires": { - "each-props": "^1.3.0", - "is-plain-object": "^2.0.1" + "each-props": "^1.3.2", + "is-plain-object": "^5.0.0" + }, + "dependencies": { + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + } } }, "core-util-is": { @@ -1588,9 +1599,9 @@ }, "dependencies": { "type": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/type/-/type-2.0.0.tgz", - "integrity": "sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz", + "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==", "dev": true } } @@ -1729,6 +1740,12 @@ "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", "dev": true }, + "fast-levenshtein": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz", + "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk=", + "dev": true + }, "fast-safe-stringify": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz", @@ -1937,551 +1954,14 @@ "dev": true }, "fsevents": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz", - "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==", + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, "optional": true, "requires": { - "nan": "^2.12.1", - "node-pre-gyp": "^0.12.0" - }, - "dependencies": { - "abbrev": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "aproba": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "are-we-there-yet": { - "version": "1.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, - "balanced-match": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "brace-expansion": { - "version": "1.1.11", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "chownr": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "code-point-at": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "concat-map": { - "version": "0.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "console-control-strings": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "core-util-is": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "debug": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ms": "^2.1.1" - } - }, - "deep-extend": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "delegates": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "detect-libc": { - "version": "1.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "fs-minipass": { - "version": "1.2.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.2.1" - } - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "gauge": { - "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "glob": { - "version": "7.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "has-unicode": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "iconv-lite": { - "version": "0.4.24", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - }, - "ignore-walk": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimatch": "^3.0.4" - } - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true, - "optional": true - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "isarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "0.0.8", - "bundled": true, - "dev": true, - "optional": true - }, - "minipass": { - "version": "2.3.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "^5.1.2", - "yallist": "^3.0.0" - } - }, - "minizlib": { - "version": "1.2.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.2.1" - } - }, - "mkdirp": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimist": "0.0.8" - } - }, - "ms": { - "version": "2.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "needle": { - "version": "2.3.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "^4.1.0", - "iconv-lite": "^0.4.4", - "sax": "^1.2.4" - } - }, - "node-pre-gyp": { - "version": "0.12.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "detect-libc": "^1.0.2", - "mkdirp": "^0.5.1", - "needle": "^2.2.1", - "nopt": "^4.0.1", - "npm-packlist": "^1.1.6", - "npmlog": "^4.0.2", - "rc": "^1.2.7", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^4" - } - }, - "nopt": { - "version": "4.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "abbrev": "1", - "osenv": "^0.1.4" - } - }, - "npm-bundled": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "optional": true - }, - "npm-packlist": { - "version": "1.4.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1" - } - }, - "npmlog": { - "version": "4.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "number-is-nan": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "once": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "wrappy": "1" - } - }, - "os-homedir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "os-tmpdir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "osenv": { - "version": "0.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "os-homedir": "^1.0.0", - "os-tmpdir": "^1.0.0" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "process-nextick-args": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "rc": { - "version": "1.2.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "^0.6.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "minimist": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "readable-stream": { - "version": "2.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "rimraf": { - "version": "2.6.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "glob": "^7.1.3" - } - }, - "safe-buffer": { - "version": "5.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "safer-buffer": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "sax": { - "version": "1.2.4", - "bundled": true, - "dev": true, - "optional": true - }, - "semver": { - "version": "5.7.0", - "bundled": true, - "dev": true, - "optional": true - }, - "set-blocking": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "signal-exit": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "string-width": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - }, - "string_decoder": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "strip-json-comments": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "tar": { - "version": "4.4.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "chownr": "^1.1.1", - "fs-minipass": "^1.2.5", - "minipass": "^2.3.4", - "minizlib": "^1.1.1", - "mkdirp": "^0.5.0", - "safe-buffer": "^5.1.2", - "yallist": "^3.0.2" - } - }, - "util-deprecate": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "wide-align": { - "version": "1.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "^1.0.2 || 2" - } - }, - "wrappy": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "yallist": { - "version": "3.0.3", - "bundled": true, - "dev": true, - "optional": true - } + "bindings": "^1.5.0", + "nan": "^2.12.1" } }, "fstream": { @@ -2635,9 +2115,9 @@ } }, "glob-watcher": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.3.tgz", - "integrity": "sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.5.tgz", + "integrity": "sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==", "dev": true, "requires": { "anymatch": "^2.0.0", @@ -2645,6 +2125,7 @@ "chokidar": "^2.0.0", "is-negated-glob": "^1.0.0", "just-debounce": "^1.0.0", + "normalize-path": "^3.0.0", "object.defaults": "^1.1.0" } }, @@ -2717,9 +2198,9 @@ }, "dependencies": { "gulp-cli": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.2.0.tgz", - "integrity": "sha512-rGs3bVYHdyJpLqR0TUBnlcZ1O5O++Zs4bA0ajm+zr3WFCfiSLjGwoCBqFs18wzN+ZxahT9DkOK5nDf26iDsWjA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.3.0.tgz", + "integrity": "sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==", "dev": true, "requires": { "ansi-colors": "^1.0.1", @@ -2730,7 +2211,7 @@ "copy-props": "^2.0.1", "fancy-log": "^1.3.2", "gulplog": "^1.0.0", - "interpret": "^1.1.0", + "interpret": "^1.4.0", "isobject": "^3.0.1", "liftoff": "^3.1.0", "matchdep": "^2.0.0", @@ -2738,7 +2219,7 @@ "pretty-hrtime": "^1.0.0", "replace-homedir": "^1.0.0", "semver-greatest-satisfied-range": "^1.1.0", - "v8flags": "^3.0.1", + "v8flags": "^3.2.0", "yargs": "^7.1.0" } } @@ -2932,6 +2413,72 @@ "streamfilter": "^1.0.7" } }, + "gulp-minify": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gulp-minify/-/gulp-minify-3.1.0.tgz", + "integrity": "sha512-ixF41aYg+NQikI8hpoHdEclYcQkbGdXQu1CBdHaU7Epg8H6e8d2jWXw1+rBPgYwl/XpKgjHj7NI6gkhoSNSSAg==", + "dev": true, + "requires": { + "ansi-colors": "^1.0.1", + "minimatch": "^3.0.2", + "plugin-error": "^0.1.2", + "terser": "^3.7.6", + "through2": "^2.0.3", + "vinyl": "^2.1.0" + }, + "dependencies": { + "arr-diff": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz", + "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=", + "dev": true, + "requires": { + "arr-flatten": "^1.0.1", + "array-slice": "^0.2.3" + } + }, + "arr-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz", + "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=", + "dev": true + }, + "array-slice": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", + "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=", + "dev": true + }, + "extend-shallow": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz", + "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=", + "dev": true, + "requires": { + "kind-of": "^1.1.0" + } + }, + "kind-of": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=", + "dev": true + }, + "plugin-error": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz", + "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=", + "dev": true, + "requires": { + "ansi-cyan": "^0.1.1", + "ansi-red": "^0.1.1", + "arr-diff": "^1.0.1", + "arr-union": "^2.0.1", + "extend-shallow": "^1.1.2" + } + } + } + }, "gulp-real-favicon": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/gulp-real-favicon/-/gulp-real-favicon-0.3.2.tgz", @@ -3419,15 +2966,15 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "interpret": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz", - "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", "dev": true }, "invert-kv": { @@ -3773,9 +3320,9 @@ } }, "just-debounce": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz", - "integrity": "sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.1.0.tgz", + "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==", "dev": true }, "kew": { @@ -3785,9 +3332,9 @@ "dev": true }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "klaw": { @@ -4827,13 +4374,10 @@ } }, "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true }, "normalize-range": { "version": "0.1.2", @@ -5591,9 +5135,9 @@ "dev": true }, "repeat-element": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", - "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz", + "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==", "dev": true }, "repeat-string": { @@ -6325,22 +5869,40 @@ "dev": true }, "source-map-resolve": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", - "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", + "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", "dev": true, "requires": { - "atob": "^2.1.1", + "atob": "^2.1.2", "decode-uri-component": "^0.2.0", "resolve-url": "^0.2.1", "source-map-url": "^0.4.0", "urix": "^0.1.0" } }, + "source-map-support": { + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", + "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "source-map-url": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz", + "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==", "dev": true }, "sparkles": { @@ -6462,9 +6024,9 @@ "dev": true }, "stream-shift": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz", - "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", + "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, "streamfilter": { @@ -6870,6 +6432,31 @@ "inherits": "2" } }, + "terser": { + "version": "3.17.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz", + "integrity": "sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==", + "dev": true, + "requires": { + "commander": "^2.19.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.10" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "text-hex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz", @@ -7248,9 +6835,9 @@ "dev": true }, "undertaker": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.2.1.tgz", - "integrity": "sha512-71WxIzDkgYk9ZS+spIB8iZXchFhAdEo2YU8xYqBYJ39DIUIqziK78ftm26eecoIY49X0J2MLhG4hr18Yp6/CMA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz", + "integrity": "sha512-/RXwi5m/Mu3H6IHQGww3GNt1PNXlbeCuclF2QYR14L/2CHPz3DFZkvB5hZ0N/QUkiXWCACML2jXViIQEQc2MLg==", "dev": true, "requires": { "arr-flatten": "^1.0.1", @@ -7258,6 +6845,7 @@ "bach": "^1.0.0", "collection-map": "^1.0.0", "es6-weak-map": "^2.0.1", + "fast-levenshtein": "^1.0.0", "last-run": "^1.1.0", "object.defaults": "^1.0.0", "object.reduce": "^1.0.0", @@ -7388,9 +6976,9 @@ "dev": true }, "v8flags": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz", - "integrity": "sha512-amh9CCg3ZxkzQ48Mhcb8iX7xpAfYJgePHxWMQCBWECpOSqJUXgY26ncA61UTV0BkPqfhcy6mzwCIoP4ygxpW8w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz", + "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==", "dev": true, "requires": { "homedir-polyfill": "^1.0.1" @@ -7523,6 +7111,17 @@ "now-and-later": "^2.0.0", "remove-bom-buffer": "^3.0.0", "vinyl": "^2.0.0" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "^1.0.1" + } + } } }, "vinyl-sourcemaps-apply": { @@ -7654,9 +7253,9 @@ "dev": true }, "yargs": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", - "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.1.tgz", + "integrity": "sha512-huO4Fr1f9PmiJJdll5kwoS2e4GqzGSsMT3PPMpOwoVkOK8ckqAewMTZyA6LXVQWflleb/Z8oPBEvNsMft0XE+g==", "dev": true, "requires": { "camelcase": "^3.0.0", @@ -7671,16 +7270,17 @@ "string-width": "^1.0.2", "which-module": "^1.0.0", "y18n": "^3.2.1", - "yargs-parser": "^5.0.0" + "yargs-parser": "5.0.0-security.0" } }, "yargs-parser": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", - "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "version": "5.0.0-security.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0-security.0.tgz", + "integrity": "sha512-T69y4Ps64LNesYxeYGYPvfoMTt/7y1XtfpIslUeK4um+9Hu7hlGoRtaDLvdXb7+/tfq4opVa2HRY5xGip022rQ==", "dev": true, "requires": { - "camelcase": "^3.0.0" + "camelcase": "^3.0.0", + "object.assign": "^4.1.0" } }, "yauzl": { diff --git a/package.json b/package.json index 858b56e..c601def 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/iconfont/uEA19-brightness_dark.svg b/src/iconfont/uEA19-brightness_dark.svg new file mode 100644 index 0000000..1ec70aa --- /dev/null +++ b/src/iconfont/uEA19-brightness_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconfont/uEA1A-brightness_light.svg b/src/iconfont/uEA1A-brightness_light.svg new file mode 100644 index 0000000..8118a42 --- /dev/null +++ b/src/iconfont/uEA1A-brightness_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconfont/uEA1B-brightness_auto.svg b/src/iconfont/uEA1B-brightness_auto.svg new file mode 100644 index 0000000..89d20a2 --- /dev/null +++ b/src/iconfont/uEA1B-brightness_auto.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/brightness_auto.svg b/src/icons/brightness_auto.svg new file mode 100644 index 0000000..b34dcbb --- /dev/null +++ b/src/icons/brightness_auto.svg @@ -0,0 +1,5 @@ + + +brightness_auto + + diff --git a/src/icons/brightness_dark.svg b/src/icons/brightness_dark.svg new file mode 100644 index 0000000..f175efb --- /dev/null +++ b/src/icons/brightness_dark.svg @@ -0,0 +1,5 @@ + + +brightness_dark + + diff --git a/src/icons/brightness_light.svg b/src/icons/brightness_light.svg new file mode 100644 index 0000000..ad07c42 --- /dev/null +++ b/src/icons/brightness_light.svg @@ -0,0 +1,5 @@ + + +brightness_light + + diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 7358e4a..7e81ba6 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -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); } } diff --git a/src/sass/_chroma_dark.scss b/src/sass/_chroma_dark.scss new file mode 100644 index 0000000..3607590 --- /dev/null +++ b/src/sass/_chroma_dark.scss @@ -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 { + } +} diff --git a/src/sass/_chroma_github.scss b/src/sass/_chroma_github.scss deleted file mode 100644 index aebe5ee..0000000 --- a/src/sass/_chroma_github.scss +++ /dev/null @@ -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; -} diff --git a/src/sass/_chroma_light.scss b/src/sass/_chroma_light.scss new file mode 100644 index 0000000..e4a2e8f --- /dev/null +++ b/src/sass/_chroma_light.scss @@ -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; + } +} diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss new file mode 100644 index 0000000..7bfa2b1 --- /dev/null +++ b/src/sass/_color_mode.scss @@ -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); + } + } +} diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss index 6c02ede..d8c5842 100644 --- a/src/sass/_defaults.scss +++ b/src/sass/_defaults.scss @@ -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; diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 6612158..20e220e 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -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; } diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index f72b090..c0540f6 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -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; } } } diff --git a/src/sass/_test.scss b/src/sass/_test.scss new file mode 100644 index 0000000..4e8827f --- /dev/null +++ b/src/sass/_test.scss @@ -0,0 +1 @@ +color: red; diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss index e1cd6ba..e4aeb90 100644 --- a/src/sass/_utils.scss +++ b/src/sass/_utils.scss @@ -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 { diff --git a/src/sass/main.scss b/src/sass/main.scss index 7445b21..725a112 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -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";