diff options
author | Olivier Fredon <the2ne@gmail.com> | 2016-10-16 17:44:10 +0300 |
---|---|---|
committer | Olivier Fredon <the2ne@gmail.com> | 2016-10-16 17:44:10 +0300 |
commit | 3106e52ee8a3a823deece04e887070b94064269a (patch) | |
tree | d607744a6476584c048ca03af437d02de6b1a28d | |
parent | 769a97c0f1364f9bde3ddd6f8e10470528658bc7 (diff) |
layout and typo
-rw-r--r-- | layouts/_default/list.html | 24 | ||||
-rw-r--r-- | layouts/_default/single.html | 40 | ||||
-rw-r--r-- | layouts/index.html | 23 | ||||
-rw-r--r-- | layouts/partials/footer.html | 3 | ||||
-rw-r--r-- | layouts/partials/header.html | 2 | ||||
-rw-r--r-- | layouts/partials/post-list.html | 14 | ||||
-rw-r--r-- | layouts/partials/post-meta.html | 6 | ||||
-rw-r--r-- | static/css/style.css | 131 | ||||
-rw-r--r-- | static/sass/_mixins.scss | 6 | ||||
-rw-r--r-- | static/sass/custom/global.scss | 11 | ||||
-rw-r--r-- | static/sass/custom/layout.scss | 117 | ||||
-rw-r--r-- | static/sass/custom/typography.scss | 3 |
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 }}…</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; |