LICENSE.txt

@@ -1,22 +0,0 @@
-Copyright (c) 2014 Dmitry Lebedev - Released under The MIT License.
-
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation
-files (the "Software"), to deal in the Software without
-restriction, including without limitation the rights to use,
-copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following
-conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.

assets/css/screen.css

@@ -1,15 +1,3 @@
-:root {
-  --header-background-color: #1b2b34;
-  --main-background-color: #343D46;
-  --text: #d8dee9;
-  --link: #f2b705;
-  --footer-link: #d8dee9;
-  --title: #f28322;
-  --post-title: #a7adba;
-  --border: #424650;
-  --figcaption: #9EABB3;
-}
-
 @font-face {
  font-family:'icons';
  src:url("../fonts/icons.eot");
@@ -51,16 +39,16 @@ body {
  font-family:"Courier New", Courier, monospace;
  font-size:2.0rem;
  line-height:1.6em;
- color: var(--text);
+ color:#B2B6BD;
- background: var(--main-background-color)
+ background:#2b303b
 }
 ::-moz-selection {
- color: var(--header-background-color);
+ color:#1c212b;
  background:#a3be8c;
  text-shadow:none
 }
 ::selection {
- color: var(--header-background-color);
+ color:#1c212b;
  background:#a3be8c;
  text-shadow:none
 }
@@ -76,33 +64,58 @@ h6 {
  letter-spacing:2px;
  font-weight:normal
 }
-h1 a,
+h1 a {
-h2 a,
+ color:#739a99
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: var(--post-title)
 }
-.blog-title {
+h2 a {
-  font-size:5rem;
+ color:#739a99
-  letter-spacing:-1px;
+}
-  text-align:center;
+h3 a {
+ color:#739a99
+}
+h4 a {
+ color:#739a99
+}
+h5 a {
+ color:#739a99
+}
+h6 a {
+ color:#739a99
+}
+h1 {
+ font-size:5rem;
+ line-height:1.2em;
+ text-indent:-3px
+}
+h2 {
+ font-size:4rem;
+ line-height:1.2em;
+ text-indent:-2px
+}
+h3 {
+ font-size:3.5rem
+}
+h4 {
+ font-size:3rem
+}
+h5 {
+ font-size:2.5rem
+}
+h6 {
+ font-size:2rem
 }
 a {
- color: var(--link);
+ color:#bf6165;
  -webkit-transition:color ease 0.3s;
- transition:color ease 0.3s;
+ transition:color ease 0.3s
-  text-decoration: none;
 }
 a:hover {
-  text-decoration: underline;
+ color:#a3be8c
 }
 p,
 ul,
 ol {
- /* margin:1.6em 0 */
+ margin:1.6em 0
- margin:0 0 1.6em 0
 }
 ol ol,
 ul ul,
@@ -114,7 +127,7 @@ hr {
  display:block;
  height:1px;
  border:0;
- border-top:1px solid var(--border);
+ border-top:1px solid #424650;
  margin:3.2em 0;
  padding:0
 }
@@ -259,18 +272,12 @@ select,
 textarea {
  background:#4f586b;
  border:1px solid #424a5a;
- color: var(--text);
+ color:#B2B6BD;
- outline-color: var(--link)
+ outline-color:#bf6165
-}
-.nav {
- margin:0;
 }
 .site-nav ul {
  padding:0
 }
-.site-nav li {
- padding-right: 16px;
-}
 .site-nav ul li {
  display:inline-block;
  list-style:none
@@ -278,15 +285,6 @@ textarea {
 .post-header .site-nav {
  text-align:center
 }
-.site-nav {
-  overflow: hidden;
-}
-.site-nav-left {
- float: left;
-}
-.site-nav-right {
- float: right;
-}
 .hidden {
  text-indent:-9999px;
  visibility:hidden;
@@ -302,9 +300,59 @@ textarea {
  position:relative;
  display:table;
  width:100%;
+ /* height:60%; */
  margin-bottom:5rem;
- color: var(--title);
+ /* text-align:center; */
- background: var(--header-background-color) no-repeat center center;
+ color:#a0add5;
+ background:#1c212b no-repeat center center;
+ background-size:cover
+}
+#blog-logo {
+ width:100px;
+ border-radius:50%;
+ overflow:hidden;
+ display:block;
+ margin:0 auto;
+ position:relative
+}
+#blog-logo:before {
+ width:100px;
+ height:100px;
+ border-radius:50%;
+ overflow:hidden;
+ display:block;
+ margin:0 auto;
+ content:"";
+ position:absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ background:none;
+ -webkit-transition:background .3s linear;
+ transition:background .3s linear
+}
+#blog-logo:hover:before {
+ background:rgba(204,31,39,0.5)
+}
+#blog-logo img {
+ display:block;
+ max-height:100px;
+ width:auto;
+ line-height:0;
+ border-radius:50%
+}
+#blog-logo-title {
+ margin:10px 0 10px 0;
+ font-size:5rem;
+ letter-spacing:-1px
+}
+#blog-logo-description {
+ margin:0;
+ font-size:1.8rem;
+ line-height:1.5em;
+ font-weight:300;
+ letter-spacing:0
 }
 #back {
  color:rgba(0,0,0,0.2);
@@ -320,35 +368,49 @@ textarea {
  max-width:850px;
  margin:4rem auto;
  padding-bottom:4rem;
- border-bottom:var(--border) 1px solid;
+ border-bottom:#424650 1px solid;
  word-break:break-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto
 }
 .post-title {
- color: var(--link);
+ color:#739a99;
- margin:0;
+ margin:0
+}
+.post-title a {
+ color:#739a99 !important;
+ text-decoration:none
+}
+.post-title a:hover {
+ color:#aec5c4 !important
 }
 .post-excerpt p {
  margin:1.6rem 0 0 0;
+ font-size:0.9em;
  line-height:1.6em
 }
 .post-meta {
  display:inline-block;
  margin:0 0 5px 0;
  font-size:1.5rem;
- color: var(--text)
+ color:#846d8f
-}
-.post .post-title {
-  margin-bottom: 25px;
 }
 .post a {
- color: var(--link);
+ color:#846d8f;
  text-decoration:none
 }
 .post a:hover {
  text-decoration:underline;
+ color:#9c8aa5
+}
+.post-header a {
+ color:#bf6165;
+ -webkit-transition:color ease 0.3s;
+ transition:color ease 0.3s
+}
+.post-header a:hover {
+ color:#a3be8c
 }
 .user-meta {
  position:relative;
@@ -406,7 +468,7 @@ textarea {
  position:relative;
  margin:4rem 0 0 0;
  padding:4rem 0 0 0;
- border-top:var(--border) 1px solid
+ border-top:#424650 1px solid
 }
 .post-footer h4 {
  font-size:1.8rem;
@@ -443,7 +505,7 @@ textarea {
  position:absolute;
  display:inline-block;
  padding:0 15px;
- border:var(--border) 1px solid;
+ border:#424650 1px solid;
  text-decoration:none;
  border-radius:5px;
  -webkit-transition:border ease 0.3s;
@@ -471,19 +533,19 @@ textarea {
  border-top:#1a1e27 1px solid;
  font-size:1.3rem;
  line-height:1.7em;
- color: var(--footer-link);
+ color:#BBC7CC;
  text-align:center;
- background: var(--header-background-color)
+ background:#1c212b
 }
 .site-footer a {
- color: var(--footer-link);
+ color:#BBC7CC;
- text-decoration:none;
+ text-decoration:underline
 }
 .site-footer a:hover {
- text-decoration:underline;
+ color:#50585D
 }
 .poweredby .icon-ghost {
- color: var(--link);
+ color:#bf6165;
  font-weight:700;
  text-decoration:none
 }
@@ -494,6 +556,80 @@ textarea {
  font-size:1rem;
  margin-right:0.2em
 }
+.subscribe {
+ width:28px;
+ height:28px;
+ position:absolute;
+ top:-14px;
+ left:50%;
+ margin-left:-15px;
+ border:#EBF2F6 1px solid;
+ text-align:center;
+ line-height:2.4rem;
+ border-radius:50px;
+ background:#fff;
+ -webkit-transition:-webkit-box-shadow 0.5s;
+ transition:-webkit-box-shadow 0.5s;
+ transition:box-shadow 0.5s;
+ transition:box-shadow 0.5s, -webkit-box-shadow 0.5s
+}
+.subscribe:before {
+ color:#D2DEE3;
+ font-size:10px;
+ position:absolute;
+ top:2px;
+ left:9px;
+ font-weight:bold;
+ -webkit-transition:color 0.5s ease;
+ transition:color 0.5s ease
+}
+.subscribe:hover {
+ -webkit-box-shadow:rgba(0,0,0,0.05) 0 0 0 3px;
+ box-shadow:rgba(0,0,0,0.05) 0 0 0 3px;
+ -webkit-transition:-webkit-box-shadow 0.25s;
+ transition:-webkit-box-shadow 0.25s;
+ transition:box-shadow 0.25s;
+ transition:box-shadow 0.25s, -webkit-box-shadow 0.25s
+}
+.subscribe:hover .tooltip {
+ opacity:1;
+ top:-33px
+}
+.subscribe:hover:before {
+ color:#50585D
+}
+.tooltip {
+ opacity:0;
+ display:inline-block;
+ padding:4px 8px 5px 8px;
+ position:absolute;
+ top:-23px;
+ left:-23px;
+ color:rgba(255,255,255,0.9);
+ font-size:1.1rem;
+ font-weight:bold;
+ line-height:1em;
+ text-align:center;
+ background:#50585D;
+ border-radius:20px;
+ -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
+ box-shadow:0 1px 4px rgba(0,0,0,0.1);
+ -webkit-transition:opacity 0.3s ease, top 0.3s ease;
+ transition:opacity 0.3s ease, top 0.3s ease
+}
+.tooltip:after {
+ content:"";
+ border-width:5px 5px 0 5px;
+ border-style:solid;
+ border-color:#50585D transparent;
+ display:block;
+ position:absolute;
+ bottom:-4px;
+ left:50%;
+ margin-left:-5px;
+ z-index:220;
+ width:0
+}
 @media only screen and (max-width: 900px) {
  blockquote {
   margin-left:0
@@ -507,8 +643,7 @@ textarea {
  }
  .blog-title {
   font-size:4rem;
-  letter-spacing:-1px;
+  letter-spacing:-1px
-  text-align:center;
  }
  .blog-description {
   font-size:1.7rem;
@@ -524,6 +659,9 @@ textarea {
  .post-template .post-header {
   padding:40px 0
  }
+ .post-header #blog-logo:before {
+  margin:40px auto
+ }
  h1 {
   font-size:4.8rem;
   text-indent:-2px
@@ -539,6 +677,16 @@ textarea {
  }
 }
 @media only screen and (max-width: 500px) {
+ #blog-logo img {
+  max-height:80px
+ }
+ #blog-logo {
+  width:80px
+ }
+ #blog-logo:before {
+  width:80px;
+  height:80px
+ }
  .inner,
  .pagination {
   width:auto;
@@ -556,8 +704,7 @@ textarea {
   padding:10% 0
  }
  .blog-title {
-  font-size:3rem;
+  font-size:3rem
-  text-align:center;
  }
  .blog-description {
   font-size:1.5rem
@@ -580,6 +727,9 @@ textarea {
  .post-template .post-header {
   padding:30px 0
  }
+ .post-header #blog-logo:before {
+  margin:30px auto
+ }
  .post-meta {
   font-size:1.3rem
  }
@@ -590,7 +740,7 @@ textarea {
  .post-footer .author {
   margin:0 0 2rem 0;
   padding:0 0 1.6rem 0;
-  border-bottom:var(--border) 1px dashed
+  border-bottom:#424650 1px dashed
  }
  .older-posts,
  .newer-posts {
@@ -618,6 +768,7 @@ textarea {
  max-width:920px
 }
 .post-template .post-content>p:first-child {
+ font-size:1.25em;
  line-height:1.5em
 }
 .post-full-content .kg-image {
@@ -638,14 +789,11 @@ textarea {
 .post-full-content figure img {
  margin:0
 }
-.post-content figcaption {
+.post-full-content figcaption {
- margin:1.0em auto;
+ margin:1.0em 0 0;
- width: 80%;
+ font-size:80%;
- font-size:70%;
- font-style: italic;
  line-height:1.6em;
- text-align:center;
+ text-align:center
- color: var(--figcaption);
 }
 .kg-width-full figcaption {
  padding:0 1.5em

default.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html>
 <head>
     {{! Document Settings }}
     <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />

partials/header.hbs

@@ -1,6 +1,7 @@
 <header id="site-head" {{#if @site.cover_image}}style="background-image: url({{@site.cover_image}})"{{/if}}>
     <div class="">
         <div id="site-head-content" class="inner">
+
             {{> "site-nav"}}
             <h1 class="blog-title">{{@site.title}}</h1>
         </div>

partials/site-nav.hbs

@@ -4,9 +4,4 @@
             {{navigation}}
         {{/if}}
     </div>
-    <div class="site-nav-right">
-        {{#if @site.secondary_navigation}}
-            {{navigation type="secondary"}}
-        {{/if}}
-    </div>
 </nav>

post.hbs

@@ -14,19 +14,23 @@
         {{#post}}
 
         {{! Everything below outputs content of the the post which has been published }}
-        <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY' locale="fr-fr"}}</time>
+        <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY' locale="fr-fr"}}</time> {{#if tags}}dans {{tags separator=" | "}}{{/if}}</span>
-          {{#if tags}}dans {{tags separator=" | "}}{{/if}}<br />
-          {{#if updated_at}}
-            <time datetime="{{date format="YYYY-MM-DD"}}">&nbsp;&nbsp;➡ Mise à jour {{date updated_at format='DD MMM YYYY' locale="fr-fr"}}</time>
-          {{/if}}
-        </span>
 
-        <h2 class="post-title">{{{title}}}</h2>
+        <h1 class="post-title">{{{title}}}</h1>
 
         <section class="post-content">
             {{content}}
         </section>
 
+        <footer class="post-footer">
+
+            {{#if primary_author}}
+                <section class="author">
+                    <h4>{{primary_author.name}}</h4>
+                </section>
+            {{/if}}
+        </footer>
+
         {{/post}}
 
     </article>