ettore.dreucci/cocoa-eh-hugo-theme
1
0
Fork 0
mirror of https://github.com/Noettore/cocoa-eh-hugo-theme.git synced 2025-10-15 11:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Color changes to background and compensated colors

Browse Source 
* Fix overly dark shades
* Remove word count from posts
* Markup changes for single posts headers
* Rename config
* Fix page heading
This commit is contained in:
Nishanth Shanmugham
2015-10-03 18:31:59 -05:00
parent d99e82e683
commit 29a5b22882
5 changed files with 90 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
layouts/partials/header_only_narrow.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ partial "head.html" . }}
<body lang="{{ .Site.Params.Lang }}">
<div class="section header narrow">
<div class="container">
<div class="content">
<nav>
<ul>
<a href="/posts"><li>Posts</li></a>
<a href="/about"><li>About</li></a>
<a href="/code"><li>Code</li></a>
</ul>
</nav>
<a href="/"><div class="name">{{ .Site.Params.Author }}</div></a>
</div>
</div>
</div>
<div class="section icons">
<div class="container">
<div class="content">
{{ if .Site.Params.GitHub }}
<a href="{{ .Site.Params.GitHub }}" target="_blank">
<i class="icon ion-social-github"></i>
</a>
{{ end }}
{{ if .Site.Params.Twitter }}
<a href="{{ .Site.Params.Twitter }}" target="_blank">
<i class="icon ion-social-twitter"></i>
</a>
{{ end }}
{{ if .Site.Params.LinkedIn }}
<a href="{{ .Site.Params.LinkedIn }}" target="_blank">
<i class="icon ion-social-linkedin"></i>
</a>
{{ end }}
{{ if .Site.Params.Facebook }}
<a href="{{ .Site.Params.Facebook }}" target="_blank">
<i class="icon ion-social-facebook larger"></i>
</a>
{{ end }}
{{ if .Site.Params.SoundCloud }}
<a href="{{ .Site.Params.SoundCloud }}" target="_blank">
<i class="icon ion-ios-musical-notes larger"></i>
</a>
{{ end }}
{{ if .Site.Params.Email }}
<a href="mailto:{{ .Site.Params.Email }}">
<i class="icon ion-ios-email larger"></i>
</a>
{{ end }}
</div>
</div>
</div>

1
layouts/partials/page-heading.html
View File

@@ -5,4 +5,3 @@
{{ .Title }} {{ .Title }}
{{ end }} {{ end }}
</div> </div>

15
layouts/posts/single.html
View File

@@ -1,18 +1,17 @@
<!DOCTYPE html> {{ partial "header_only_narrow.html" . }}
<html lang="{{ .Site.LanguageCode }}">
{{ partial "head.html" . }}
<body lang="{{ .Site.Params.Lang }}">
<div class="section main post"> <div class="section main post">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<div class="front-matter"> <div class="front-matter">
<a href="{{ .Permalink }}">{{ partial "page-heading.html" . }}</a> <div class="title-container">
<div class="page-heading">
<a href="{{ .Permalink }}">{{ if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }}{{ end }}</a>
</div>
<div class="initials"><a href="{{ .Site.BaseUrl }}">{{ .Site.Params.Initials }}</a></div>
</div>
<div class="meta"> <div class="meta">
<div class="date">{{ .Date.Format .Site.Params.DateForm }}</div> <div class="date">{{ .Date.Format .Site.Params.DateForm }}</div>
<div class="word-count"><div class="middot"></div>{{ if eq 1 .FuzzyWordCount }}{{ .FuzzyWordCount }} word{{ else }}{{ .FuzzyWordCount }} words{{ end }}</div>
<div class="reading-time"><div class="middot"></div>{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}</div> <div class="reading-time"><div class="middot"></div>{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}</div>
</div> </div>
</div> </div>

21
main.less
View File

@@ -19,8 +19,11 @@
@black: #333; @black: #333;
@gray: #b7b7b7; @gray: #b7b7b7;
@accent: #0096cc; @accent: #0096cc; // jasonlong.me blue
@black-background: @black; @background: #f7f7f7;
@compensated-black: #555;
@compensated-gray: #999;
@compensated-gray-hover: @gray;
@white: #fefefe; @white: #fefefe;
@milk: #fefefe; @milk: #fefefe;
@@ -170,7 +173,7 @@ body {
// Header section // Header section
.section.header { .section.header {
background-color: @black-background; background-color: @background;
.container { .container {
.align-items(center); .align-items(center);
@@ -185,7 +188,7 @@ body {
.name { .name {
.heading(); .heading();
color: @white; color: @compensated-black;
} }
nav { nav {
@@ -214,11 +217,11 @@ body {
} }
ul li { ul li {
color: @milk; color: @compensated-gray;
.transition(~'color @{transition-speed-1} @{in-sine}'); .transition(~'color @{transition-speed-1} @{in-sine}');
&:hover { &:hover {
color: @white color: @compensated-gray-hover;
} }
} }
} }
@@ -262,7 +265,7 @@ body {
// Icons // Icons
.section.icons { .section.icons {
background-color: @black-background; background-color: @background;
.container { .container {
.align-items(center); .align-items(center);
@@ -273,7 +276,7 @@ body {
a { a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: @milk; color: @compensated-gray;
.transition(~'color @{transition-speed-1} @{in-sine}'); .transition(~'color @{transition-speed-1} @{in-sine}');
&:first-child { &:first-child {
@@ -285,7 +288,7 @@ body {
} }
&:hover { &:hover {
color: @white; color: @compensated-gray-hover;
} }
.icon { .icon {

14
static/css/main.css
View File

@@ -150,7 +150,7 @@ body {
} }
} }
.section.header { .section.header {
background-color: #333333; background-color: #f7f7f7;
} }
.section.header .container { .section.header .container {
-webkit-align-items: center; -webkit-align-items: center;
@@ -187,7 +187,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #333333; color: #333333;
color: #fefefe; color: #555555;
} }
.section.header nav { .section.header nav {
font-size: 13px; font-size: 13px;
@@ -214,14 +214,14 @@ body {
margin-right: 0; margin-right: 0;
} }
.section.header nav ul li { .section.header nav ul li {
color: #fefefe; color: #999999;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
.section.header nav ul li:hover { .section.header nav ul li:hover {
color: #fefefe; color: #b7b7b7;
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.section.header { .section.header {
@@ -257,7 +257,7 @@ body {
} }
} }
.section.icons { .section.icons {
background-color: #333333; background-color: #f7f7f7;
} }
.section.icons .container { .section.icons .container {
-webkit-align-items: center; -webkit-align-items: center;
@@ -272,7 +272,7 @@ body {
.section.icons .content a { .section.icons .content a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: #fefefe; color: #999999;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -285,7 +285,7 @@ body {
margin-right: 0; margin-right: 0;
} }
.section.icons .content a:hover { .section.icons .content a:hover {
color: #fefefe; color: #b7b7b7;
} }
.section.icons .content a .icon { .section.icons .content a .icon {
font-size: 16px; font-size: 16px;