Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/the2ne/hugo-frais.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorOlivier Fredon <the2ne@gmail.com>2016-10-16 17:44:10 +0300
committerOlivier Fredon <the2ne@gmail.com>2016-10-16 17:44:10 +0300
commit3106e52ee8a3a823deece04e887070b94064269a (patch)
treed607744a6476584c048ca03af437d02de6b1a28d
parent769a97c0f1364f9bde3ddd6f8e10470528658bc7 (diff)
layout and typo
-rw-r--r--layouts/_default/list.html24
-rw-r--r--layouts/_default/single.html40
-rw-r--r--layouts/index.html23
-rw-r--r--layouts/partials/footer.html3
-rw-r--r--layouts/partials/header.html2
-rw-r--r--layouts/partials/post-list.html14
-rw-r--r--layouts/partials/post-meta.html6
-rw-r--r--static/css/style.css131
-rw-r--r--static/sass/_mixins.scss6
-rw-r--r--static/sass/custom/global.scss11
-rw-r--r--static/sass/custom/layout.scss117
-rw-r--r--static/sass/custom/typography.scss3
12 files changed, 315 insertions, 65 deletions
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index b746f4e..05fe822 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,18 +1,16 @@
{{ partial "head" . }}
-<body class="list-template">
- <div class="page">
- <section class="header-wrapper">
- {{ partial "header" . }}
- {{ partial "navigation" . }}
- </section>
- <main class="content" role="main" id="main-content">
- <h1>{{ .Title }}</h1>
- {{ partial "post-list" . }}
- {{ partial "pagination" . }}
- </main>
- {{ partial "footer" . }}
- </div>
+<body class="template template--list">
+ <section class="header-wrapper">
+ {{ partial "header" . }}
+ {{ partial "navigation" . }}
+ </section>
+ <main class="content" role="main" id="main-content">
+ <h1>{{ .Title }}</h1>
+ {{ partial "post-list" . }}
+ {{ partial "pagination" . }}
+ </main>
+ {{ partial "footer" . }}
{{ partial "js" . }}
</body>
</html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3406891..d4cad82 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,26 +1,24 @@
{{ partial "head" . }}
-<body class="post-template">
- <div class="page">
- <section class="header-wrapper">
- {{ partial "header" . }}
- {{ partial "navigation" . }}
- </section>
- <main class="content" role="main" id="main-content" itemscope itemtype="http://schema.org/Article">
- <article class="post">
- <header>
- <h1 class="post-title" itemprop="name">{{ .Title }}</h1>
- </header>
- <section class="post-content" itemprop="articleBody">
- {{ .Content }}
- </section>
- <footer class="post-meta">
- {{ partial "post-meta" . }}
- </footer>
- </article>
- </main>
- {{ partial "footer" . }}
- </div>
+<body class="template template--post">
+ <section class="header-wrapper">
+ {{ partial "header" . }}
+ {{ partial "navigation" . }}
+ </section>
+ <main class="content" role="main" id="main-content" itemscope itemtype="http://schema.org/Article">
+ <article class="post">
+ <header>
+ <h1 class="post-title" itemprop="name">{{ .Title }}</h1>
+ </header>
+ <section class="post-content" itemprop="articleBody">
+ {{ .Content }}
+ </section>
+ <footer class="post-meta">
+ {{ partial "post-meta" . }}
+ </footer>
+ </article>
+ </main>
+ {{ partial "footer" . }}
{{ partial "js" . }}
</body>
</html>
diff --git a/layouts/index.html b/layouts/index.html
index 0b0f582..7b6e3ea 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,17 +1,16 @@
{{ partial "head" . }}
-<body class="home-template">
- <div class="page">
- <section class="header-wrapper">
- {{ partial "header" . }}
- {{ partial "navigation" . }}
- </section>
- <main class="content" role="main" id="main-content">
- {{ partial "post-list" . }}
- {{ partial "pagination" . }}
- </main>
- {{ partial "footer" . }}
- </div>
+<body class="template template--home">
+ <section class="header-wrapper">
+ {{ partial "header" . }}
+ {{ partial "navigation" . }}
+ </section>
+ <main class="content" role="main" id="main-content">
+ <h1>Yay!</h1>
+ {{ partial "post-list" . }}
+ {{ partial "pagination" . }}
+ </main>
+ {{ partial "footer" . }}
{{ partial "js" . }}
</body>
</html> \ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d11df24..ba99f84 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,9 +1,10 @@
<footer class="legal" role="contentinfo" itemscope itemtype="http://schema.org/Person">
- <ul>
+ <ul class="credits">
<li itemprop="name">
<span itemprop="givenName">{{ .Site.Params.firstName }}</span>
<span itemprop="familyName">{{ .Site.Params.lastName }}</span>
</li>
+ <li>2016</li>
<li>Powered by <a href="http://gohugo.io" title="Hugo">Hugo</a> and <a href="//github>com/the2ne/hugo-frais" title="Theme by Olivier Fredon">Hugo Frais</a>.</li>
</ul>
<link itemprop="url" href="{{ .Site.BaseURL }}">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b2dce91..ec2f432 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
<header class="headline" role="banner">
{{ if .IsHome }}
- <h1 class="headline__title">{{ .Site.Params.headline }}</h1>
+ <span class="headline__title">{{ .Site.Params.headline }}</span>
{{ else }}
<a class="headline__title" href="{{ .Site.BaseURL }}">{{ .Site.Params.headline }}</a>
{{ end }}
diff --git a/layouts/partials/post-list.html b/layouts/partials/post-list.html
index 43695a2..1d46928 100644
--- a/layouts/partials/post-list.html
+++ b/layouts/partials/post-list.html
@@ -1,14 +1,24 @@
+{{ $baseurl := .Site.BaseURL }}
{{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") }}
{{ range $paginator.Pages }}
<article class="post post--preview">
<header>
<h2 class="post__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
- <div class="post__meta"><time datetime="{{ .Date.Format "02 January 2006" }}">{{ .Date.Format "02 January 2006" }}</time></div>
</header>
+ <section class="post-meta">
+ <ul class="post-meta__infos">
+ <li class="post-meta__date"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02 January 2006" }}</time></li>
+ </ul>
+ <ul class="post-meta__tags">
+ {{ range .Params.tags }}
+ <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
+ {{ end }}
+ </ul>
+ </section>
<section class="post__excerpt">
<p>{{ .Summary }}&hellip;</p>
{{ if .Truncated }}
- <p class="readmore"><a href="{{ .Permalink }}">{{ .Site.Params.keepReading }}</a></p>
+ <p class="readmore"><a href="{{ .Permalink }}">Read More…</a></p>
{{ end }}
</section>
</article>
diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html
index 69b7ae2..99721ec 100644
--- a/layouts/partials/post-meta.html
+++ b/layouts/partials/post-meta.html
@@ -1,7 +1,7 @@
{{ $baseurl := .Site.BaseURL }}
-<ul class="post-meta__date">
- <li><time datetime="{{ .Date.Format "2006-01-02" }}" itemprop="datePublished">{{ .Date.Format "02 January 2006" }}</time></li>
- <li itemprop="author">{{ .Site.Params.author }}</li>
+<ul class="post-meta__infos">
+ <li class="post-meta__author" itemprop="author">{{ .Site.Params.author }}</li>
+ <li class="post-meta__date"><time datetime="{{ .Date.Format "2006-01-02" }}" itemprop="datePublished">{{ .Date.Format "02 January 2006" }}</time></li>
</ul>
<ul class="post-meta__tags">
{{ range .Params.tags }}
diff --git a/static/css/style.css b/static/css/style.css
index ff4c1b6..d8e4aef 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
@@ -440,6 +441,17 @@ a:active {
color: #52616D;
}
+blockquote {
+ background-color: #E5E1D1;
+ /* The Fallback */
+ background-color: rgba(229, 225, 209, 0.3);
+ border-left: 6px solid #E5E1D1;
+ font-size: 1.25em;
+ margin-left: 0;
+ margin-right: 0;
+ padding: .5em 1.5em;
+}
+
.visua11y-hidden {
border: 0;
clip: rect(1px 1px 1px 1px);
@@ -459,14 +471,120 @@ html {
.header-wrapper {
background-color: #E5E1D1;
+ display: table;
+ padding: .5em 1.5em;
+ width: 100%;
}
-.headline,
-.menu,
-.content,
-.legal {
+.header-wrapper a {
+ text-decoration: none;
+}
+
+.header-wrapper .headline,
+.header-wrapper .menu {
+ display: table-cell;
+ height: 80px;
+ vertical-align: middle;
+}
+
+.header-wrapper .headline {
+ text-align: left;
+}
+
+.header-wrapper .menu {
+ text-align: right;
+}
+
+.menu__items {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.menu__items .item {
+ display: inline-block;
+}
+
+.menu__items .item + .item {
+ margin-left: .5em;
+}
+
+.menu__items .item + .item::before {
+ color: #FFFFFF;
+ content: "|";
+ display: inline-block;
+ margin-right: .5em;
+}
+
+.content {
margin: 0 auto;
- max-width: 700px;
+ max-width: 40em;
+ padding: 0 1.5em;
+}
+
+.legal {
+ color: #52616D;
+ text-align: center;
+}
+
+.legal .credits {
+ border-top: 1px solid #C44741;
+ margin: 2em auto 1em;
+ padding-left: 0;
+ padding-top: 1em;
+ list-style-type: none;
+}
+
+.legal .credits > * {
+ display: inline-block;
+}
+
+.legal .credits li + li {
+ margin-left: .25em;
+}
+
+.legal .credits li + li::before {
+ color: #C44741;
+ content: "•";
+ display: inline-block;
+ margin-right: .25em;
+}
+
+.post-meta {
+ color: #52616D;
+ display: table;
+ width: 100%;
+}
+
+.post-meta [class^=post-meta__] {
+ display: table-cell;
+ vertical-align: middle;
+ margin: 0;
+ padding-left: 0;
+ list-style-type: none;
+}
+
+.post-meta [class^=post-meta__] > * {
+ display: inline-block;
+}
+
+.post-meta [class^=post-meta__] li + li {
+ margin-left: .25em;
+}
+
+.post-meta [class^=post-meta__] li + li::before {
+ color: #C44741;
+ content: "•";
+ display: inline-block;
+ margin-right: .25em;
+}
+
+.post-meta .post-meta__infos {
+ text-align: left;
+}
+
+.post-meta .post-meta__tags {
+ text-align: right;
}
html {
@@ -474,11 +592,12 @@ html {
font-size: 1em;
}
-.page {
+.template {
font-size: 1.25em;
}
.headline__title {
+ color: #C44741;
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
font-size: 1.5em;
font-weight: bold;
diff --git a/static/sass/_mixins.scss b/static/sass/_mixins.scss
index d8bfcce..89d0992 100644
--- a/static/sass/_mixins.scss
+++ b/static/sass/_mixins.scss
@@ -24,3 +24,9 @@
clear: both;
}
}
+
+/// Background opacity
+@mixin _background-opacity($color, $opacity: 0.5) {
+ background-color: $color; /* The Fallback */
+ background-color: rgba($color, $opacity);
+} \ No newline at end of file
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index fe846e4..5fc20ae 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -22,6 +22,17 @@ a:hover { color: $shadow; }
a:focus { color: $base; }
a:active { color: $light; }
+// HTML elements
+
+blockquote {
+ @include _background-opacity($neutral, .3);
+ border-left: 6px solid $neutral;
+ font-size: $fontSize * 1.25;
+ margin-left: 0;
+ margin-right: 0;
+ padding: .5em 1.5em;
+}
+
// Helpers
.visua11y-hidden {
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 87f05c2..af75548 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -8,12 +8,119 @@ html {
.header-wrapper {
background-color: $neutral;
+ display: table;
+ padding: .5em 1.5em;
+ width: 100%;
+
+ a {
+ text-decoration: none;
+ }
+
+ .headline,
+ .menu {
+ display: table-cell;
+ height: 80px;
+ vertical-align: middle;
+ }
+
+ .headline {
+ text-align: left;
+ }
+
+ .menu {
+ text-align: right;
+ }
}
-.headline,
-.menu,
-.content,
-.legal {
+.menu__items {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+
+ .item {
+ display: inline-block;
+ }
+
+ .item + .item {
+ margin-left: .5em;
+ }
+
+ .item + .item::before {
+ color: $white;
+ content:"|";
+ display: inline-block;
+ margin-right: .5em;
+ }
+}
+
+.content {
margin: 0 auto;
- max-width: 700px;
+ max-width: 40em;
+ padding: 0 1.5em;
+}
+
+.legal {
+ color: $light;
+ text-align: center;
+
+ .credits {
+ border-top: 1px solid $contrast;
+ margin: 2em auto 1em;
+ padding-left: 0;
+ padding-top: 1em;
+ list-style-type: none;
+
+ > * {
+ display: inline-block;
+ }
+
+ li + li {
+ margin-left: .25em;
+ }
+
+ li + li::before {
+ color: $contrast;
+ content:"•";
+ display: inline-block;
+ margin-right: .25em;
+ }
+ }
+}
+
+
+.post-meta {
+ color: $light;
+ display: table;
+ width: 100%;
+
+ [class^=post-meta__] {
+ display: table-cell;
+ vertical-align: middle;
+ margin: 0;
+ padding-left: 0;
+ list-style-type: none;
+
+ > * {
+ display: inline-block;
+ }
+
+ li + li {
+ margin-left: .25em;
+ }
+
+ li + li::before {
+ color: $contrast;
+ content:"•";
+ display: inline-block;
+ margin-right: .25em;
+ }
+ }
+
+ .post-meta__infos {
+ text-align: left;
+ }
+
+ .post-meta__tags {
+ text-align: right;
+ }
} \ No newline at end of file
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index d72dbce..1e57b18 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -7,11 +7,12 @@ html {
font-size: $fontSize;
}
-.page {
+.template {
font-size: $fontSize * 1.25;
}
.headline__title {
+ color: $contrast;
font-family: $fontFamily;
font-size: $fontSize * 1.5;
font-weight: bold;