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 03:36:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev', v1.1.0

Browse Source
This commit is contained in:
Alexis Tacnet
2017-04-23 15:33:14 +02:00
parent a4392e14dd 9b2a5dedc1
commit bc7ac7e712
13 changed files with 286 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -1,5 +1,11 @@
# Changelog
> v1.1.0
- Add more speed and asynchronous loading, of fonts especially
- Add more languages to `highlightjs` that are nowadays really used, like Rust, Go, Docker, Clojure, etc. ...
- Some fixes with some Pull Requests (thx to @davidskeck, @mtn and @maiki)
> v1.0.0
- Change the set of fonts to **Nexa Bold, Raleway and Merriweather**.

27
README.md
View File

@@ -2,7 +2,7 @@
[![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000?style=plastic)](https://github.com/fuegowolf/cocoa-eh-hugo-theme/blob/master/LICENSE)
**Cocoa Enhanced** is a clean and responsive [Hugo](http://gohugo.io) [theme](https://github.com/spf13/hugoThemes/) with cool typography. The main goal of this theme is to be simple but highly customizable.
**Cocoa Enhanced** is a clean, fast and responsive [Hugo](http://gohugo.io) [theme](https://github.com/spf13/hugoThemes/) with cool typography. The main goal of this theme is to be simple and fast but highly customizable.
You can use this theme either for your blog or your personal website. A demo is available [here](https://kodewolf.com).
@@ -19,17 +19,32 @@ You can use this theme either for your blog or your personal website. A demo is
## Features
* Suited for blogging and personal webpages.
Simple but complete, here are the main features of this theme :
* Possibility to have sections with a header and a list of articles.
* Possibility to have single pages.
* Homepage with latest and best posts
* Syntax highlighting with hightlightjs.
* Homepage with latest and best posts.
* Syntax highlighting with `hightlightjs`.
* Progressive images.
* Twitter cards support.
* Disqus support.
* Responsive and **blazing fast**.
#### Differences from the original Cocoa
#### Typography
The **typography** is what makes Cocoa-EH look cool, here are the fonts used :
* *Nexa Bold* for the blog name, a strong and opinionated font
* *Raleway* for the titles, light but clearly visible
* *Merriweather* for the text, an awesome sans serif font to read without difficulties
* *Ubuntu Mono* for the code
#### Blazing fast
Everything is made here to make the theme **really fast** to load : inline CSS, deferred Javascript, fonts loaded in an asynchronous way with replacement fonts when they're not loaded, etc. ... Even with a GPRS connection, your blog is readable.
> With gzip enabled, this theme takes less than **400**ms to load entirely, and the content is readable at only **50**ms. Also scores 99/100 on Pagespeed.
### Differences from the original Cocoa
This theme is less minimalist than the original Cocoa, with some new features :

15
exampleSite/config.toml
View File

@@ -29,4 +29,17 @@ email = "you@example.com"
linkedin = "john-example-aa80ue8è"
twitter = "example"
social_banner = "img/banner.png"
posts_navigation = true
posts_navigation = true
[params.colors]
identifier = "#527fc1f"
identifier_dark = "#1a3152"
trivial = "#6a7a8b"
foreground = "#181d2a"
background = "#f9f9f9"
background_dark = "#282a36"
code = "#87a5d2"
type = "#97d28b"
special = "#ffcb8d"
value = "#96c2d7"
statement = "#ff8e91"

34
exampleSite/static/css/colors.css → layouts/partials/css/colors.css
View File

@@ -1,61 +1,61 @@
a {
color: #527fc1;
color: {{ .Param "colors.identifier" }};
}
a:hover {
color: #1a3152;
color: {{ .Param "colors.identifier_dark" }};
}
section.main .content .markdown, section.header .name, section.header nav ul li:hover {
color: #181d2a;
color: {{ .Param "colors.foreground" }};
}
section.header nav ul li {
color: #6a7a8b;
color: {{ .Param "colors.trivial" }};
}
section.main .content .markdown code {
background-color: #f9f9f9;
color: #527fc1;
background-color: {{ .Param "colors.background" }};
color: {{ .Param "colors.identifier" }};
}
section.main .content .markdown pre, section.main .content .markdown pre code {
background-color: #282a36;
color: #87a5d2;
background-color: {{ .Param "colors.background_dark" }};
color: {{ .Param "colors.code" }};
}
.hljs, .hljs-subst, .hljs-variable {
color: #87a5d2;
color: {{ .Param "colors.code" }};
}
.hljs-type {
color: #97d28b;
color: {{ .Param "colors.type" }};
}
.hljs-quote {
color: #ffcb8d;
color: {{ .Param "colors.special" }};
}
.hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-template-tag, .hljs-deletion {
color: #96c2d7;
color: {{ .Param "colors.value" }};
}
.hljs-comment {
color: #9aacbf;
color: {{ .Param "colors.trivial" }};
}
.hljs-regexp, .hljs-symbol, .hljs-template-variable {
color: #ffcb8d;
color: {{ .Param "colors.special" }};
}
.hljs-keyword, .hljs-attribute, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
color: #97d28b;
color: {{ .Param "colors.type" }};
}
.hljs-link, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-title, .hljs-section {
color: #ff8e91;
color: {{ .Param "colors.statement" }};
}
.hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
color: #97d28b;
color: {{ .Param "colors.type" }};
}

1
layouts/partials/css/highlight.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.hljs{display:block;background:white;padding:0.5em;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

220
static/css/main.v1.0.0.css → layouts/partials/css/main.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Nexa Bold';
src: url('../fonts/Nexa Bold.otf');
src: url('/fonts/Nexa Bold.otf');
}
html, body, div, span, applet, object, iframe,
@@ -82,23 +82,12 @@ body {
justify-content: flex-start;
width: 100%;
min-height: 100%;
font-weight: 500;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-weight: 400;
font-family: 'Helvetica Neue', 'Arial', sans-serif;
color: #111111;
line-height: 1.6;
text-rendering: optimizeLegibility !important;
}
@media (min-width: 600px) {
body {
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.non-narrow.zero-top-spacing {
padding-top: 0 !important;
}
}
.icon {
text-rendering: geometricPrecision !important;
}
@@ -126,14 +115,6 @@ section {
display: flex;
width: 100%;
}
@media (min-width: 600px) {
section {
padding: 0 16px;
margin-left: 100px;
margin-right: 100px;
max-width: 750px;
}
}
section.header .container {
-webkit-align-items: center;
-moz-align-items: center;
@@ -199,10 +180,10 @@ section.header nav ul a:last-child {
}
section.header nav ul li {
color: #555555;
font-weight: 500;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-family: 'Helvetica Neue', 'Arial', sans-serif;
-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);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -211,53 +192,6 @@ section.header nav ul li {
section.header nav ul li:hover {
color: #111111;
}
@media (min-width: 600px) {
section.header {
background-color: transparent;
}
section.header .container {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
section.header .container .logo {
margin: 0;
}
section.header-home .container .logo {
max-width: 180px;
margin-left: 20px;
}
section.header-home .name-home {
padding-top: 30px;
font-size: 40px;
}
section.header-home nav ul li {
font-size: 18px;
}
section.header .content {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
section.header .name {
color: #333333;
}
section.header nav {
font-size: 14px;
margin-bottom: 0;
}
section.header nav ul {
text-align: left;
}
section.header nav ul li {
color: #666666;
}
section.header nav ul li:hover {
color: #333333;
}
}
section.footer .container {
-webkit-align-items: center;
-moz-align-items: center;
@@ -302,28 +236,6 @@ section.footer .container .icons {
flex-grow: 0.5;
text-align: end;
}
@media (min-width: 600px) {
section.footer {
background-color: transparent;
}
section.footer .container {
flex-direction: row;
}
section.footer .container a {
margin-left: 3px;
margin-right: 3px;
color: #666666;
}
section.footer .container a:hover {
color: #333333;
}
section.footer .container a .icon {
font-size: 18px;
}
section.footer .container a .icon.larger {
font-size: 20px;
}
}
section.main .container {
-webkit-align-items: center;
-moz-align-items: center;
@@ -354,10 +266,10 @@ section.main .content .posts {
}
section.main .content .page-heading {
font-size: 20px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-weight: 700;
font-family: 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem;
text-transform: uppercase;
font-weight: 700;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
@@ -420,15 +332,6 @@ section.main .content .front-matter .tags ul li:hover {
section.main .content .front-matter .tags ul li a {
color: #666666;
}
@media (min-width: 600px) {
section.main .content .front-matter .date,
section.main .content .front-matter .author,
section.main .content .front-matter .tags,
section.main .content .front-matter .word-count,
section.main .content .front-matter .reading-time .middot {
display: initial;
}
}
section.main .container.f04 {
-webkit-justify-content: center;
-moz-justify-content: center;
@@ -452,34 +355,13 @@ section.main .container.f04 .content {
}
section.main .container.f04 .content .num {
margin: 30px 0px 30px 0;
font-weight: 200;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-weight: 400;
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 50px;
}
section.main .container.f04 .content .detail {
margin-bottom: 40px;
}
@media (min-width: 600px) {
section.main .container.f04 {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
section.main .container.f04 .content {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
section.main .container.f04 .content .num {
margin: 0 0 10px 0;
font-size: 32px;
}
section.main .container.f04 .content .detail {
margin-bottom: 30px;
}
}
section.main .container .content .groupby {
margin-top: 1em;
padding-left: 0.5em;
@@ -532,34 +414,6 @@ section.main .container .content .post-item {
display: flex;
list-style: none;
}
@media (min-width: 600px) {
.container {
padding: 0 30px;
}
section.header {
padding-top: 60px;
padding-bottom: 60px;
}
section.footer {
padding-top: 30px;
padding-bottom: 60px;
}
section.main {
padding-top: 0;
}
section.main .container .content .post-item {
display: flex;
list-style: none;
padding-left: 1.5em;
}
section.main .container .content .post-item .meta {
display: block;
}
section.main.post {
padding-top: 60px;
padding-bottom: 60px;
}
}
a {
color: #428bca;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
@@ -580,7 +434,7 @@ section.main .content .markdown {
font-size: 1.1em;
line-height: 1.75em;
color: #313537;
font-family: 'Merriweather', sans-serif;
font-family: serif;
font-weight: 300;
}
section.main .content .markdown h1,
@@ -590,7 +444,7 @@ section.main .content .markdown h4,
section.main .content .markdown h5,
section.main .content .markdown h6 {
font-size: 22px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-family: 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem;
font-weight: 700;
-moz-osx-font-smoothing: grayscale;
@@ -621,7 +475,7 @@ section.main .content .markdown h6 {
}
section.main .content .markdown code,
section.main .content .markdown pre {
font-family: 'Ubuntu Mono', 'Menlo', monospace;
font-family: 'Menlo', monospace;
font-size: 0.98rem;
background-color: #f7f7f7;
}
@@ -719,12 +573,6 @@ section.main .content .markdown blockquote {
section.main .content .markdown blockquote p:last-child {
margin-bottom: 0;
}
@media (min-width: 550px) {
section.main .content .markdown blockquote {
padding-right: 5rem;
padding-left: 1.25rem;
}
}
section.main .content .markdown figure {
width: 100%;
background: #fff;
@@ -738,17 +586,6 @@ section.main .content .markdown figure img {
position: static;
margin: auto;
}
@media (min-width: 769px) {
section.main .content .markdown figure {
width: 110%;
margin-left: -4%;
}
section.main .content .markdown img {
max-width: 110%;
width: 110%;
margin-left: -4%;
}
}
section.main .content .markdown table {
margin-bottom: 1rem;
width: 100%;
@@ -816,14 +653,27 @@ section.main .content .navigation a {
font-style: italic;
color: #313537;
}
@media (min-width: 570px) {
section.main .content .navigation {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
section.main .content .navigation div {
margin-top: 0em;
}
/* Fonts */
.wf-raleway-n4-active body,
.wf-raleway-n4-active section.header nav ul li,
.wf-raleway-n7-active section.main .content .page-heading,
.wf-raleway-n2-active section.main .container.f04 .content .num,
.wf-raleway-n7-active section.main .content .markdown h1,
.wf-raleway-n7-active section.main .content .markdown h2,
.wf-raleway-n7-active section.main .content .markdown h3,
.wf-raleway-n7-active section.main .content .markdown h4,
.wf-raleway-n7-active section.main .content .markdown h5,
.wf-raleway-n7-active section.main .content .markdown h6 {
font-family: 'Raleway';
}
.wf-merriweather-n3-active section.main .content .markdown {
font-family: 'Merriweather';
}
.wf-ubuntu-mono-n4-active section.main .content .markdown code,
.wf-ubuntu-mono-n4-active section.main .content .markdown pre {
font-family: 'Ubuntu Mono';
}

145
layouts/partials/css/min600px.css Normal file
View File

@@ -0,0 +1,145 @@
body {
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.non-narrow.zero-top-spacing {
padding-top: 0 !important;
}
section {
padding: 0 16px;
margin-left: 100px;
margin-right: 100px;
max-width: 750px;
}
section.header {
background-color: transparent;
}
section.header .container {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
section.header .container .logo {
margin: 0;
}
section.header-home .container .logo {
max-width: 180px;
margin-left: 20px;
}
section.header-home .name-home {
padding-top: 30px;
font-size: 40px;
}
section.header-home nav ul li {
font-size: 18px;
}
section.header .content {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
section.header .name {
color: #333333;
}
section.header nav {
font-size: 14px;
margin-bottom: 0;
}
section.header nav ul {
text-align: left;
}
section.header nav ul li {
color: #666666;
}
section.header nav ul li:hover {
color: #333333;
}
section.footer {
background-color: transparent;
}
section.footer .container {
flex-direction: row;
}
section.footer .container a {
margin-left: 3px;
margin-right: 3px;
color: #666666;
}
section.footer .container a:hover {
color: #333333;
}
section.footer .container a .icon {
font-size: 18px;
}
section.footer .container a .icon.larger {
font-size: 20px;
}
section.main .content .front-matter .date,
section.main .content .front-matter .author,
section.main .content .front-matter .tags,
section.main .content .front-matter .word-count,
section.main .content .front-matter .reading-time .middot {
display: initial;
}
section.main .container.f04 {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
section.main .container.f04 .content {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
section.main .container.f04 .content .num {
margin: 0 0 10px 0;
font-size: 32px;
}
section.main .container.f04 .content .detail {
margin-bottom: 30px;
}
.container {
padding: 0 30px;
}
section.header {
padding-top: 60px;
padding-bottom: 60px;
}
section.footer {
padding-top: 30px;
padding-bottom: 60px;
}
section.main {
padding-top: 0;
}
section.main .container .content .post-item {
display: flex;
list-style: none;
padding-left: 1.5em;
}
section.main .container .content .post-item .meta {
display: block;
}
section.main.post {
padding-top: 60px;
padding-bottom: 60px;
}
section.main .content .markdown blockquote {
padding-right: 5rem;
padding-left: 1.25rem;
}
section.main .content .navigation {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
section.main .content .navigation div {
margin-top: 0em;
}

9
layouts/partials/css/min769px.css Normal file
View File

@@ -0,0 +1,9 @@
section.main .content .markdown figure {
width: 110%;
margin-left: -4%;
}
section.main .content .markdown img {
max-width: 110%;
width: 110%;
margin-left: -4%;
}

0
static/css/progressively.min.css → layouts/partials/css/progressively.min.css vendored
View File

14
layouts/partials/footer_scripts.html
View File

@@ -1,3 +1,12 @@
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Raleway:400,600,700', 'Merriweather:300,300i,700,700i', 'Ubuntu+Mono:400,700']
}
});
</script>
{{ if .Site.Params.highlightjs }}
<script src="{{ .Site.BaseURL }}js/highlight.min.js" defer></script>
{{ range .Site.Params.highlightjslanguages }}
@@ -21,8 +30,3 @@
{{ end }}
};
</script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">

30
layouts/partials/head_includes.html
View File

@@ -1,13 +1,37 @@
<!-- CSS -->
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.v1.0.0.css">
<style media="screen">
{{ partial "css/main.css" . | safeCSS }}
</style>
<style media="(min-width: 600px)">
{{ partial "css/min600px.css" . | safeCSS }}
</style>
<style media="(min-width: 769px)">
{{ partial "css/min769px.css" . | safeCSS }}
</style>
<noscript>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700" rel="stylesheet">
</noscript>
{{ if .Site.Params.highlightjs }}
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.min.css">
<style type="text/css" media="screen">
{{ partial "css/highlight.min.css" . | safeCSS }}
</style>
{{ end }}
{{ if .Site.Params.progressively }}
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/progressively.min.css">
<style type="text/css" media="screen">
{{ partial "css/progressively.min.css" . | safeCSS }}
</style>
{{ end }}
{{ if .Site.Params.colors }}
<style type="text/css" media="screen">
{{ partial "css/colors.css" . | safeCSS }}
</style>
{{ end }}
{{ range .Site.Params.extracssfiles }}

1
static/css/highlight.min.css vendored
View File

@@ -1 +0,0 @@
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

5
static/js/highlight.min.js vendored
View File

File diff suppressed because one or more lines are too long