Add inverted variables option (#110)

Abner Campanha

12.42.2018 720f7518a6de1ecf37e12bd3153817ba2e245152

Add inverted variables option (#110)

* add inverted variables option

* create inverted styles

* add missed styles

* add myself as contributor

 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)

 assets/scss/_base_inverted.scss

New file
@@ -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;
  }

}

 assets/scss/_content_inverted.scss

New file
@@ -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;
              }
            }
          }
        }
      }
    }
  }

}

 assets/scss/_footer_inverted.scss

New file
@@ -0,0 +1,7 @@
body.inverted {
  .footer {
    a {
      color: $link-color-inverted;
    }
  }
}

 assets/scss/_navigation_inverted.scss

New file
@@ -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;
        }
      }
    }
  }

}

 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;

 assets/scss/coder-inverted.scss

New file
@@ -0,0 +1,5 @@
@import "variables";
@import "base_inverted";
@import "content_inverted";
@import "navigation_inverted";
@import "footer_inverted";

 exampleSite/config.toml

@@ -32,6 +32,9 @@

    rtl = false

    # Use inverted colors
    inverted = false

    # Custom CSS
    custom_css = []


 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" . }}