diff options
| author | Olivier Fredon <the2ne@gmail.com> | 2016-10-17 18:05:08 +0300 |
|---|---|---|
| committer | Olivier Fredon <the2ne@gmail.com> | 2016-10-17 18:05:08 +0300 |
| commit | 58f0eb8e748642c31d450ebb1de08d769cef8370 (patch) | |
| tree | 3a2d24644a86e6b1f24aa811cc59f10b5e2074f2 | |
| parent | d6987746892f99eb4d37a602c3a5698566feffcc (diff) | |
| parent | 2881ff656e1c73dfee07abd820bda12017ceced7 (diff) | |
Merge branch 'customize'
| -rw-r--r-- | README.md | 16 | ||||
| -rw-r--r-- | archetypes/default.md | 1 | ||||
| -rw-r--r-- | layouts/_default/list.html | 18 | ||||
| -rw-r--r-- | layouts/_default/single.html | 34 | ||||
| -rw-r--r-- | layouts/index.html | 17 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 13 | ||||
| -rw-r--r-- | layouts/partials/header.html | 13 | ||||
| -rw-r--r-- | layouts/partials/navigation.html | 19 | ||||
| -rw-r--r-- | layouts/partials/pagination.html | 10 | ||||
| -rw-r--r-- | layouts/partials/post-list.html | 16 | ||||
| -rw-r--r-- | layouts/partials/post-meta.html | 14 | ||||
| -rw-r--r-- | layouts/partials/social.html | 13 | ||||
| -rw-r--r-- | static/css/style.css | 260 | ||||
| -rw-r--r-- | static/sass/_mixins.scss | 23 | ||||
| -rw-r--r-- | static/sass/_settings.scss | 16 | ||||
| -rw-r--r-- | static/sass/custom/breakpoints.scss | 13 | ||||
| -rw-r--r-- | static/sass/custom/global.scss | 32 | ||||
| -rw-r--r-- | static/sass/custom/layout.scss | 141 | ||||
| -rw-r--r-- | static/sass/custom/typography.scss | 28 |
19 files changed, 544 insertions, 153 deletions
@@ -1,17 +1,6 @@ # Hugo frais -**/!\ Please note that this is a Work In Progress theme** - -A fresh (and french) theme for [Hugo](//gohugo.io/). - -Recipe for a good theme: -- **light**: minimum viable dependencies -- **responsive**: mobile-first is not an option -- **accessible**: a11y is quality -- **SVG**: light + responsive + accessibility = Epic win -- **consistent**: if maintainability is king, BEM is queen -- **customizable**: make it yours -- ... +A fresh and french single column theme for [Hugo](//gohugo.io/). ## How to install @@ -34,12 +23,15 @@ For more information read the official [setup guide](//gohugo.io/overview/instal ## Configuration You can define some social network bullshit like: + - [params] **author** *str* : the author's website name; - [params] **pseudo** *str* : the author's online pseudonym; - [params] **twitter** *str* : Twitter account; - [params] **github** *str* : GitHub account; - [params] **linkedin** *str* : LinkedIn account; +This will activate meta (OpenGraph and Twitter Card) and menu item. + _./config.toml example:_ ```toml [params] diff --git a/archetypes/default.md b/archetypes/default.md index cb848c4..e111a46 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,6 +1,5 @@ +++ title = "" description = "" -date = "02-01-2006" tags = ["x", "y"] +++ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 4972bf9..cec982e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,15 +1,15 @@ {{ partial "head" . }} - -<body class="list-template"> - <div class="page"> +<body class="template template--list"> + <section class="header-wrapper"> {{ partial "header" . }} {{ partial "navigation" . }} - <main class="content" role="main" id="contenu-principal"> - {{ partial "post-list" . }} - {{ partial "pagination" . }} - </main> - {{ partial "footer" . }} - </div> + </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 38ba5fa..895fa20 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,24 +1,24 @@ {{ partial "head" . }} -<body class="post-template"> - <div class="page"> +<body class="template template--post"> + <section class="header-wrapper"> {{ partial "header" . }} {{ partial "navigation" . }} - <main class="content" role="main" id="main-content" itemscope itemtype="http://schema.org/Article"> - <article class="post"> - <header> - <h1 class="post-title" itemprop="name" role="heading" arial-level="1">{{ .Title }}</h1> - </header> - <section class="post-content" itemprop="articleBody"> - {{ .Content }} - </section> - <footer class="post-meta"> - {{ partial "post-meta" . }} - </footer> - </article> - </main> - {{ partial "footer" . }} - </div> + </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 ac7229f..7b6e3ea 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,15 +1,16 @@ {{ partial "head" . }} -<body class="home-template"> - <div class="page"> +<body class="template template--home"> + <section class="header-wrapper"> {{ partial "header" . }} {{ partial "navigation" . }} - <main class="content" role="main" id="main-content"> - {{ partial "post-list" . }} - {{ partial "pagination" . }} - </main> - {{ partial "footer" . }} - </div> + </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 332d433..e01bbcb 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,3 @@ -<footer class="legal" role="contentinfo" itemscope itemtype="http://schema.org/Person"> - {{ partial "social" . }} - <ul> - <li itemprop="name"> - <span itemprop="givenName">{{ .Site.Params.firstName }}</span> - <span itemprop="familyName">{{ .Site.Params.lastName }}</span> - </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 }}"> - <link itemprop="email" href="mailto:{{ .Site.Params.email }}"> +<footer class="legal" role="contentinfo"> + <p>Performed by <a href="//gohugo.io" title="Hugo">Hugo</a> with the <a href="//github.com/the2ne/hugo-frais" title="Theme by Olivier Fredon">Hugo Frais</a> theme.</p> </footer> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a6b633d..ec2f432 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,8 +1,7 @@ -<header class="headlines" role="banner"> - <h1 class="headlines__title"> - {{ if .IsPage }}<a href="{{ .Site.BaseURL }}">{{ end }} - {{ .Site.Params.headline }} - {{ if .IsPage }}</a>{{ end }} - </h1> - <h2 class="headlines__baseline">{{ .Site.Params.baseline }}</h2> +<header class="headline" role="banner"> + {{ if .IsHome }} + <span class="headline__title">{{ .Site.Params.headline }}</span> + {{ else }} + <a class="headline__title" href="{{ .Site.BaseURL }}">{{ .Site.Params.headline }}</a> + {{ end }} </header> diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html index 5defb8f..43ed174 100644 --- a/layouts/partials/navigation.html +++ b/layouts/partials/navigation.html @@ -1,9 +1,24 @@ -{{ if .Site.Menus.main }} <nav class="menu" role="navigation" id="main-menu"> <ul class="menu__items"> + {{ if .Site.Menus.main }} {{ range .Site.Menus.main }} <li class="item"><a href="{{.URL}}">{{ .Name }}</a></li> {{ end }} + {{ end }} + {{ if .Site.Params.twitter }} + <li class="item twitter"> + <a href="https://twitter.com/{{ .Site.Params.twitter }}" title="Follow me">Twitter</a> + </li> + {{ end }} + {{ if .Site.Params.github }} + <li class="item github"> + <a href="https://github.com/{{ .Site.Params.github }}" title="Fork me">GitHub</a> + </li> + {{ end }} + {{ if .Site.Params.linkedin }} + <li class="item linkedin"> + <a href="https://fr.linkedin.com/in/{{ .Site.Params.linkedin }}" title="About me">LinkedIn</a> + </li> + {{ end }} </ul> </nav> -{{ end }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 40a54e8..f0099fd 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,15 +1,11 @@ {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} <nav class="pagination" role="pagination"> + <span class="pagination__infos">Page <span class="pagination__current">{{ .Paginator.PageNumber }}</span> of <span class="pagination__total">{{ .Paginator.TotalPages }}</span></span> {{ if .Paginator.HasPrev }} - <section class="pagination__prev"> - <a class="newer" href="{{ .Paginator.Prev.URL }}" title="{{ .Prev.Title }}">{{.Prev.Title}}</a> - </section> + <a class="pagination__prev" href="{{ .Paginator.Prev.URL }}">Previous</a> {{ end }} - <span class="pagination__current">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span> {{ if .Paginator.HasNext }} - <section class="pagination__next"> - <a class="older" href="{{ .Paginator.Next.URL }}" title="{{ .Next.Title }}">{{.Next.Title}}</a> - </section> + <a class="pagination__next" href="{{ .Paginator.Next.URL }}">Next</a> {{ end }} </nav> {{ end }}
\ No newline at end of file diff --git a/layouts/partials/post-list.html b/layouts/partials/post-list.html index 650d00f..a625a69 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> - <h1 class="post__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1> - <div class="post__meta"><time datetime="{{ .Date.Format "02 January 2006" }}">{{ .Date.Format "02 January 2006" }}</time></div> + <h2 class="post__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2> </header> + <footer 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> + </footer> <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 2a15b6c..1790b69 100644 --- a/layouts/partials/post-meta.html +++ b/layouts/partials/post-meta.html @@ -1,13 +1,13 @@ {{ $baseurl := .Site.BaseURL }} -<section class="post-meta__date"> - <time datetime="{{ .Date.Format "2006-01-02" }}" itemprop="datePublished">{{ .Date.Format "02 January 2006" }}</time> -</section> -<section class="post-meta__tags"> +<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 }} - <a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a> + <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li> {{ end }} -</section> +</ul> <meta itemprop="url" content="{{ .Permalink }}"> -<meta itemprop="author" content="{{ .Site.Params.author }}"> <meta itemprop="wordCount" content="{{ .WordCount }}" /> <meta itemprop="timeRequired" content="{{ .ReadingTime }} Min" /> diff --git a/layouts/partials/social.html b/layouts/partials/social.html deleted file mode 100644 index 9f9a082..0000000 --- a/layouts/partials/social.html +++ /dev/null @@ -1,13 +0,0 @@ -<aside> - <ul class="social-networks"> - <li class="twitter"> - <a href="https://twitter.com/{{ .Site.Params.twitter }}" title="Follow me">Twitter</a> - </li> - <li class="github"> - <a href="https://github.com/{{ .Site.Params.github }}" title="Fork me">GitHub</a> - </li> - <li class="linkedin"> - <a href="https://fr.linkedin.com/in/{{ .Site.Params.linkedin }}" title="About me">LinkedIn</a> - </li> - </ul> -</aside> diff --git a/static/css/style.css b/static/css/style.css index a563a7d..924f140 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). @@ -5,7 +6,7 @@ * 3. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /* 1 */ line-height: 1.5; /* 2 */ @@ -425,19 +426,41 @@ img { } a { - color: #777; + color: #C44741; } a:hover { - color: #333; + color: #77201C; } a:focus { - color: #000; + color: #2C343B; } a:active { - color: #333; + 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; +} + +code { + background-color: #C44741; + /* The Fallback */ + background-color: rgba(196, 71, 65, 0.1); + border-left: 6px solid #C44741; + color: #C44741; + display: block; + margin: 1em 0; + padding: .5em 1.5em; } .visua11y-hidden { @@ -454,32 +477,235 @@ a:active { } html { - background-color: #fff; + background-color: #FFFFFF; } -.page { - margin: 0 4em; +.header-wrapper { + background-color: #E5E1D1; + display: table; + padding: .5em 1.5em; + width: 100%; } -.headlines { - font-size: 1.5em; +.header-wrapper a { + text-decoration: none; } -html { - color: #333; - font-size: 1em; +.header-wrapper .headline, +.header-wrapper .menu { + display: table-cell; + 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: 0.5em; +} + +.content { + margin: 0 auto; + max-width: 40em; + padding: 0 1.5em; +} + +.content .post--preview + .post--preview { + margin-top: 3em; +} + +.post--preview .post__title { + margin-bottom: .25em; +} + +.legal { + color: #77201C; + margin-top: 3em; + text-align: center; +} + +.post__meta { + color: #52616D; + display: table; + font-style: italic; + width: 100%; +} + +.post__meta a { + color: #52616D; +} + +.post__meta a:hover { + color: #2C343B; } -.headlines__title { +.post__meta a:focus { + color: #C44741; +} + +.post__meta a:active { + color: #77201C; +} + +.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: #52616D; + content: "•"; + display: inline-block; + margin-right: 0.5em; +} + +.post__meta .post__meta__infos { + text-align: left; +} + +.post__meta .post__meta__tags { + text-align: right; +} + +.pagination { + color: #52616D; + margin-top: 1.5em; + text-align: right; +} + +.pagination .pagination__infos + a { + margin-left: .25em; +} + +.pagination .pagination__current { + color: #C44741; font-size: 1.5em; } -.headlines__baseline { +.pagination .pagination__infos + a::before { + color: #E5E1D1; + content: "•"; + display: inline-block; + margin-right: 0.5em; +} + +.pagination .pagination__prev + .pagination__next { + margin-left: .25em; +} + +.pagination .pagination__prev + .pagination__next::before { + color: #E5E1D1; + content: "|"; + display: inline-block; + margin-right: 0.5em; +} + +html { + color: #2C343B; font-size: 1em; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; +} + +.template { + font-size: 1.25em; } -h1, h2, h3, h4, h5, h6 { - font-family: Georgia, Times, Times New Roman, serif; +.headline__title { + color: #C44741; + display: block; + 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; + margin: 0; + padding: .5em 0; +} + +h1, h3, h5 { + font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; + line-height: 1.2; + color: #C44741; +} + +h2, h4, h6 { + font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; + line-height: 1.2; + color: #52616D; +} + +@media screen and (min-width: 40em) { + h1 { + font-size: 3em; + } + h2 { + font-size: 2.5em; + } + h3 { + font-size: 2em; + } + h4 { + font-size: 1.75em; + } + h5 { + font-size: 1.25em; + } + h6 { + font-size: 1em; + } +} + +@media screen and (min-width: 60em) { + h1 { + font-size: 4.5em; + } + h2 { + font-size: 3em; + } + h3 { + font-size: 2.5em; + } + h4 { + font-size: 2em; + } + h5 { + font-size: 1.5em; + } + h6 { + font-size: 1em; + } } /*# sourceMappingURL=style.css.map */
\ No newline at end of file diff --git a/static/sass/_mixins.scss b/static/sass/_mixins.scss index d8bfcce..c845a54 100644 --- a/static/sass/_mixins.scss +++ b/static/sass/_mixins.scss @@ -12,15 +12,16 @@ } } -/// `clearfix` -@mixin _clearfix { - &:before, - &:after { - /* clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */ - content: " "; - display: table; - } - &:after { - clear: both; - } +/// Background opacity +@mixin _background-opacity($color, $opacity: 0.5) { + background-color: $color; /* The Fallback */ + background-color: rgba($color, $opacity); } + +/// Separator on ::before +@mixin _separator-before($color: inherit, $content: "•", $margin: 0.5em) { + color: $color; + content: $content; + display: inline-block; + margin-right: $margin; +}
\ No newline at end of file diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss index 6c0e585..f8295b1 100644 --- a/static/sass/_settings.scss +++ b/static/sass/_settings.scss @@ -5,15 +5,19 @@ // Typography -$fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -$fontFamilyAlternative: Georgia,Times,Times New Roman,serif; +$fontFamily: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; +$fontFamilyAlternative: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; $fontSize: 1em; $baseline: 1.5; // ColorScheme -$black: #000; -$dark: #333; -$light: #777; -$white: #fff; +$black: #000000; +$white: #FFFFFF; + +$neutral: #E5E1D1; +$light: #52616D; +$base: #2C343B; +$contrast: #C44741; +$shadow: #77201C; diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss index 0a6bfa3..a3b109c 100644 --- a/static/sass/custom/breakpoints.scss +++ b/static/sass/custom/breakpoints.scss @@ -4,10 +4,21 @@ // Medium breakpoint @media screen and (min-width: 40em) { + h1 { font-size: $fontSize * 3; } + h2 { font-size: $fontSize * 2.5; } + h3 { font-size: $fontSize * 2; } + h4 { font-size: $fontSize * 1.75; } + h5 { font-size: $fontSize * 1.25; } + h6 { font-size: $fontSize * 1; } } // Desktop breakpoint @media screen and (min-width: 60em) { - + h1 { font-size: $fontSize * 4.5; } + h2 { font-size: $fontSize * 3; } + h3 { font-size: $fontSize * 2.5; } + h4 { font-size: $fontSize * 2; } + h5 { font-size: $fontSize * 1.5; } + h6 { font-size: $fontSize * 1; } } diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss index 7bafe57..c7deaac 100644 --- a/static/sass/custom/global.scss +++ b/static/sass/custom/global.scss @@ -17,20 +17,30 @@ img { -ms-interpolation-mode: bicubic; } // Links -a { - color: $light; +a { color: $contrast; } +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; } -a:hover { - color: $dark; -} - -a:focus { - color: $black; -} +code { + @include _background-opacity($contrast, .1); + border-left: 6px solid $contrast; + color: $contrast; + display: block; + margin: 1em 0; + padding: .5em 1.5em; -a:active { - color: $dark; } // Helpers diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss index b74ca52..6a99b84 100644 --- a/static/sass/custom/layout.scss +++ b/static/sass/custom/layout.scss @@ -6,10 +6,143 @@ html { background-color: $white; } -.page { - margin: 0 4em; + +// header +.header-wrapper { + background-color: $neutral; + display: table; + padding: .5em 1.5em; + width: 100%; + + a { + text-decoration: none; + } + + .headline, + .menu { + display: table-cell; + vertical-align: middle; + } + + .headline { + text-align: left; + } + + .menu { + text-align: right; + } +} + +// Menu +.menu__items { + list-style-type: none; + margin: 0; + padding: 0; + + .item { + display: inline-block; + } + + .item + .item { + margin-left: .5em; + } + + .item + .item::before { + @include _separator-before($white, "|"); + } +} + +// Content +.content { + margin: 0 auto; + max-width: 40em; + padding: 0 1.5em; + + .post--preview + .post--preview { + margin-top: 3em; + } +} + +// Post preview +.post--preview { + .post__title { + margin-bottom: .25em; + } } -.headlines { - font-size: 1.5em; +// Footer +.legal { + color: $shadow; + margin-top: 3em; + text-align: center; } + +// Post meta +.post__meta { + color: $light; + display: table; + font-style: italic; + width: 100%; + + a { color: $light; } + a:hover { color: $base; } + a:focus { color: $contrast; } + a:active { color: $shadow; } + + [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 { + @include _separator-before($light); + } + } + + .post__meta__infos { + text-align: left; + } + + .post__meta__tags { + text-align: right; + } +} + + +// Pagination +.pagination { + color: $light; + margin-top: 1.5em; + text-align: right; + + .pagination__infos + a { + margin-left: .25em; + } + + .pagination__current { + color: $contrast; + font-size: $fontSize * 1.5; + } + + .pagination__infos + a::before { + @include _separator-before($neutral); + } + + .pagination__prev + .pagination__next { + margin-left: .25em; + } + + .pagination__prev + .pagination__next::before { + @include _separator-before($neutral, "|"); + } +}
\ No newline at end of file diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss index 019695d..dda018a 100644 --- a/static/sass/custom/typography.scss +++ b/static/sass/custom/typography.scss @@ -3,18 +3,34 @@ //// html { - color: $dark; + color: $base; font-size: $fontSize; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; } -.headlines__title { - font-size: $fontSize * 1.5; +.template { + font-size: $fontSize * 1.25; } -.headlines__baseline { - font-size: $fontSize; +.headline__title { + color: $contrast; + display: block; + font-family: $fontFamily; + font-size: $fontSize * 1.5; + font-weight: bold; + margin: 0; + padding: .5em 0; } -h1, h2, h3, h4, h5, h6 { +h1, h3, h5 { font-family: $fontFamilyAlternative; + line-height: $baseline - .3; + color: $contrast; +} + +h2, h4, h6 { + font-family: $fontFamily; + line-height: $baseline - .3; + color: $light; } |