feat: add dark mode (#109)

This commit is contained in:
Robert Kaussow 2021-11-23 16:53:25 +01:00 committed by GitHub
parent 9b2a28d7b5
commit 472b50ca22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 1593 additions and 497 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

View File

@ -84,4 +84,5 @@ params:
geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
geekblogImageLazyLoading: true geekblogImageLazyLoading: true
geekblogDarkModeDim: true
geekblogTagsToMenu: true geekblogTagsToMenu: true

View File

@ -0,0 +1,101 @@
---
title: Code Blocks
date: 2021-11-21T15:00:00+01:00
authors:
- john-doe
tags:
- Documentation
- Features
---
There are several ways to add code blocks. Most of them work out of the box, only the Hugo short code `<highlight>` needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the `.highlight` CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify `plain` or `text` as the language.
{{< toc >}}
## Inline code
To display an inline shortcode use single quotes:
```plain
`some code`
```
**Example:** `some code`
## Code blocks
Code blocks can be uses without language specification:
````markdown
```Plain
some code
```
````
**Example:**
```Plain
some code
```
... or if you need language specific syntax highlighting:
````markdown
```Shell
# some code
echo "Hello world"
```
````
**Example:**
```Shell
# some code
echo "Hello World"
```
## Highlight shortcode
Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:
{{< tabs "uniqueid" >}}
{{< tab "TOML" >}}
```TOML
pygmentsUseClasses=true
pygmentsCodeFences=true
```
{{< /tab >}}
{{< tab "YAML" >}}
```YAML
pygmentsUseClasses: true
pygmentsCodeFences: true
```
{{< /tab >}}
{{< /tabs >}}
You can use it like every other shortcode:
<!-- prettier-ignore -->
```markdown
{{</* highlight Shell "linenos=table" */>}}
# some code
echo "Hello World"
{{</* /highlight */>}}
```
**Example:**
<!-- markdownlint-disable -->
<!-- prettier-ignore-start -->
{{< highlight Shell "linenos=table" >}}
# some code
echo "Hello World"
{{< /highlight >}}
<!-- prettier-ignore-end-->
<!-- markdownlint-enable -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

View File

@ -0,0 +1,19 @@
---
title: Dark Mode
date: 2021-11-21T15:00:00+01:00
authors:
- john-doe
tags:
- Documentation
- Features
---
Say hello to the dark mode of the Geekblog theme!
[![Geekblog in dark mode](images/geekblog-dark.png)](images/geekblog-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 Geekblog 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 site parameter `geekblogDarkModeDim` (see [Configuration](/posts/usage/configuration/)). As this may have an impact on the quality of the images it is disabled by default.

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

View File

@ -8,12 +8,24 @@ tags:
- Features - Features
--- ---
Personalize the look of your site.
<!--more-->
{{< toc >}} {{< toc >}}
## Color Scheme
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:**
<!-- prettier-ignore-start -->
<!-- spellchecker-disable -->
{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}}
<!-- spellchecker-enable -->
<!-- prettier-ignore-end -->
## Favicons ## Favicons
The Theme is shipped with a set of default Favicons in various formats generated by a [Favicon Generator](https://realfavicongenerator.net/). All files can be found in the `static/favicon` folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats. The Theme is shipped with a set of default Favicons in various formats generated by a [Favicon Generator](https://realfavicongenerator.net/). All files can be found in the `static/favicon` folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.
@ -51,3 +63,5 @@ If you want to add more Favicon formats you have to [overwrite](https://gohugo.i
<meta name="msapplication-TileColor" content="#2f333e"> <meta name="msapplication-TileColor" content="#2f333e">
<meta name="theme-color" content="#2f333e"> <meta name="theme-color" content="#2f333e">
``` ```
Happy customizing!

View File

@ -78,7 +78,7 @@ resources:
credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)" credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
--- ---
{{</* img name="forest-1" size="large" lazy=false */>}} {{</* img name="forest-1" lazy=false */>}}
``` ```
<!-- spellchecker-enable --> <!-- spellchecker-enable -->

View File

@ -120,6 +120,10 @@ enableRobotsTXT = true
# (Optional, default true) Enable or disable adding tags automatically to the main menu. # (Optional, default true) Enable or disable adding tags automatically to the main menu.
geekblogTagsToMenu = true geekblogTagsToMenu = true
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode.
geekblogDarkModeDim = false
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
[params.geekblogHostedOn] [params.geekblogHostedOn]
@ -138,9 +142,9 @@ enableRobotsTXT = true
```Yaml ```Yaml
--- ---
# ... baseURL: "http://localhost"
title: "Geekblog"
theme: hugo-geekblog theme: "hugo-geekblog"
paginate: 5 paginate: 5
pluralizeListTitles: false pluralizeListTitles: false
@ -245,6 +249,10 @@ params:
# (Optional, default true) Enable or disable adding tags automatically to the main menu. # (Optional, default true) Enable or disable adding tags automatically to the main menu.
geekblogTagsToMenu: true geekblogTagsToMenu: true
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode.
geekblogDarkModeDim: false
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
geekblogHostedOn: geekblogHostedOn:

View File

@ -249,6 +249,7 @@ There are a lot more things to discover. To get the most out of the Theme we hav
- [Configuration](/posts/usage/configuration/) - [Configuration](/posts/usage/configuration/)
- [Menus](/posts/usage/menus/) - [Menus](/posts/usage/menus/)
- **Features** - **Features**
- [Code Blocks](/posts/features/code-blocks/)
- [Icon Sets](/posts/features/icon-sets/) - [Icon Sets](/posts/features/icon-sets/)
- [Theming](/posts/features/theming/) - [Theming](/posts/features/theming/)
- [Authors](/posts/features/authors/) - [Authors](/posts/features/authors/)

View File

@ -1,3 +1,7 @@
:root {
--code-max-height: 60rem;
}
.icon-grid { .icon-grid {
width: 8rem; width: 8rem;
height: 8rem; height: 8rem;

View File

@ -0,0 +1,150 @@
/* Global customization */
:root {
--code-max-height: 60rem;
}
/* Light mode theming */
:root,
:root[color-mode="light"] {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #ffffff;
--body-font-color: #343a40;
--mark-color: #ffab00;
--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;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
--accent-color-dark: #868e96;
--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;
}
@media (prefers-color-scheme: light) {
:root {
--header-background: #4ec58a;
--header-font-color: #ffffff;
--body-background: #ffffff;
--body-font-color: #343a40;
--mark-color: #ffab00;
--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;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
--accent-color-dark: #868e96;
--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;
--mark-color: #ffab00;
--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;
--code-copy-font-color: #adb4bc;
--code-copy-border-color: #808c98;
--code-copy-success-color: #00c853;
--accent-color-dark: #222629;
--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;
--mark-color: #ffab00;
--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;
--code-copy-font-color: #adb4bc;
--code-copy-border-color: #808c98;
--code-copy-success-color: #00c853;
--accent-color-dark: #222629;
--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;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 252 KiB

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 507 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 108 KiB

View File

@ -16,7 +16,7 @@
<body> <body>
{{ partial "svg-icon-symbols" . }} {{ partial "svg-icon-symbols" . }}
<div class="wrapper"> <div class="wrapper {{ if default false .Site.Params.GeekblogDarkModeDim }}dark-mode-dim{{ end }}">
{{ partial "site-header" . }} {{ partial "site-header" . }}
<main class="gblog-page container"> <main class="gblog-page container">

View File

@ -1 +1,4 @@
{{ .Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML }} {{- $content := .Content -}}
{{- $content = $content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML -}}
{{- $content = $content | replaceRE `(<table>(?:.|\n)+?</table>)` `<div class=table-wrap> ${1} </div>` | safeHTML -}}
{{- $content -}}

View File

@ -1,3 +1,5 @@
<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/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.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">

View File

@ -1,14 +1,33 @@
<header class="gblog-header"> <header class="gblog-header">
<div class="container flex align-center justify-center"> <div class="container flex flex-wrap">
<a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}"> <div class="gblog-header__col-1 flex justify-start hidden-mobile"></div>
<span class="gblog-brand flex align-center justify-center"> <div class="gblog-header__col-2 flex align-center justify-center ">
<img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt=""> <a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}">
{{ .Site.Title }} <span class="gblog-brand flex align-center justify-center">
<img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="">
{{ .Site.Title }}
</span>
{{ with .Site.Params.subtitle }}
<span class="gblog-brand__subtitle flex align-center justify-center">{{ . }}</span>
{{ end }}
</a>
</div>
<div class="gblog-header__col-3 flex justify-end">
<span id="gblog-dark-mode">
<svg class="icon gblog_brightness_dark">
<title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_dark"></use>
</svg>
<svg class="icon gblog_brightness_light">
<title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_light"></use>
</svg>
<svg class="icon gblog_brightness_auto">
<title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_auto"></use>
</svg>
</span> </span>
{{ with .Site.Params.subtitle }} </div>
<span class="gblog-brand__subtitle flex align-center justify-center">{{ . }}</span>
{{ end }}
</a>
</div> </div>
</header> </header>
<nav class="gblog-nav"> <nav class="gblog-nav">
@ -17,7 +36,7 @@
<label for="menu-control" class="flex align-center justify-center"> <label for="menu-control" class="flex align-center justify-center">
<svg class="icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg> <svg class="icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg>
<svg class="icon gblog_clear"><use xlink:href="#gblog_clear"></use></svg> <svg class="icon gblog_clear"><use xlink:href="#gblog_clear"></use></svg>
<span>Nav</span> <span>Navigation</span>
</label> </label>
</div> </div>
<ul class="gblog-nav__list container flex flex-wrap justify-center menu-content"> <ul class="gblog-nav__list container flex flex-wrap justify-center menu-content">

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><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

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><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

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><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

View 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

View 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

View 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

51
src/js/darkmode.js Normal file
View File

@ -0,0 +1,51 @@
const DARK_MODE = "dark";
const LIGHT_MODE = "light";
const AUTO_MODE = "auto";
const THEME = "hugo-geekblog";
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("gblog-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;
}

View File

@ -1,7 +1,17 @@
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {
let currentMode = localStorage.getItem(THEME);
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
let primaryColor = "#ececff"; let primaryColor = "#ececff";
let darkMode = false; let darkMode = false;
if (
currentMode === DARK_MODE ||
(currentMode === AUTO_MODE && darkModeQuery.matches)
) {
primaryColor = "#6C617E";
darkMode = true;
}
mermaid.initialize({ mermaid.initialize({
flowchart: { useMaxWidth: true }, flowchart: { useMaxWidth: true },
theme: "base", theme: "base",

View File

@ -1,7 +1,78 @@
:root,
:root[color-mode="light"] {
--code-max-height: auto;
@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 { html {
font-size: $font-size-base; font-size: $font-size-base;
letter-spacing: 0.33px; letter-spacing: 0.33px;
scroll-behavior: smooth; scroll-behavior: smooth;
&.color-toggle-hidden {
#gblog-dark-mode {
.gblog_brightness_auto,
.gblog_brightness_dark,
.gblog_brightness_light {
display: none;
}
}
}
&.color-toggle-light {
#gblog-dark-mode {
.gblog_brightness_light {
display: inline-block;
}
.gblog_brightness_auto,
.gblog_brightness_dark {
display: none;
}
}
}
&.color-toggle-dark {
#gblog-dark-mode {
.gblog_brightness_dark {
display: inline-block;
}
.gblog_brightness_auto,
.gblog_brightness_light {
display: none;
}
}
}
&.color-toggle-auto {
#gblog-dark-mode {
.gblog_brightness_light {
display: none;
}
.gblog_brightness_dark {
display: none;
}
.gblog_brightness_auto {
display: inline-block;
}
}
}
} }
html, html,
@ -11,8 +82,8 @@ body {
} }
body { body {
color: $body-font-color; color: var(--body-font-color);
background: $body-background; background: var(--body-background);
font-weight: $body-font-weight; font-weight: $body-font-weight;
@ -35,11 +106,6 @@ h6 {
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
> code {
border-top: 3px solid $gray-300;
font-size: 0.75em !important;
}
} }
h4, h4,
@ -50,16 +116,21 @@ h6 {
a { a {
text-decoration: underline; text-decoration: underline;
color: $color-link; color: var(--link-color);
&:hover { &:hover {
background: $color-link; background: var(--link-color);
color: $white !important; color: $gray-100;
text-decoration: none; text-decoration: none;
} }
&:visited { &:visited {
color: $color-link; color: var(--link-color-visited);
&:hover {
background: var(--link-color-visited);
color: $gray-100;
}
} }
} }
@ -67,8 +138,17 @@ img {
vertical-align: middle; vertical-align: middle;
} }
#gblog-dark-mode {
cursor: pointer;
.icon {
width: 2.5rem;
height: 2.5rem;
}
}
.fake-link { .fake-link {
background-image: linear-gradient($color-link, $color-link); background-image: linear-gradient(var(--link-color), var(--link-color));
background-position: 0 100%; background-position: 0 100%;
background-size: 100% 1px; background-size: 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -100,10 +180,19 @@ img {
} }
.gblog-header { .gblog-header {
background: $main-color; background: var(--header-background);
color: $white; color: var(--header-font-color);
padding: $padding-16 0; padding: $padding-16 0;
&__col-1,
&__col-3 {
flex: 1 1 15%;
}
&__col-2 {
flex: 1 1 70%;
}
&__link, &__link,
&__link:visited { &__link:visited {
color: inherit; color: inherit;
@ -116,11 +205,11 @@ img {
} }
.gblog-brand { .gblog-brand {
font-size: $font-size-32 * 1.5; font-size: $font-size-32;
&__subtitle { &__subtitle {
margin-top: $padding-16; margin-top: $padding-16;
font-size: $font-size-16 * 1.2; font-size: $font-size-20;
font-weight: bolder; font-weight: bolder;
} }
@ -133,7 +222,7 @@ img {
.gblog-nav { .gblog-nav {
background: $second-color; background: $second-color;
color: $gray-200; color: $gray-100;
min-height: $padding-4; min-height: $padding-4;
.container { .container {
@ -155,7 +244,8 @@ img {
margin: $padding-4; margin: $padding-4;
&:hover, &:hover,
&.is-active { &.is-active,
&:visited:hover {
background: lighten($second-color, 10%); background: lighten($second-color, 10%);
} }
@ -193,7 +283,7 @@ img {
.gblog-post { .gblog-post {
word-wrap: break-word; word-wrap: break-word;
border-top: 1px dashed $gray-600; border-top: $border-2 dashed var(--accent-color-dark);
padding: $padding-32 0; padding: $padding-32 0;
&__header { &__header {
@ -210,7 +300,7 @@ img {
a:hover { a:hover {
background: none; background: none;
text-decoration: underline; text-decoration: underline;
color: $body-font-color !important; color: var(--body-font-color) !important;
} }
} }
@ -221,6 +311,16 @@ img {
&__readmore { &__readmore {
margin: 1.5rem 0 $padding-32 0; margin: 1.5rem 0 $padding-32 0;
a:visited {
color: var(--link-color);
}
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
a:after { a:after {
font-family: GeekblogIcons; font-family: GeekblogIcons;
content: "\ea02"; content: "\ea02";
@ -240,15 +340,13 @@ img {
} }
&__anchorwrap { &__anchorwrap {
&:hover .gblog-post__anchor { &:hover .gblog-post__anchor .icon {
background: none; color: var(--control-icons);
color: $gray-500 !important;
} }
} }
&__anchor { &__anchor {
min-width: 30px; min-width: 30px;
color: transparent;
&--left { &--left {
position: absolute; position: absolute;
@ -261,7 +359,14 @@ img {
} }
.icon { .icon {
font-size: $font-size-16 * 1.3; font-size: $font-size-20;
color: transparent;
}
&:hover,
&:visited:hover {
color: var(--control-icons);
background: none;
} }
} }
@ -284,13 +389,14 @@ img {
right: 0; right: 0;
padding: $padding-4; padding: $padding-4;
font-size: 0.8em; font-size: 0.8em;
color: $gray-200; color: $gray-100;
border-radius: $border-radius 0; border-radius: $border-radius 0;
} }
a:hover, a:hover,
a:visited { a:visited,
color: $gray-200 !important; a:visited:hover {
color: $gray-100 !important;
} }
} }
@ -305,7 +411,7 @@ img {
&__figure { &__figure {
padding: $padding-4; padding: $padding-4;
margin: $padding-16 0; margin: $padding-16 0;
background-color: $gray-300; background-color: var(--accent-color);
display: table; display: table;
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
@ -313,7 +419,7 @@ img {
figcaption { figcaption {
display: table-caption; display: table-caption;
caption-side: bottom; caption-side: bottom;
background-color: $gray-300; background-color: var(--accent-color);
padding: 0 $padding-4 $padding-4; padding: 0 $padding-4 $padding-4;
text-align: center; text-align: center;
border-bottom-left-radius: $border-radius; border-bottom-left-radius: $border-radius;
@ -346,15 +452,16 @@ img {
} }
&__link { &__link {
color: $color-link-footer; color: var(--link-color-footer);
&:hover { &:hover,
background: $color-link-footer; &:visited:hover {
color: $body-font-color !important; background: var(--link-color-footer);
color: $body-font-color;
} }
&:visited { &:visited {
color: $color-link-footer; color: var(--link-color-footer);
} }
} }
} }
@ -365,6 +472,16 @@ img {
&__item { &__item {
flex: 1 1 0; flex: 1 1 0;
a:visited {
color: var(--link-color);
}
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
&--next { &--next {
text-align: right; text-align: right;
@ -394,12 +511,12 @@ img {
.icon { .icon {
font-size: $font-size-128; font-size: $font-size-128;
color: $gray-700; color: var(--body-font-color);
} }
&__link, &__link,
&__link:visited { &__link:visited {
color: $color-link; color: var(--link-color);
} }
&__message { &__message {
@ -411,7 +528,7 @@ img {
} }
&__title { &__title {
font-size: $font-size-16 * 4; font-size: $font-size-64;
} }
&__code { &__code {
@ -430,9 +547,15 @@ img {
display: none; display: none;
} }
a:hover,
a:visited:hover {
background: var(--link-color);
color: $gray-100;
}
a, a,
a:visited { a:visited {
color: $color-link; color: var(--link-color);
text-decoration: none; text-decoration: none;
} }
} }

View File

@ -0,0 +1,72 @@
@mixin chroma_base {
.chroma {
color: var(--code-font-color);
}
.chroma code {
background-color: var(--code-background);
display: block;
line-height: 1.45;
font-size: 0.85em;
border-radius: $border-radius;
}
.chroma .lntable {
max-height: var(--code-max-height);
code {
max-height: none;
}
}
.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 {
overflow: auto;
max-height: var(--code-max-height);
pre.chroma {
margin: 0;
}
> pre.chroma code {
padding: 1rem;
width: 100%;
overflow-x: auto;
}
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
width: 100%;
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;
}
}

341
src/sass/_chroma_dark.scss Normal file
View File

@ -0,0 +1,341 @@
@mixin chroma_dark {
/* Theme: Dracula */
/* Background */
@include chroma_base;
/* Other */
.chroma .x {
color: inherit;
}
/* Error */
.chroma .err {
color: inherit;
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
display: block;
width: 100%;
background-color: #4f1605;
}
/* LineNumbersTable */
.chroma .lnt {
padding: 0 0.8em;
}
/* LineNumbers */
.chroma .ln {
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #b3b3b3;
}
/* 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 {
color: inherit;
}
/* NameAttribute */
.chroma .na {
color: #50fa7b;
}
/* NameBuiltin */
.chroma .nb {
color: #8be9fd;
font-style: italic;
}
/* NameBuiltinPseudo */
.chroma .bp {
color: inherit;
}
/* NameClass */
.chroma .nc {
color: #50fa7b;
}
/* NameConstant */
.chroma .no {
color: inherit;
}
/* NameDecorator */
.chroma .nd {
color: inherit;
}
/* NameEntity */
.chroma .ni {
color: inherit;
}
/* NameException */
.chroma .ne {
color: inherit;
}
/* NameFunction */
.chroma .nf {
color: #50fa7b;
}
/* NameFunctionMagic */
.chroma .fm {
color: inherit;
}
/* NameLabel */
.chroma .nl {
color: #8be9fd;
font-style: italic;
}
/* NameNamespace */
.chroma .nn {
color: inherit;
}
/* NameOther */
.chroma .nx {
color: inherit;
}
/* NameProperty */
.chroma .py {
color: inherit;
}
/* 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 {
color: inherit;
}
/* Literal */
.chroma .l {
color: inherit;
}
/* LiteralDate */
.chroma .ld {
color: inherit;
}
/* 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 {
color: inherit;
}
/* Comment */
.chroma .c {
color: #96a6d8;
}
/* CommentHashbang */
.chroma .ch {
color: #96a6d8;
}
/* CommentMultiline */
.chroma .cm {
color: #96a6d8;
}
/* CommentSingle */
.chroma .c1 {
color: #96a6d8;
}
/* CommentSpecial */
.chroma .cs {
color: #96a6d8;
}
/* CommentPreproc */
.chroma .cp {
color: #ff79c6;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #ff79c6;
}
/* Generic */
.chroma .g {
color: inherit;
}
/* GenericDeleted */
.chroma .gd {
color: #d98f90;
}
/* GenericEmph */
.chroma .ge {
text-decoration: underline;
}
/* GenericError */
.chroma .gr {
color: inherit;
}
/* GenericHeading */
.chroma .gh {
font-weight: bold;
color: inherit;
}
/* GenericInserted */
.chroma .gi {
font-weight: bold;
}
/* GenericOutput */
.chroma .go {
color: #8f9ea8;
}
/* GenericPrompt */
.chroma .gp {
color: inherit;
}
/* GenericStrong */
.chroma .gs {
color: inherit;
}
/* GenericSubheading */
.chroma .gu {
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
color: inherit;
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
color: inherit;
}
}

View File

@ -1,376 +0,0 @@
.chroma {
background-color: #ffffff;
color: #555;
}
.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-x: 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;
}

360
src/sass/_chroma_light.scss Normal file
View File

@ -0,0 +1,360 @@
@mixin chroma_github {
/* Theme: GitHub */
/* Background */
@include chroma_base;
/* Other */
.chroma .x {
color: inherit;
}
/* Error */
.chroma .err {
color: #a61717;
background-color: #e3d2d2;
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* 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 {
color: inherit;
}
/* NameAttribute */
.chroma .na {
color: #006767;
}
/* NameBuiltin */
.chroma .nb {
color: #556165;
}
/* NameBuiltinPseudo */
.chroma .bp {
color: #676767;
}
/* NameClass */
.chroma .nc {
color: #445588;
font-weight: bold;
}
/* NameConstant */
.chroma .no {
color: #006767;
}
/* 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 {
color: inherit;
}
/* NameLabel */
.chroma .nl {
color: #990000;
font-weight: bold;
}
/* NameNamespace */
.chroma .nn {
color: #555555;
}
/* NameOther */
.chroma .nx {
color: inherit;
}
/* NameProperty */
.chroma .py {
color: inherit;
}
/* NameTag */
.chroma .nt {
color: #000080;
}
/* NameVariable */
.chroma .nv {
color: #006767;
}
/* NameVariableClass */
.chroma .vc {
color: #006767;
}
/* NameVariableGlobal */
.chroma .vg {
color: #006767;
}
/* NameVariableInstance */
.chroma .vi {
color: #006767;
}
/* NameVariableMagic */
.chroma .vm {
color: inherit;
}
/* Literal */
.chroma .l {
color: inherit;
}
/* LiteralDate */
.chroma .ld {
color: inherit;
}
/* 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: #027e83;
}
/* LiteralNumberBin */
.chroma .mb {
color: #027e83;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #027e83;
}
/* LiteralNumberHex */
.chroma .mh {
color: #027e83;
}
/* LiteralNumberInteger */
.chroma .mi {
color: #027e83;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #027e83;
}
/* LiteralNumberOct */
.chroma .mo {
color: #027e83;
}
/* Operator */
.chroma .o {
color: #000000;
font-weight: bold;
}
/* OperatorWord */
.chroma .ow {
color: #000000;
font-weight: bold;
}
/* Punctuation */
.chroma .p {
color: inherit;
}
/* Comment */
.chroma .c {
color: #676765;
font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
color: #676765;
font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
color: #676765;
font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
color: #676765;
font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
color: #676767;
font-weight: bold;
font-style: italic;
}
/* CommentPreproc */
.chroma .cp {
color: #676767;
font-weight: bold;
font-style: italic;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #676767;
font-weight: bold;
font-style: italic;
}
/* Generic */
.chroma .g {
color: inherit;
}
/* 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: #676767;
}
/* GenericInserted */
.chroma .gi {
color: #000000;
background-color: #ddffdd;
}
/* GenericOutput */
.chroma .go {
color: #6f6f6f;
}
/* GenericPrompt */
.chroma .gp {
color: #555555;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
color: #5f5f5f;
}
/* GenericTraceback */
.chroma .gt {
color: #aa0000;
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
color: #bbbbbb;
}
}

103
src/sass/_color_mode.scss Normal file
View File

@ -0,0 +1,103 @@
@mixin light_mode {
@include chroma_github;
--header-background: #{$main-color};
--header-font-color: #{$white};
--body-background: #{$body-background};
--body-font-color: #{$body-font-color};
--mark-color: #{$mark-color};
--button-background: #{lighten($main-color, 2)};
--button-border-color: #{$main-color};
--link-color: #{$link-color};
--link-color-visited: #{$link-color-visited};
--link-color-footer: #{$link-color-footer};
--code-background: #{$code-background};
--code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)};
--code-font-color: #{$code-font-color};
--code-copy-font-color: #{lighten($body-font-color, 24)};
--code-copy-border-color: #{lighten($body-font-color, 48)};
--code-copy-success-color: #{map.get($hint-colors, "ok")};
--accent-color-dark: #{$gray-600};
--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};
.dark-mode-dim .gblog-markdown {
img {
filter: none;
}
}
.gblog-markdown {
.gblog-hint {
filter: none;
}
}
}
@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)};
--mark-color: #{$mark-color};
--button-background: #{lighten($main-color, 2)};
--button-border-color: #{$main-color};
--link-color: #{$link-color-dark};
--link-color-visited: #{$link-color-visited-dark};
--link-color-footer: #{$link-color-footer};
--code-background: #{$code-background-dark};
--code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark};
--code-copy-font-color: #{lighten($body-font-color, 48)};
--code-copy-border-color: #{lighten($body-font-color, 32)};
--code-copy-success-color: #{map.get($hint-colors, "ok")};
--accent-color-dark: #{darken($body-background-dark, 8)};
--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 {
.gblog-post__feature picture,
.gblog-markdown img {
filter: brightness(0.75) grayscale(0.2);
}
}
.gblog-markdown {
.gblog-hint,
.gblog-post__codecopy--success {
filter: saturate(2.5) brightness(0.85);
}
}
}

View File

@ -17,8 +17,8 @@ $font-size-96: 6rem !default;
$font-size-128: 8rem !default; $font-size-128: 8rem !default;
$border-1: 1px !default; $border-1: 1px !default;
$border-2: 2px !default; $border-2: 1.5px !default;
$border-4: 4px !default; $border-4: 3px !default;
$border-radius: 0.15rem !default; $border-radius: 0.15rem !default;
@ -35,28 +35,46 @@ $gray-800: rgba(52, 58, 64, 1) !default;
$gray-900: rgba(33, 37, 41, 1) !default; $gray-900: rgba(33, 37, 41, 1) !default;
$black: rgba(0, 0, 0, 1) !default; $black: rgba(0, 0, 0, 1) !default;
$color-link: rgba(10, 83, 154, 1) !default; $link-color: rgba(10, 83, 154, 1) !default;
$color-link-visited: rgba(119, 73, 191, 1) !default; $link-color-visited: rgba(119, 73, 191, 1) !default;
$color-link-footer: rgba(255, 163, 30, 1) !default; $link-color-footer: rgba(255, 163, 30, 1) !default;
$color-code: rgba($gray-200, 0.5) !default;
$body-background: white !default; $body-background: white !default;
$body-font-color: $gray-800 !default; $body-font-color: $gray-800 !default;
$body-font-weight: normal !default; $body-font-weight: normal !default;
$body-min-width: 20rem !default; $body-min-width: 20rem !default;
$code-font-color: rgba(95, 95, 95, 1) !default;
$code-font-color-dark: rgba(185, 185, 185, 1) !default;
$body-background-dark: $gray-800 !default;
$body-font-color-dark: $gray-100 !default;
$container-max-width: 60rem !default; $container-max-width: 60rem !default;
$main-color: rgba(65, 134, 201, 1) !default; $main-color: rgba(65, 134, 201, 1) !default;
$second-color: rgba(47, 51, 62, 1) !default; $second-color: rgba(47, 51, 62, 1) !default;
$mark-color: rgba(255, 171, 0, 1) !default;
$sm-breakpoint: 45rem !default; $body-background-dark: mix(
invert($body-background, 75%),
$second-color
) !default;
$link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: rgba(186, 142, 240) !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;
$sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
// Panel colors // Panel colors
$hint-colors: ( $hint-colors: (
info: rgba(102, 187, 255, 1), info: rgba(0, 145, 234, 1),
ok: rgba(102, 255, 140, 1), ok: rgba(0, 200, 83, 1),
warning: rgba(255, 221, 102, 1), warning: rgba(255, 171, 0, 1),
danger: rgba(255, 102, 102, 1), danger: rgba(213, 0, 0, 1),
) !default; ) !default;

View File

@ -19,17 +19,34 @@
} }
} }
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
> code {
border-top: $border-4 solid var(--accent-color);
font-size: 0.75em !important;
}
}
h4,
h5,
h6 {
> code {
font-size: 0.8rem !important;
}
}
b, b,
optgroup, optgroup,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
img {
max-width: 100%;
border-radius: $border-radius;
}
&__link--raw { &__link--raw {
text-decoration: none !important; text-decoration: none !important;
color: $body-font-color !important; color: $body-font-color !important;
@ -45,11 +62,16 @@
} }
} }
img {
max-width: 100%;
border-radius: $border-radius;
}
blockquote { blockquote {
margin: $padding-16 0; margin: $padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp 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; border-radius: $border-radius;
:first-child { :first-child {
@ -60,8 +82,7 @@
} }
} }
table { table:not(.lntable) {
overflow: auto;
display: table; display: table;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
@ -71,7 +92,7 @@
text-align: left; text-align: left;
thead { thead {
border-bottom: $border-2 solid $gray-200; border-bottom: $border-4 solid var(--accent-color);
} }
tr th, tr th,
@ -80,18 +101,18 @@
} }
tr { tr {
border-bottom: $border-1 solid $gray-200; border-bottom: $border-2 solid var(--accent-color);
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background: $gray-100; background: var(--accent-color-lite);
} }
} }
hr { hr {
height: $padding-2; height: $border-2;
border: none; border: none;
background: $gray-200; background: var(--accent-color);
} }
ul, ul,
@ -115,9 +136,11 @@
} }
code { code {
background-color: $color-code; background-color: var(--code-background);
border-radius: $border-radius;
color: var(--code-font-color);
font-size: 0.85em; font-size: 0.85em;
line-height: 1.45; line-height: 1.45em;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
@ -125,16 +148,15 @@
display: block; display: block;
padding: 1rem; padding: 1rem;
width: 100%; width: 100%;
overflow: auto;
} }
mark { mark {
background-color: rgba(255, 221, 102, 1); background-color: var(--mark-color);
} }
section.footnotes { section.footnotes {
margin-top: 3rem; margin-top: 3rem;
color: $gray-600; color: var(--body-font-color);
font-size: 0.9em; font-size: $font-size-14;
} }
} }

View File

@ -1,6 +1,20 @@
@media screen and (max-width: $sm-breakpoint) { @media screen and (max-width: $sm-breakpoint) {
.gblog-header__col-2.justify-center,
.gblog-header__col-2 .justify-center {
justify-content: flex-start;
}
.gblog-brand { .gblog-brand {
font-size: $font-size-32 * 1.1; font-size: $font-size-32;
&__subtitle {
font-size: $font-size-20;
}
&__img {
width: 40px;
height: 40px;
}
} }
.gblog-nav { .gblog-nav {
@ -26,6 +40,7 @@
text-align: center; text-align: center;
&:hover, &:hover,
&:visited:hover,
&.is-active { &.is-active {
background: lighten($second-color, 5%); background: lighten($second-color, 5%);
} }
@ -71,18 +86,22 @@
width: 100%; width: 100%;
} }
} }
}
#menu-control:checked ~ .gblog-nav__list { .hidden-mobile {
max-height: 100%;
visibility: visible;
}
#menu-control:checked ~ .gblog-nav__control {
.icon.gblog_menu {
display: none; display: none;
} }
.icon.gblog_clear {
display: inline-block; #menu-control:checked ~ .gblog-nav__list {
max-height: 100%;
visibility: visible;
}
#menu-control:checked ~ .gblog-nav__control {
.icon.gblog_menu {
display: none;
}
.icon.gblog_clear {
display: inline-block;
}
} }
} }

View File

@ -3,13 +3,13 @@
margin-top: $padding-16; margin-top: $padding-16;
margin-bottom: $padding-16; margin-bottom: $padding-16;
border: $border-1 solid $gray-200; border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
overflow: hidden; overflow: hidden;
&__head { &__head {
background: $gray-100; background: var(--accent-color-lite);
padding: $padding-8 $padding-16; padding: $padding-8 $padding-16;
cursor: pointer; cursor: pointer;
} }
@ -23,7 +23,7 @@
display: block; display: block;
} }
.gblog-page__anchor { .gblog-post__anchor {
display: none; display: none;
} }
} }
@ -33,7 +33,7 @@
margin-top: $padding-16; margin-top: $padding-16;
margin-bottom: $padding-16; margin-bottom: $padding-16;
border: $border-1 solid $gray-200; border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
overflow: hidden; overflow: hidden;
@ -51,17 +51,21 @@
&__content { &__content {
order: 999; //Move content blocks to the end order: 999; //Move content blocks to the end
width: 100%; width: 100%;
border-top: $border-1 solid $gray-100; border-top: $border-1 solid var(--accent-color-lite);
padding: $padding-16; padding: $padding-16;
display: none; display: none;
} }
&__control:checked + &__label { &__control:checked + &__label {
border-bottom: $border-1 solid $color-link; border-bottom: $border-2 solid var(--link-color);
} }
&__control:checked + &__label + &__content { &__control:checked + &__label + &__content {
display: block; display: block;
} }
.gblog-post__anchor {
display: none;
}
} }
// {{< columns >}} // {{< columns >}}
@ -75,7 +79,7 @@
padding: 0 $padding-16; padding: 0 $padding-16;
} }
.gblog-page__anchor { .gblog-post__anchor {
display: none; display: none;
} }
} }
@ -85,8 +89,8 @@
$root: &; $root: &;
display: inline-block; display: inline-block;
color: $gray-700; background: var(--accent-color-lite);
border: $border-1 solid $gray-500; border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
margin: $padding-8 0; margin: $padding-8 0;
cursor: pointer; cursor: pointer;
@ -95,15 +99,11 @@
display: inline-block; display: inline-block;
color: inherit !important; color: inherit !important;
text-decoration: none !important; text-decoration: none !important;
&:hover {
background: none;
}
} }
&:hover { &:hover {
background: lighten($main-color, 2); background: var(--button-background);
border-color: $main-color; border-color: var(--button-border-color);
color: $gray-100; color: $gray-100;
} }
@ -129,9 +129,14 @@
@each $name, $color in $hint-colors { @each $name, $color in $hint-colors {
&.#{$name} { &.#{$name} {
border-left-color: $color; border-left-color: $color;
background-color: rgba($color, 0.1); background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color;
} }
} }
.gblog-post__anchor {
display: none;
}
} }
// {{< mermaid >}} // {{< mermaid >}}

View File

@ -20,9 +20,9 @@
.flex-grid { .flex-grid {
flex-direction: column; flex-direction: column;
border: $border-1 solid $gray-200; border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
background-color: $color-code; background: var(--accent-color-lite);
} }
.justify-start { .justify-start {
@ -67,3 +67,7 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
.table-wrap {
overflow: auto;
}

View File

@ -1,4 +1,10 @@
@use "sass:map";
@import "_defaults"; @import "_defaults";
@import "_color_mode";
@import "_chroma_base";
@import "_chroma_light";
@import "_chroma_dark";
@import "_normalize"; @import "_normalize";
@import "_utils"; @import "_utils";
@ -6,5 +12,4 @@
@import "_base"; @import "_base";
@import "_markdown"; @import "_markdown";
@import "_chroma_github";
@import "_shortcodes"; @import "_shortcodes";