theme colors now configured via CSS file, gyorb/master #40

master
bickhaus 2019-10-29 11:10:29 -05:00
parent 84e7c48409
commit e65c6a3b8f
5 changed files with 9 additions and 83 deletions

View File

@ -12,6 +12,7 @@
* read more link style
* code block background now transparent
* date format now D Mon YYYY
* theme colors are changed via css file
### Fixed
* fix breaking change in mainSections introduced in Hugo v0.57.0

View File

@ -5,7 +5,7 @@ Simple minimalistic dark theme for [Hugo](https://gohugo.io/).
## Features
* Responsive minimalistic design
* Configurable theme colors
* Configure theme colors via CSS file
* Syntax highlight with builtin [Chroma](http://gohugo.io/content-management/syntax-highlighting/)
* [OpenGraph](http://ogp.me/), [Twitter cards](https://dev.twitter.com/cards/overview) support
* [Disqus](https://disqus.com/) comments support
@ -72,12 +72,5 @@ pygmentsCodeFences = true
twitter = "twitter id"
linkedin = "linkedin id"
email = "myemail"
[params.colors]
# hugo-dusk colors
background = "#101010" # background color for the site
main = "#99cc66"
text = "#dbdbdb"
code-quote-bg = "#1D1F21" # background color for quotes and code blocks
copyright = "#404040" # copyright text color
theme_colors = "color-dark"
~~~~

View File

@ -49,11 +49,4 @@ pygmentsCodeFences = true
#gitlab = "gitlab id"
twitter = "twitter id"
#linkedin = "linkedin id"
[params.colors]
# hugo-dusk colors
background = "#101010" # background color for the site
main = "#15b22c"
text = "#dbdbdb"
code-quote-bg = "#1D1F21" # background color for quotes and code blocks
copyright = "#b9bcbf" # copyright text color
theme_colors = "color-dark"

View File

@ -14,9 +14,11 @@
<link rel="stylesheet" href="/css/layout.css" />
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<style type="text/css">
{{ partial "theme-colors.css" . | safeCSS }}
</style>
{{ if isset .Site.Params "theme_colors" }}
<link rel="stylesheet" href="/css/{{ .Site.Params.theme_colors }}.css" />
{{ else }}
<link rel="stylesheet" href="/css/color-dark.css" />
{{ end }}
{{ template "_internal/google_analytics_async.html" . }}

View File

@ -1,63 +0,0 @@
body {
background-color: {{ .Param "colors.background" }};
color: {{ .Param "colors.text" }};
}
a { color: {{ .Param "colors.text" }}; }
pre {
background: {{ .Param "colors.code-quote-bg" }};
border: 1px solid {{ .Param "colors.text" }};
border-radius: 5px;
}
code {
background-color: transparent;
}
blockquote {
background: {{ .Param "colors.code-quote-bg" }};
border-left: 3px solid {{ .Param "colors.text" }};
}
table {
margin: 1em auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid {{ .Param "colors.text" }};
}
th {
background: {{ .Param "colors.text" }};
color: {{ .Param "colors.background" }};
}
.siteTitle a { color: {{ .Param "colors.main" }}; }
.post .content h1{ color: {{ .Param "colors.main" }}; }
.post .content h2{ color: {{ .Param "colors.main" }}; }
.post .content h3{ color: {{ .Param "colors.main" }}; }
.post .content h4{ color: {{ .Param "colors.main" }}; }
.post .content h5{ color: {{ .Param "colors.main" }}; }
.post .content h6{ color: {{ .Param "colors.main" }}; }
.post .content a:hover { color: {{ .Param "colors.main" }}; }
.social-link:hover { color: {{ .Param "colors.main" }}; }
.nav-item-title:hover { color: {{ .Param "colors.main" }}; }
.tag a:hover { color: {{ .Param "colors.main" }}; }
.copyright { color: {{ .Param "colors.copyright" }} }
.poweredby { color: {{ .Param "colors.copyright" }} }
.poweredby a { color: {{ .Param "colors.copyright" }}; }
.post-preview .title a{ color: {{ .Param "colors.main" }}; }
.content-item a:hover{
text-decoration: underline;
color: {{ .Param "colors.main" }};
}
.post-list .title { color: {{ .Param "colors.main" }}; }
.rmore { color: {{ .Param "colors.text" }}; }
.rmore:hover { color: {{ .Param "colors.main" }}; }
.terms .term a:hover {
text-decoration: underline;
color: {{ .Param "colors.main" }};
}