From 720f7518a6de1ecf37e12bd3153817ba2e245152 Mon Sep 17 00:00:00 2001
From: Abner Campanha <abnerpc@gmail.com>
Date: Mon, 12 Nov 2018 11:42:52 +0000
Subject: [PATCH] Add inverted variables option (#110)
---
exampleSite/config.toml | 3 +
layouts/_default/baseof.html | 14 ++++
assets/scss/_base_inverted.scss | 39 +++++++++++++
assets/scss/_footer_inverted.scss | 7 ++
assets/scss/coder-inverted.scss | 5 +
assets/scss/_content_inverted.scss | 36 ++++++++++++
assets/scss/_variables.scss | 7 ++
assets/scss/_navigation_inverted.scss | 45 +++++++++++++++
CONTRIBUTORS.md | 1
9 files changed, 156 insertions(+), 1 deletions(-)
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 @@
$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 @@
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 }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+ {{ 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 }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+ {{ end }}
+ {{ end }}
+
{{ range .Site.Params.custom_css }}
<link rel="stylesheet" href="{{ . | absURL }}">
{{ end }}
@@ -55,7 +67,7 @@
{{ .Hugo.Generator }}
</head>
- <body class="{{ if .Site.Params.rtl }}rtl{{ end }}">
+ <body class="{{ if .Site.Params.rtl }}rtl{{ end }} {{ if .Site.Params.inverted }}inverted{{ end }}">
<main class="wrapper">
{{ partial "header.html" . }}
--
Gitblit v1.10.0