Add inverted variables option (#110)
* add inverted variables option * create inverted styles * add missed styles * add myself as contributor
This commit is contained in:
parent
55c424f4d1
commit
720f7518a6
|
@ -22,3 +22,4 @@
|
||||||
- [Vinícius dos Santos Oliveira](https://github.com/vinipsmaker)
|
- [Vinícius dos Santos Oliveira](https://github.com/vinipsmaker)
|
||||||
- [Vlad Ionescu](https://github.com/Vlaaaaaaad)
|
- [Vlad Ionescu](https://github.com/Vlaaaaaaad)
|
||||||
- [Joseph Ting](https://github.com/josephting)
|
- [Joseph Ting](https://github.com/josephting)
|
||||||
|
- [Abner Campanha](https://github.com/abnerpc)
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
body.inverted {
|
||||||
|
.footer {
|
||||||
|
a {
|
||||||
|
color: $link-color-inverted;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -9,3 +9,10 @@ $fg-color: #212121 !default;
|
||||||
$alt-bg-color: #E0E0E0 !default;
|
$alt-bg-color: #E0E0E0 !default;
|
||||||
$alt-fg-color: #000 !default;
|
$alt-fg-color: #000 !default;
|
||||||
$link-color: #1565c0 !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;
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "variables";
|
||||||
|
@import "base_inverted";
|
||||||
|
@import "content_inverted";
|
||||||
|
@import "navigation_inverted";
|
||||||
|
@import "footer_inverted";
|
|
@ -32,6 +32,9 @@ disqusShortname = "yourdiscussshortname"
|
||||||
|
|
||||||
rtl = false
|
rtl = false
|
||||||
|
|
||||||
|
# Use inverted colors
|
||||||
|
inverted = false
|
||||||
|
|
||||||
# Custom CSS
|
# Custom CSS
|
||||||
custom_css = []
|
custom_css = []
|
||||||
|
|
||||||
|
|
|
@ -40,6 +40,18 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ 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 }}
|
{{ range .Site.Params.custom_css }}
|
||||||
<link rel="stylesheet" href="{{ . | absURL }}">
|
<link rel="stylesheet" href="{{ . | absURL }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
@ -55,7 +67,7 @@
|
||||||
{{ .Hugo.Generator }}
|
{{ .Hugo.Generator }}
|
||||||
</head>
|
</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">
|
<main class="wrapper">
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue