feat: add dark mode (#109)
Before Width: | Height: | Size: 12 KiB |
@ -84,4 +84,5 @@ params:
|
||||
geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
|
||||
|
||||
geekblogImageLazyLoading: true
|
||||
geekblogDarkModeDim: true
|
||||
geekblogTagsToMenu: true
|
||||
|
101
exampleSite/content/posts/features/code-blocks.md
Normal 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 -->
|
After Width: | Height: | Size: 462 KiB |
19
exampleSite/content/posts/features/dark-mode/index.md
Normal 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.
|
After Width: | Height: | Size: 350 KiB |
@ -8,12 +8,24 @@ tags:
|
||||
- Features
|
||||
---
|
||||
|
||||
Personalize the look of your site.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< 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
|
||||
|
||||
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="theme-color" content="#2f333e">
|
||||
```
|
||||
|
||||
Happy customizing!
|
@ -78,7 +78,7 @@ resources:
|
||||
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 -->
|
||||
|
@ -120,6 +120,10 @@ enableRobotsTXT = true
|
||||
# (Optional, default true) Enable or disable adding tags automatically to the main menu.
|
||||
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.
|
||||
# Could be used if you want to give credits to your hosting provider.
|
||||
[params.geekblogHostedOn]
|
||||
@ -138,9 +142,9 @@ enableRobotsTXT = true
|
||||
|
||||
```Yaml
|
||||
---
|
||||
# ...
|
||||
|
||||
theme: hugo-geekblog
|
||||
baseURL: "http://localhost"
|
||||
title: "Geekblog"
|
||||
theme: "hugo-geekblog"
|
||||
|
||||
paginate: 5
|
||||
pluralizeListTitles: false
|
||||
@ -245,6 +249,10 @@ params:
|
||||
# (Optional, default true) Enable or disable adding tags automatically to the main menu.
|
||||
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.
|
||||
# Could be used if you want to give credits to your hosting provider.
|
||||
geekblogHostedOn:
|
||||
|
@ -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/)
|
||||
- [Menus](/posts/usage/menus/)
|
||||
- **Features**
|
||||
- [Code Blocks](/posts/features/code-blocks/)
|
||||
- [Icon Sets](/posts/features/icon-sets/)
|
||||
- [Theming](/posts/features/theming/)
|
||||
- [Authors](/posts/features/authors/)
|
||||
|
@ -1,3 +1,7 @@
|
||||
:root {
|
||||
--code-max-height: 60rem;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
|
150
exampleSite/static/custom.css.example
Normal 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;
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 252 KiB After Width: | Height: | Size: 180 KiB |
Before Width: | Height: | Size: 190 KiB |
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 507 KiB |
BIN
images/tn.png
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 108 KiB |
@ -16,7 +16,7 @@
|
||||
<body>
|
||||
{{ partial "svg-icon-symbols" . }}
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrapper {{ if default false .Site.Params.GeekblogDarkModeDim }}dark-mode-dim{{ end }}">
|
||||
{{ partial "site-header" . }}
|
||||
|
||||
<main class="gblog-page container">
|
||||
|
@ -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 -}}
|
||||
|
@ -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/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
|
||||
|
||||
|
@ -1,5 +1,7 @@
|
||||
<header class="gblog-header">
|
||||
<div class="container flex align-center justify-center">
|
||||
<div class="container flex flex-wrap">
|
||||
<div class="gblog-header__col-1 flex justify-start hidden-mobile"></div>
|
||||
<div class="gblog-header__col-2 flex align-center justify-center ">
|
||||
<a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}">
|
||||
<span class="gblog-brand flex align-center justify-center">
|
||||
<img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="">
|
||||
@ -10,6 +12,23 @@
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="gblog-nav">
|
||||
<input type="checkbox" id="menu-control" class="hidden">
|
||||
@ -17,7 +36,7 @@
|
||||
<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_clear"><use xlink:href="#gblog_clear"></use></svg>
|
||||
<span>Nav</span>
|
||||
<span>Navigation</span>
|
||||
</label>
|
||||
</div>
|
||||
<ul class="gblog-nav__list container flex flex-wrap justify-center menu-content">
|
||||
|
1
src/iconfont/uEA1C-brightness_auto.svg
Normal 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 |
1
src/iconfont/uEA1D-brightness_dark.svg
Normal 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 |
1
src/iconfont/uEA1E-brightness_light.svg
Normal 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 |
5
src/icons/brightness_auto.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
|
||||
<title>brightness_auto</title>
|
||||
<path d="M16.846 18.938h2.382l-4.008-11.153h-2.44l-4.008 11.153h2.382l0.871-2.44h3.95zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809zM12.548 14.813l1.452-4.531 1.452 4.531h-2.904z"></path>
|
||||
</svg>
|
After Width: | Height: | Size: 475 B |
5
src/icons/brightness_dark.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
|
||||
<title>brightness_dark</title>
|
||||
<path d="M14 21.435q3.079 0 5.257-2.178t2.178-5.257-2.178-5.257-5.257-2.178q-1.51 0-3.079 0.697 1.917 0.871 3.108 2.701t1.191 4.037-1.191 4.037-3.108 2.701q1.568 0.697 3.079 0.697zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809z"></path>
|
||||
</svg>
|
After Width: | Height: | Size: 523 B |
5
src/icons/brightness_light.svg
Normal file
@ -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
@ -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;
|
||||
}
|
@ -1,7 +1,17 @@
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
let currentMode = localStorage.getItem(THEME);
|
||||
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
let primaryColor = "#ececff";
|
||||
let darkMode = false;
|
||||
|
||||
if (
|
||||
currentMode === DARK_MODE ||
|
||||
(currentMode === AUTO_MODE && darkModeQuery.matches)
|
||||
) {
|
||||
primaryColor = "#6C617E";
|
||||
darkMode = true;
|
||||
}
|
||||
|
||||
mermaid.initialize({
|
||||
flowchart: { useMaxWidth: true },
|
||||
theme: "base",
|
||||
|
@ -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 {
|
||||
font-size: $font-size-base;
|
||||
letter-spacing: 0.33px;
|
||||
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,
|
||||
@ -11,8 +82,8 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
color: $body-font-color;
|
||||
background: $body-background;
|
||||
color: var(--body-font-color);
|
||||
background: var(--body-background);
|
||||
|
||||
font-weight: $body-font-weight;
|
||||
|
||||
@ -35,11 +106,6 @@ h6 {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> code {
|
||||
border-top: 3px solid $gray-300;
|
||||
font-size: 0.75em !important;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
@ -50,16 +116,21 @@ h6 {
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
background: $color-link;
|
||||
color: $white !important;
|
||||
background: var(--link-color);
|
||||
color: $gray-100;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
#gblog-dark-mode {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
@ -100,10 +180,19 @@ img {
|
||||
}
|
||||
|
||||
.gblog-header {
|
||||
background: $main-color;
|
||||
color: $white;
|
||||
background: var(--header-background);
|
||||
color: var(--header-font-color);
|
||||
padding: $padding-16 0;
|
||||
|
||||
&__col-1,
|
||||
&__col-3 {
|
||||
flex: 1 1 15%;
|
||||
}
|
||||
|
||||
&__col-2 {
|
||||
flex: 1 1 70%;
|
||||
}
|
||||
|
||||
&__link,
|
||||
&__link:visited {
|
||||
color: inherit;
|
||||
@ -116,11 +205,11 @@ img {
|
||||
}
|
||||
|
||||
.gblog-brand {
|
||||
font-size: $font-size-32 * 1.5;
|
||||
font-size: $font-size-32;
|
||||
|
||||
&__subtitle {
|
||||
margin-top: $padding-16;
|
||||
font-size: $font-size-16 * 1.2;
|
||||
font-size: $font-size-20;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@ -133,7 +222,7 @@ img {
|
||||
|
||||
.gblog-nav {
|
||||
background: $second-color;
|
||||
color: $gray-200;
|
||||
color: $gray-100;
|
||||
min-height: $padding-4;
|
||||
|
||||
.container {
|
||||
@ -155,7 +244,8 @@ img {
|
||||
margin: $padding-4;
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
&.is-active,
|
||||
&:visited:hover {
|
||||
background: lighten($second-color, 10%);
|
||||
}
|
||||
|
||||
@ -193,7 +283,7 @@ img {
|
||||
|
||||
.gblog-post {
|
||||
word-wrap: break-word;
|
||||
border-top: 1px dashed $gray-600;
|
||||
border-top: $border-2 dashed var(--accent-color-dark);
|
||||
padding: $padding-32 0;
|
||||
|
||||
&__header {
|
||||
@ -210,7 +300,7 @@ img {
|
||||
a:hover {
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
color: $body-font-color !important;
|
||||
color: var(--body-font-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,6 +311,16 @@ img {
|
||||
&__readmore {
|
||||
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 {
|
||||
font-family: GeekblogIcons;
|
||||
content: "\ea02";
|
||||
@ -240,15 +340,13 @@ img {
|
||||
}
|
||||
|
||||
&__anchorwrap {
|
||||
&:hover .gblog-post__anchor {
|
||||
background: none;
|
||||
color: $gray-500 !important;
|
||||
&:hover .gblog-post__anchor .icon {
|
||||
color: var(--control-icons);
|
||||
}
|
||||
}
|
||||
|
||||
&__anchor {
|
||||
min-width: 30px;
|
||||
color: transparent;
|
||||
|
||||
&--left {
|
||||
position: absolute;
|
||||
@ -261,7 +359,14 @@ img {
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: $padding-4;
|
||||
font-size: 0.8em;
|
||||
color: $gray-200;
|
||||
color: $gray-100;
|
||||
border-radius: $border-radius 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $gray-200 !important;
|
||||
a:visited,
|
||||
a:visited:hover {
|
||||
color: $gray-100 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -305,7 +411,7 @@ img {
|
||||
&__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;
|
||||
@ -313,7 +419,7 @@ img {
|
||||
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;
|
||||
@ -346,15 +452,16 @@ img {
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $color-link-footer;
|
||||
color: var(--link-color-footer);
|
||||
|
||||
&:hover {
|
||||
background: $color-link-footer;
|
||||
color: $body-font-color !important;
|
||||
&:hover,
|
||||
&:visited:hover {
|
||||
background: var(--link-color-footer);
|
||||
color: $body-font-color;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $color-link-footer;
|
||||
color: var(--link-color-footer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -365,6 +472,16 @@ img {
|
||||
&__item {
|
||||
flex: 1 1 0;
|
||||
|
||||
a:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited:hover {
|
||||
background: var(--link-color);
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
&--next {
|
||||
text-align: right;
|
||||
|
||||
@ -394,12 +511,12 @@ img {
|
||||
|
||||
.icon {
|
||||
font-size: $font-size-128;
|
||||
color: $gray-700;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
|
||||
&__link,
|
||||
&__link:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&__message {
|
||||
@ -411,7 +528,7 @@ img {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $font-size-16 * 4;
|
||||
font-size: $font-size-64;
|
||||
}
|
||||
|
||||
&__code {
|
||||
@ -430,9 +547,15 @@ img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited:hover {
|
||||
background: var(--link-color);
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
72
src/sass/_chroma_base.scss
Normal 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
@ -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;
|
||||
}
|
||||
}
|
@ -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
@ -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
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -17,8 +17,8 @@ $font-size-96: 6rem !default;
|
||||
$font-size-128: 8rem !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;
|
||||
|
||||
@ -35,28 +35,46 @@ $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;
|
||||
|
||||
$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;
|
||||
|
||||
$main-color: rgba(65, 134, 201, 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
|
||||
$hint-colors: (
|
||||
info: rgba(102, 187, 255, 1),
|
||||
ok: rgba(102, 255, 140, 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;
|
||||
|
@ -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,
|
||||
optgroup,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&__link--raw {
|
||||
text-decoration: none !important;
|
||||
color: $body-font-color !important;
|
||||
@ -45,11 +62,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
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 {
|
||||
@ -60,8 +82,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
overflow: auto;
|
||||
table:not(.lntable) {
|
||||
display: table;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
@ -71,7 +92,7 @@
|
||||
text-align: left;
|
||||
|
||||
thead {
|
||||
border-bottom: $border-2 solid $gray-200;
|
||||
border-bottom: $border-4 solid var(--accent-color);
|
||||
}
|
||||
|
||||
tr th,
|
||||
@ -80,18 +101,18 @@
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: $border-1 solid $gray-200;
|
||||
border-bottom: $border-2 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,
|
||||
@ -115,9 +136,11 @@
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $color-code;
|
||||
background-color: var(--code-background);
|
||||
border-radius: $border-radius;
|
||||
color: var(--code-font-color);
|
||||
font-size: 0.85em;
|
||||
line-height: 1.45;
|
||||
line-height: 1.45em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
@ -125,16 +148,15 @@
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: rgba(255, 221, 102, 1);
|
||||
background-color: var(--mark-color);
|
||||
}
|
||||
|
||||
section.footnotes {
|
||||
margin-top: 3rem;
|
||||
color: $gray-600;
|
||||
font-size: 0.9em;
|
||||
color: var(--body-font-color);
|
||||
font-size: $font-size-14;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,20 @@
|
||||
@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 {
|
||||
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 {
|
||||
@ -26,6 +40,7 @@
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:visited:hover,
|
||||
&.is-active {
|
||||
background: lighten($second-color, 5%);
|
||||
}
|
||||
@ -71,18 +86,22 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu-control:checked ~ .gblog-nav__list {
|
||||
.hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-control:checked ~ .gblog-nav__list {
|
||||
max-height: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-control:checked ~ .gblog-nav__control {
|
||||
#menu-control:checked ~ .gblog-nav__control {
|
||||
.icon.gblog_menu {
|
||||
display: none;
|
||||
}
|
||||
.icon.gblog_clear {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
@ -23,7 +23,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gblog-page__anchor {
|
||||
.gblog-post__anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -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,17 +51,21 @@
|
||||
&__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;
|
||||
}
|
||||
|
||||
.gblog-post__anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// {{< columns >}}
|
||||
@ -75,7 +79,7 @@
|
||||
padding: 0 $padding-16;
|
||||
}
|
||||
|
||||
.gblog-page__anchor {
|
||||
.gblog-post__anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -85,8 +89,8 @@
|
||||
$root: &;
|
||||
|
||||
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;
|
||||
@ -95,15 +99,11 @@
|
||||
display: inline-block;
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($main-color, 2);
|
||||
border-color: $main-color;
|
||||
background: var(--button-background);
|
||||
border-color: var(--button-border-color);
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
@ -129,9 +129,14 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.gblog-post__anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// {{< mermaid >}}
|
||||
|
@ -20,9 +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-color: $color-code;
|
||||
background: var(--accent-color-lite);
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
@ -67,3 +67,7 @@
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
|
@ -1,4 +1,10 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import "_defaults";
|
||||
@import "_color_mode";
|
||||
@import "_chroma_base";
|
||||
@import "_chroma_light";
|
||||
@import "_chroma_dark";
|
||||
|
||||
@import "_normalize";
|
||||
@import "_utils";
|
||||
@ -6,5 +12,4 @@
|
||||
@import "_base";
|
||||
|
||||
@import "_markdown";
|
||||
@import "_chroma_github";
|
||||
@import "_shortcodes";
|
||||
|