Merge branch '3-css-change' into 'master'

Resolve "CSS change"

Closes #3

See merge request !3

_cobalt.yml

@@ -16,8 +16,8 @@ posts:
   jsonfeed: ~
   default: {}
 site:
-  title: cobalt blog
-  description: ~
+  title: "@mnivoliez blog"
+  description: Site about Mathieu Nivoliez and his thoughts
   base_url: ~
   data: ~
 template_extensions:
@@ -31,4 +31,4 @@ syntax_highlight:
   theme: "base16-ocean.dark"
 assets:
   sass:
-    style: Nested
\ No newline at end of file
+    style: Nested

_includes/_disqus.liquid

-<div id="disqus_thread"></div>
+<article id="disqus_thread"></article>
 <script>
 
 /**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
-
 var disqus_config = function () {
-  this.page.url = "https://blog.deep-nope.me/posts/{{ page.permalink }}";  // Replace PAGE_URL with your page's canonical URL variable
-  {% if page.data.dsq_thread_id %}
+  this.page.url = "https://www.mathieu-nivoliez.com/posts/{{ page.permalink }}";  // Replace PAGE_URL with your page's canonical URL variable
+  {% if page.data.dsq_thread_id != "" %}
   this.page.identifier = {{ page.data.dsq_thread_id }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
   {%endif%}
 };
 
 (function() { // DON'T EDIT BELOW THIS LINE
 var d = document, s = d.createElement('script');
-s.src = 'https://https-blog-deep-nope-me.disqus.com/embed.js';
+s.src = 'https://www-mathieu-nivoliez-com.disqus.com/embed.js';
 s.setAttribute('data-timestamp', +new Date());
 (d.head || d.body).appendChild(s);
 })();

_includes/_head.liquid

@@ -3,8 +3,8 @@
 <title>{{ page.title }}</title>
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<link rel="stylesheet" href="https://writ.cmcenroe.me/1.0.2/writ.min.css">
+<link rel="stylesheet" href="https://writ.cmcenroe.me/1.0.4/writ.min.css">
 <link rel="stylesheet" href="/style.css" type="text/css" media="all" />
 <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />
 <meta name="author" content="Mathieu Nivoliez">
-<meta name="description" content="Personal website of Mathieu Nivoliez."/>
+<meta name="description" content="{{ site.description }}"/>

_includes/_headbar.liquid

 <header>
-  <div class="logo"><img src="/images/cropped-cropped-imgpsh_fullsize.png" /></div>
-  <div class="title">
-    <h1><a href="/">Deep Blog</a></h1>
-  </div>
+  <h1>@mnivoliez Blog</h1>
+  <nav>
+    <a href="/"><h2>Articles</h2></a> 
+  </nav>
 </header>

_includes/_post-card.liquid

 <article class="post-card">
-{% comment %}
-  <!--{% if post.data.img_cover %}
-    <img class="post-card-cover" src="{{ post.data.img_cover }}">
-  {% endif %}-->
-{% endcomment %}
-
-  <div class="post-card details">
-    <a style="text-decoration:none;" href="{{ post.permalink }}"><strong style="color:#00bcd4;"><h2>{{ post.title }}</h2></strong></a>
-    <div class="post-meta"><time datetime="{{ post.published_date }}">{{ post.published_date | date: '%b %-d, %Y' }}</time> / {{ post.data.author }}</div>
-    {{ post.excerpt }}
-    <form class="post-form" action="{{ post.permalink }}" method="GET">
-      <button type="submit" class="button green">Read more<i class="material-icons">chevron_right</i></button>
-    </form>
-  </div>
+  <a class="post-title" href="{{ post.permalink }}"><strong><h2>{{ post.title }}</h2></strong></a>
+  <div class="post-meta"><time datetime="{{ post.published_date }}">{{ post.published_date | date: '%b %-d, %Y' }}</time> / {{ post.data.author }}</div>
+  {{ post.excerpt }}
+  <a class="post-readmore" href="{{ post.permalink }}">Read more<i style="vertical-align: bottom;" class="material-icons">chevron_right</i></a>
 </article>

_includes/_reading-time.liquid

@@ -9,4 +9,4 @@
                           {% else %}								
     {% assign phrase = " minutes." | prepend: reading_time %}
 {% endcase %}
-<time pubdate="pubdate">{{ page.published_date | date: "%b %d, %Y" }} - Reading time: {{ phrase }}</time><br />
+<div class="post-meta"><time pubdate="pubdate">{{ page.published_date | date: "%b %d, %Y" }} - Reading time: {{ phrase }}</time></div><br />

_layouts/post.liquid

@@ -7,7 +7,7 @@
   {% include "_headbar.liquid" %}
   <main>
     <article>
-      <h1>{{ page.title }}</h1>
+      <h1 class="post-title">{{ page.title }}</h1>
       {% include "_reading-time.liquid" %} 
       {{ page.content }}
     </article>

index.liquid

-title: The DEEP BLOG
+title: "@MNivoliez Blog"
 layout: default.liquid
 data:
   lang: en
 ---
-<div>
-  <div class="posts-container">
-    {% for post in collections.posts.pages %}
-      {% include "_post-card.liquid" %}      
-    {% endfor %}
-  </div>
+<div class="posts-container">
+  {% for post in collections.posts.pages %}
+    {% include "_post-card.liquid" %}      
+  {% endfor %}
 </div>

style.css

 :root {
-  --dark-grey: #211D27;
-  --light-grey: #404040;
-  --dark-purple: #332453;
-  --purple: #563C7E;
-  --light-purple:#7665B8;
-  --green: #4caf50;
-
   --font-stack: helvetica, arial, sans-serif;
   --text-color: white;
   --text-color-light-grey: #828282;
+  --title-color: #00bcd4;
 
-  --breakpoint: 41em;
-}
+  --background-color: #607D8B;
+  --header-background-color: rgb(55, 71, 79);
+  --element-background-color: rgb(48, 48, 48);
 
-* {
-  box-sizing: border-box;
+  --breakpoint: 41em;
 }
 
 html {
@@ -23,52 +17,48 @@ html {
 
 body {
   color: var(--text-color);
-  background-color: var(--dark-purple);
+  background-color: var(--background-color);
   font-family: var(--font-stack);
   line-height: 1.4;
   margin: 0;
 }
 
 main {
+  padding-top: 20px;
+  margin-top: 90px;
   max-width: 100ch;
 }
 
-a {
-}
-
 header {
-  width: 100%;
-  display: grid;
-  grid-template-areas: "l c r";
-  grid-template-columns: 1fr 2fr 1fr;
-  padding-top: 1em;
-  background-color: var(--dark-grey);
-  margin-bottom: 20px;
+  top: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  padding: 5px;
+  height: 90px;
+  background-color: var(--header-background-color);
+  box-shadow:rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
 }
 
-header .logo {
-  grid-area: l;
-  text-align: left;
-}
 
-header .logo img {
-  max-height: 200px;
+header nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
-header .title {
-  grid-area: c;
-  display: inline-flex;
-  flex-direction: column;
-  align-content: center;
+nav a {
+  text-decoration: none;
+  color: var(--text-color) !important;
 }
-
-header .title h1 {
+nav a h2 {
   margin: auto;
 }
 
-header nav {
-  justify-content: center;
-}
 
 
 @media (max-width: 41em) {
@@ -91,80 +81,58 @@ section {
 }
 
 article {
-  border-radius: 2px;
-  background-color: var(--light-grey);
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-top: 15px;
+  margin: 2px;
+  padding-left: 10px;
+  padding-right: 10px;
   padding-bottom: 10px;
-  margin-top: 32px;
-  margin-bottom: 10px;
-  margin-right: auto;
-  margin-left: auto;
+  background-color: var(--element-background-color);
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  border-radius: 2px;
 }
 
 #disqus_thread {
-  border-radius: 2px;
-  background-color: var(--light-grey);
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-top: 15px;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
-  margin-right: auto;
-  margin-left: auto;
-
 }
 
 footer {
-  text-align: center;
-  padding-top: 1em;
-  background-color: var(--dark-grey);
+  background-color: var(--element-background-color);
+  width: 100%;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
   max-width: none !important;
+  text-align: center;
 }
 
-footer p {
-  margin: 0;
-  padding: 1em 0;
+.posts-container {
+  display: flex;
+  flex-direction: column;
 }
 
 .post-card {
-  background-color: var(--light-grey);
-  border-radius: 2px;
-  margin: 5px;
-  padding-right: 30px;
-  padding-left: 30px;
-  padding-top: 15px;
-  padding-bottom: 10px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
 }
 
-.post-card .details {
-  margin: 5px;
-  display: inline-flex;
-  flex-direction: column;
+.post-title {
+  text-decoration: none;
+  color: var(--title-color) !important; 
 }
 
 .post-meta {
+  padding-left: 10px;
   color: var(--text-color-light-grey);
 }
 
-.post-form {
-  display: inline-flex;
-  justify-content: flex-end;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  outline: medium none currentcolor;
-  border: 10px none;
-  cursor: pointer;
-  height: 36px;
-  line-height: 36px;
+.post-readmore {
+  color: var(--text-color) !important;
+  text-decoration: none;
+  padding: 2px;
+  justify-content: center;
   border-radius: 2px;
+  display: inline-block;
+  background-color: rgb(76, 175, 80);
+  align-self: flex-end;
 }
 
-.button.green {
-  background-color: var(--green);
-}
+