navigation, breakpoint and color scheme

12 files changed, 133 insertions, 140 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d4cad82..895fa20 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,12 +8,12 @@
     <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>
+                <h1 class="post__title" itemprop="name">{{ .Title }}</h1>
             </header>
-            <section class="post-content" itemprop="articleBody">
+            <section class="post__content" itemprop="articleBody">
                 {{ .Content }}
             </section>
-            <footer class="post-meta">
+            <footer class="post__meta">
                 {{ partial "post-meta" . }}
             </footer>
         </article>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ba99f84..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">
-    <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 }}">
-    <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/navigation.html b/layouts/partials/navigation.html
index 5defb8f..9e467b0 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -1,9 +1,25 @@
-{{ 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>
+    {{ partial "social" . }}
 </nav>
-{{ end }}
diff --git a/layouts/partials/post-list.html b/layouts/partials/post-list.html
index 1d46928..a625a69 100644
--- a/layouts/partials/post-list.html
+++ b/layouts/partials/post-list.html
@@ -5,16 +5,16 @@
     <header>
         <h2 class="post__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
     </header>
-    <section class="post-meta">
-        <ul class="post-meta__infos">
+    <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">
+        <ul class="post__meta__tags">
             {{ range .Params.tags }}
             <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
             {{ end }}
         </ul>
-    </section>
+    </footer>
     <section class="post__excerpt">
         <p>{{ .Summary }}&hellip;</p>
         {{ if .Truncated }}
diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html
index 99721ec..1790b69 100644
--- a/layouts/partials/post-meta.html
+++ b/layouts/partials/post-meta.html
@@ -1,9 +1,9 @@
 {{ $baseurl := .Site.BaseURL }}
-<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 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">
+<ul class="post__meta__tags">
     {{ range .Params.tags }}
     <li><a href="{{ $baseurl }}tags/{{ . }}">{{ . }} </a></li>
     {{ end }}
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 d8e4aef..3066933 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -452,6 +452,17 @@ blockquote {
     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 {
     border: 0;
     clip: rect(1px 1px 1px 1px);
@@ -522,41 +533,23 @@ html {
     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;
+.content .post--preview + .post--preview {
+    margin-top: 3em;
 }
 
-.legal .credits li + li {
-    margin-left: .25em;
-}
-
-.legal .credits li + li::before {
-    color: #C44741;
-    content: "•";
-    display: inline-block;
-    margin-right: .25em;
+.legal {
+    color: #77201C;
+    margin-top: 3em;
+    text-align: center;
 }
 
-.post-meta {
+.post__meta {
     color: #52616D;
     display: table;
     width: 100%;
 }
 
-.post-meta [class^=post-meta__] {
+.post__meta [class^=post__meta__] {
     display: table-cell;
     vertical-align: middle;
     margin: 0;
@@ -564,26 +557,26 @@ html {
     list-style-type: none;
 }
 
-.post-meta [class^=post-meta__] > * {
+.post__meta [class^=post__meta__] > * {
     display: inline-block;
 }
 
-.post-meta [class^=post-meta__] li + li {
+.post__meta [class^=post__meta__] li + li {
     margin-left: .25em;
 }
 
-.post-meta [class^=post-meta__] li + li::before {
+.post__meta [class^=post__meta__] li + li::before {
     color: #C44741;
     content: "•";
     display: inline-block;
     margin-right: .25em;
 }
 
-.post-meta .post-meta__infos {
+.post__meta .post__meta__infos {
     text-align: left;
 }
 
-.post-meta .post-meta__tags {
+.post__meta .post__meta__tags {
     text-align: right;
 }
 
@@ -616,28 +609,46 @@ h2, h4, h6 {
     color: #52616D;
 }
 
-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;
+@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 89d0992..b6f6a40 100644
--- a/static/sass/_mixins.scss
+++ b/static/sass/_mixins.scss
@@ -12,19 +12,6 @@
     }
 }
 
-/// `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 */
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 5fc20ae..c7deaac 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -33,6 +33,16 @@ blockquote {
     padding: .5em 1.5em;
 }
 
+code {
+    @include _background-opacity($contrast, .1);
+    border-left: 6px solid $contrast;
+    color: $contrast;
+    display: block;
+    margin: 1em 0;
+    padding: .5em 1.5em;
+
+}
+
 // Helpers
 
 .visua11y-hidden {
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index af75548..5d0cd1e 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -6,6 +6,8 @@ html {
     background-color: $white;
 }
 
+
+// header
 .header-wrapper {
     background-color: $neutral;
     display: table;
@@ -32,6 +34,7 @@ html {
     }
 }
 
+// Menu
 .menu__items {
     list-style-type: none;
     margin: 0;
@@ -53,47 +56,31 @@ html {
     }
 }
 
+// Content
 .content {
     margin: 0 auto;
     max-width: 40em;
     padding: 0 1.5em;
+
+    .post--preview + .post--preview {
+        margin-top: 3em;
+    }
 }
 
+// Footer
 .legal {
-    color: $light;
+    color: $shadow;
+    margin-top: 3em;
     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 {
+// Post meta
+.post__meta {
     color: $light;
     display: table;
     width: 100%;
 
-   [class^=post-meta__] {
+   [class^=post__meta__] {
         display: table-cell;
         vertical-align: middle;
         margin: 0;
@@ -116,11 +103,11 @@ html {
         }
     }
 
-    .post-meta__infos {
+    .post__meta__infos {
         text-align: left;
     }
 
-    .post-meta__tags {
+    .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 1e57b18..35108c2 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -30,10 +30,3 @@ h2, h4, h6 {
     line-height: $baseline - .3;
     color: $light;
 }
-
-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; }