diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 072d871..f1b0470 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -22,3 +22,4 @@ - [VinÃcius dos Santos Oliveira](https://github.com/vinipsmaker) - [Vlad Ionescu](https://github.com/Vlaaaaaaad) - [Joseph Ting](https://github.com/josephting) +- [Abner Campanha](https://github.com/abnerpc) diff --git a/assets/scss/_base_inverted.scss b/assets/scss/_base_inverted.scss new file mode 100644 index 0000000..a592ace --- /dev/null +++ b/assets/scss/_base_inverted.scss @@ -0,0 +1,39 @@ +body.inverted { + + color: $fg-color-inverted; + background-color: $bg-color-inverted; + + a { + color: $link-color-inverted; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $alt-fg-color-inverted; + } + + code { + background-color: $alt-bg-color-inverted; + color: $fg-color-inverted; + } + + pre { + code { + background-color: inherit; + color: inherit; + } + } + + blockquote { + border-left: 2px solid $alt-bg-color-inverted; + } + + table td, table th { + border: 2px solid $alt-fg-color-inverted; + } + +} diff --git a/assets/scss/_content_inverted.scss b/assets/scss/_content_inverted.scss new file mode 100644 index 0000000..fbd88a9 --- /dev/null +++ b/assets/scss/_content_inverted.scss @@ -0,0 +1,36 @@ +body.inverted { + + .content { + + .list { + ul { + li { + a { + color: $fg-color-inverted; + &:hover, + &:focus { + color: $link-color-inverted + } + } + } + } + } + + .centered { + .about { + ul { + li { + a { + color: $fg-color-inverted; + &:hover, + &:focus { + color: $link-color-inverted; + } + } + } + } + } + } + } + +} diff --git a/assets/scss/_footer_inverted.scss b/assets/scss/_footer_inverted.scss new file mode 100644 index 0000000..93ccad3 --- /dev/null +++ b/assets/scss/_footer_inverted.scss @@ -0,0 +1,7 @@ +body.inverted { + .footer { + a { + color: $link-color-inverted; + } + } +} \ No newline at end of file diff --git a/assets/scss/_navigation_inverted.scss b/assets/scss/_navigation_inverted.scss new file mode 100644 index 0000000..2c1c373 --- /dev/null +++ b/assets/scss/_navigation_inverted.scss @@ -0,0 +1,45 @@ +body.inverted { + + + .navigation { + a, span { + color: $fg-color-inverted; + } + a { + &:hover, + &:focus { + color: $link-color-inverted; + } + } + .navigation-list { + @media only screen and (max-device-width : 768px) { + background-color: $bg-color-inverted; + border-top: solid 2px $alt-bg-color-inverted; + border-bottom: solid 2px $alt-bg-color-inverted; + } + .menu-separator { + @media only screen and (max-device-width : 768px) { + border-top: 2px solid $fg-color-inverted; + } + } + } + #menu-toggle { + @media only screen and (max-device-width : 768px) { + &:checked + label { + color: $alt-bg-color-inverted; + } + } + } + .menu-button { + display: none; + @media only screen and (max-device-width : 768px) { + color: $fg-color-inverted; + &:hover, + &:focus { + color: $link-color-inverted; + } + } + } + } + +} \ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 15dc925..a147dc2 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -9,3 +9,10 @@ $fg-color: #212121 !default; $alt-bg-color: #E0E0E0 !default; $alt-fg-color: #000 !default; $link-color: #1565c0 !default; + +// Colors inverted +$bg-color-inverted: #212121 !default; +$fg-color-inverted: #fafafa !default; +$alt-bg-color-inverted: #424242 !default; +$alt-fg-color-inverted: #fafafa !default; +$link-color-inverted: #f44336 !default; diff --git a/assets/scss/coder-inverted.scss b/assets/scss/coder-inverted.scss new file mode 100644 index 0000000..6562cbf --- /dev/null +++ b/assets/scss/coder-inverted.scss @@ -0,0 +1,5 @@ +@import "variables"; +@import "base_inverted"; +@import "content_inverted"; +@import "navigation_inverted"; +@import "footer_inverted"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b6cd3a4..9bbd910 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -32,6 +32,9 @@ disqusShortname = "yourdiscussshortname" rtl = false + # Use inverted colors + inverted = false + # Custom CSS custom_css = [] diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4c7d528..a40594a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -40,6 +40,18 @@ {{ end }} {{ end }} + {{ if .Site.Params.inverted }} + {{ if .Site.IsServer }} + {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" "enableSourceMap" true ) }} + {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts }} + + {{ else }} + {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" ) }} + {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts | minify | fingerprint }} + + {{ end }} + {{ end }} + {{ range .Site.Params.custom_css }} {{ end }} @@ -55,7 +67,7 @@ {{ .Hugo.Generator }} -
+