assets/css/screen.css

@@ -1,12 +1,12 @@
 :root {
-  --header-background-color: #1b2b34;
+  --header-background-color: #1b2b34eb;
   --main-background-color: #343D46;
-  --text: #d8dee9;
+  --text: #d8dee9fd;
-  --link: #f2b705;
+  --link: #c594c5;
-  --footer-link: #d8dee9;
+  --footer-link: #50585D;
-  --title: #f28322;
+  --title: #f99157;
   --post-title: #a7adba;
-  --border: #424650;
+  --date: #c594c5;
 }
 
 @font-face {
@@ -75,14 +75,46 @@ h6 {
  letter-spacing:2px;
  font-weight:normal
 }
-h1 a,
+h1 a {
-h2 a,
+ color: var(--post-title)
-h3 a,
+}
-h4 a,
+h2 a {
-h5 a,
+ color: var(--post-title)
+}
+h3 a {
+ color: var(--post-title)
+}
+h4 a {
+ color: var(--post-title)
+}
+h5 a {
+ color: var(--post-title)
+}
 h6 a {
  color: var(--post-title)
 }
+/* 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);
  -webkit-transition:color ease 0.3s;
@@ -108,7 +140,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
 }
@@ -302,35 +334,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: var(--post-title);
- margin:0;
+ margin:0
+}
+.post-title a {
+ color: var(--post-title) !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: var(--date)
-}
-.post .post-title {
-  margin-bottom: 25px;
 }
 .post a {
- color: var(--link);
+ color: var(--date);
  text-decoration:none
 }
 .post a:hover {
  text-decoration:underline;
+ color:#9c8aa5
+}
+.post-header a {
+ color: var(--link);
+ -webkit-transition:color ease 0.3s;
+ transition:color ease 0.3s
+}
+.post-header a:hover {
+ color:#a3be8c
 }
 .user-meta {
  position:relative;
@@ -388,7 +434,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;
@@ -425,7 +471,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;
@@ -476,6 +522,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: var(--footer-link)
+}
+.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: var(--footer-link);
+ 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: var(--footer-link) 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
@@ -570,7 +690,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 {
@@ -598,6 +718,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 {

post.hbs

@@ -16,12 +16,21 @@
         {{! 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> {{#if tags}}dans {{tags separator=" | "}}{{/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>