diff --git a/assets/sprites/geekblog.svg b/assets/sprites/geekblog.svg deleted file mode 100644 index 0964b0b..0000000 --- a/assets/sprites/geekblog.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index f1e3e51..4255b94 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -84,4 +84,5 @@ params: geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy geekblogImageLazyLoading: true + geekblogDarkModeDim: true geekblogTagsToMenu: true diff --git a/exampleSite/content/posts/features/code-blocks.md b/exampleSite/content/posts/features/code-blocks.md new file mode 100644 index 0000000..1212958 --- /dev/null +++ b/exampleSite/content/posts/features/code-blocks.md @@ -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 `` 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: + + +```markdown +{{}} +# some code +echo "Hello World" +{{}} +``` + +**Example:** + + + + +{{< highlight Shell "linenos=table" >}} +# some code +echo "Hello World" +{{< /highlight >}} + + + diff --git a/exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png b/exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png new file mode 100644 index 0000000..aa88b41 Binary files /dev/null and b/exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png differ diff --git a/exampleSite/content/posts/features/dark-mode/index.md b/exampleSite/content/posts/features/dark-mode/index.md new file mode 100644 index 0000000..c713d06 --- /dev/null +++ b/exampleSite/content/posts/features/dark-mode/index.md @@ -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. diff --git a/exampleSite/content/posts/features/theming/images/theme-example.png b/exampleSite/content/posts/features/theming/images/theme-example.png new file mode 100644 index 0000000..c5ce087 Binary files /dev/null and b/exampleSite/content/posts/features/theming/images/theme-example.png differ diff --git a/exampleSite/content/posts/features/theming.md b/exampleSite/content/posts/features/theming/index.md similarity index 67% rename from exampleSite/content/posts/features/theming.md rename to exampleSite/content/posts/features/theming/index.md index edbdc18..3ef0e14 100644 --- a/exampleSite/content/posts/features/theming.md +++ b/exampleSite/content/posts/features/theming/index.md @@ -8,12 +8,24 @@ tags: - Features --- -Personalize the look of your site. - - - {{< 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:** + + + +{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}} + + + ## 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 ``` + +Happy customizing! diff --git a/exampleSite/content/posts/post-with-images/index.md b/exampleSite/content/posts/post-with-images/index.md index e082eff..51d080b 100644 --- a/exampleSite/content/posts/post-with-images/index.md +++ b/exampleSite/content/posts/post-with-images/index.md @@ -78,7 +78,7 @@ resources: credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)" --- -{{}} +{{}} ``` diff --git a/exampleSite/content/posts/usage/configuration.md b/exampleSite/content/posts/usage/configuration.md index 35799cd..d4d0ca2 100644 --- a/exampleSite/content/posts/usage/configuration.md +++ b/exampleSite/content/posts/usage/configuration.md @@ -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 " 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 " line to the footer. # Could be used if you want to give credits to your hosting provider. geekblogHostedOn: diff --git a/exampleSite/content/posts/usage/getting-started.md b/exampleSite/content/posts/usage/getting-started.md index 6943fa4..4908e03 100644 --- a/exampleSite/content/posts/usage/getting-started.md +++ b/exampleSite/content/posts/usage/getting-started.md @@ -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/) diff --git a/exampleSite/static/custom.css b/exampleSite/static/custom.css index 1cf3314..7be1537 100644 --- a/exampleSite/static/custom.css +++ b/exampleSite/static/custom.css @@ -1,3 +1,7 @@ +:root { + --code-max-height: 60rem; +} + .icon-grid { width: 8rem; height: 8rem; diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example new file mode 100644 index 0000000..b9ae4f9 --- /dev/null +++ b/exampleSite/static/custom.css.example @@ -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; + } +} diff --git a/images/readme.png b/images/readme.png index 7092677..51e02ef 100644 Binary files a/images/readme.png and b/images/readme.png differ diff --git a/images/screenshot-plain.png b/images/screenshot-plain.png deleted file mode 100644 index 3573d49..0000000 Binary files a/images/screenshot-plain.png and /dev/null differ diff --git a/images/screenshot.png b/images/screenshot.png index b570a71..737391c 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png index 3ea8daf..1da2116 100644 Binary files a/images/tn.png and b/images/tn.png differ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 035927e..9660710 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -16,7 +16,7 @@ {{ partial "svg-icon-symbols" . }} -
+
{{ partial "site-header" . }}
diff --git a/layouts/partials/content.html b/layouts/partials/content.html index c35e992..0aff871 100644 --- a/layouts/partials/content.html +++ b/layouts/partials/content.html @@ -1 +1,4 @@ -{{ .Content | replaceRE `` `` | safeHTML }} +{{- $content := .Content -}} +{{- $content = $content | replaceRE `` `` | safeHTML -}} +{{- $content = $content | replaceRE `((?:.|\n)+?
)` `
${1}
` | safeHTML -}} +{{- $content -}} diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html index 6349e30..eb6086d 100644 --- a/layouts/partials/head/others.html +++ b/layouts/partials/head/others.html @@ -1,3 +1,5 @@ + + diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index bf9a6d5..ffe4ad1 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -1,14 +1,33 @@
-
- - - - {{ .Site.Title }} +
+
+
+ + + + {{ .Site.Title }} + + {{ with .Site.Params.subtitle }} + {{ . }} + {{ end }} + +
+
+ + + {{ i18n "button_toggle_dark" }} + + + + {{ i18n "button_toggle_dark" }} + + + + {{ i18n "button_toggle_dark" }} + + - {{ with .Site.Params.subtitle }} - {{ . }} - {{ end }} - +
    diff --git a/src/iconfont/uEA1C-brightness_auto.svg b/src/iconfont/uEA1C-brightness_auto.svg new file mode 100644 index 0000000..e05a432 --- /dev/null +++ b/src/iconfont/uEA1C-brightness_auto.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconfont/uEA1D-brightness_dark.svg b/src/iconfont/uEA1D-brightness_dark.svg new file mode 100644 index 0000000..6d124be --- /dev/null +++ b/src/iconfont/uEA1D-brightness_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconfont/uEA1E-brightness_light.svg b/src/iconfont/uEA1E-brightness_light.svg new file mode 100644 index 0000000..70336f8 --- /dev/null +++ b/src/iconfont/uEA1E-brightness_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/brightness_auto.svg b/src/icons/brightness_auto.svg new file mode 100644 index 0000000..b34dcbb --- /dev/null +++ b/src/icons/brightness_auto.svg @@ -0,0 +1,5 @@ + + +brightness_auto + + diff --git a/src/icons/brightness_dark.svg b/src/icons/brightness_dark.svg new file mode 100644 index 0000000..f175efb --- /dev/null +++ b/src/icons/brightness_dark.svg @@ -0,0 +1,5 @@ + + +brightness_dark + + diff --git a/src/icons/brightness_light.svg b/src/icons/brightness_light.svg new file mode 100644 index 0000000..ad07c42 --- /dev/null +++ b/src/icons/brightness_light.svg @@ -0,0 +1,5 @@ + + +brightness_light + + diff --git a/src/js/darkmode.js b/src/js/darkmode.js new file mode 100644 index 0000000..e9c2393 --- /dev/null +++ b/src/js/darkmode.js @@ -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; +} diff --git a/src/js/mermaid-loader.js b/src/js/mermaid-loader.js index 4499675..ef2beab 100644 --- a/src/js/mermaid-loader.js +++ b/src/js/mermaid-loader.js @@ -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", diff --git a/src/sass/_base.scss b/src/sass/_base.scss index c693d66..21f7759 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -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; } } diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss new file mode 100644 index 0000000..812df77 --- /dev/null +++ b/src/sass/_chroma_base.scss @@ -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; + } +} diff --git a/src/sass/_chroma_dark.scss b/src/sass/_chroma_dark.scss new file mode 100644 index 0000000..d7e0af9 --- /dev/null +++ b/src/sass/_chroma_dark.scss @@ -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; + } +} diff --git a/src/sass/_chroma_github.scss b/src/sass/_chroma_github.scss deleted file mode 100644 index 1dfb522..0000000 --- a/src/sass/_chroma_github.scss +++ /dev/null @@ -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; -} diff --git a/src/sass/_chroma_light.scss b/src/sass/_chroma_light.scss new file mode 100644 index 0000000..bc43f82 --- /dev/null +++ b/src/sass/_chroma_light.scss @@ -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; + } +} diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss new file mode 100644 index 0000000..9699d97 --- /dev/null +++ b/src/sass/_color_mode.scss @@ -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); + } + } +} diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss index c458044..d22315a 100644 --- a/src/sass/_defaults.scss +++ b/src/sass/_defaults.scss @@ -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; diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index c0e28bb..7d1091c 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -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; } } diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss index cc58cf5..b192656 100644 --- a/src/sass/_mobile.scss +++ b/src/sass/_mobile.scss @@ -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 { - max-height: 100%; - visibility: visible; -} - -#menu-control:checked ~ .gblog-nav__control { - .icon.gblog_menu { + .hidden-mobile { 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; + } } } diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index b7d17c6..2eb99bc 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -3,13 +3,13 @@ margin-top: $padding-16; margin-bottom: $padding-16; - border: $border-1 solid $gray-200; + border: $border-1 solid var(--accent-color); border-radius: $border-radius; overflow: hidden; &__head { - background: $gray-100; + background: var(--accent-color-lite); padding: $padding-8 $padding-16; cursor: pointer; } @@ -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 >}} diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss index ddcb172..2e4bef3 100644 --- a/src/sass/_utils.scss +++ b/src/sass/_utils.scss @@ -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; +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 7445b21..87d51c4 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -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";