13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

Add inverted variables option (#110)

Browse Source 
* add inverted variables option

* create inverted styles

* add missed styles

* add myself as contributor
This commit is contained in:
Abner Campanha
2018-11-12 09:42:52 -02:00
committed by Luiz F. A. de Prá
parent 55c424f4d1
commit 720f7518a6
9 changed files with 156 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CONTRIBUTORS.md
View File

@@ -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)

39
assets/scss/_base_inverted.scss Normal file
View 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;
}
}

36
assets/scss/_content_inverted.scss Normal file
View 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;
}
}
}
}
}
}
}
}

7
assets/scss/_footer_inverted.scss Normal file
View File

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

45
assets/scss/_navigation_inverted.scss Normal file
View 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;
}
}
}
}
}

7
assets/scss/_variables.scss
View File

@@ -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;

5
assets/scss/coder-inverted.scss Normal file
View File

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

3
exampleSite/config.toml
View File

@@ -32,6 +32,9 @@ disqusShortname = "yourdiscussshortname"
rtl = false
# Use inverted colors
inverted = false
# Custom CSS
custom_css = []

14
layouts/_default/baseof.html
View File

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