Improve design

404.md

@@ -1,10 +1,10 @@
 ---
-layout: default
-permalink: /404/
+layout: markdown
+permalink: /404.html
 ---
 
-# 404
+# Erreur 404
 
-**Page non trouvée :(**
+**Page non trouvée 😢**
 
-La page demandée n'a pas été trouvé ou n'existe pas
+La page demandée n'a pas été trouvé ou n'existe pas.

_data/projets.yml

@@ -0,0 +1,9 @@
+- title: BordPi
+  github: LucasCtrl/BordPi
+  image: bordpi.png
+  description: Robot Discord gérant et aidant les utilisateurs des serveurs.
+
+- title: BYInternet
+  github: LucasCtrl/BookmarkYourInternet
+  image: bookmarkyourinternet.png
+  description: Application pour lister les favoris.

_layouts/blog.html

@@ -2,21 +2,31 @@
 layout: default
 ---
 
-<div class="blog">
-  <div class="post">
-    <div class="post-title">
-      {{ page.title }}
-      <div class="post-date">
-        {{ page.date | date: "%d/%m/%Y" }}
-      </div>
+<article class="article">
+  <header class="single-header">
+    <img src="{{ site.baseurl }}assets/images/{{ page.image }}" alt="{{ page.title }}" width="75" height="75">
+    <h1>{{ page.title }}</h1>
+    <div class="post-date">
+      <time>
+          {% assign m = page.date | date: "%-m" %}
+          {{ page.date | date: "%-d" }}
+          {% case m %}
+            {% when '1' %}Janvier
+            {% when '2' %}Février
+            {% when '3' %}Mars
+            {% when '4' %}Avril
+            {% when '5' %}Mai
+            {% when '6' %}Juin
+            {% when '7' %}Juillet
+            {% when '8' %}Août
+            {% when '9' %}Septembre
+            {% when '10' %}Octobre
+            {% when '11' %}Novembre
+            {% when '12' %}Décembre
+          {% endcase %}
+          {{ page.date | date: "%Y" }}
+      </time>
     </div>
-    <div class="post-content">
-      {{ content }}
-    </div>
-    <div class="post-tags">
-      {%for tag in page.tags %}
-        #{{ tag }}
-      {% endfor %}
-    </div>
-  </div>
-</div>
+  </header>
+  {{ content }}
+</article>

_layouts/default.html

@@ -22,5 +22,7 @@
 
   {% include footer.html %}
 
+  <!-- Github:buttons script -->
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>

_layouts/markdown.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<section class="section">
+  {{ content }}
+</section>

_posts/blog/2018-10-13-test.md

@@ -2,6 +2,7 @@
 layout: blog
 title:  "Test"
 date:   2018-10-13
+image: jekyll_logo.png
 categories: blog
 tags: ["TEST"]
 published: false

_posts/blog/2018-10-14-hello-world.md

@@ -1,25 +1,26 @@
 ---
 layout: blog
 title:  "Hello world"
-date:   2018-10-14
+date:   2018-12-17
+image: jekyll_logo.png
 categories: blog
 tags: ["laviedublog"]
 published: true
 ---
 
-Après presque un an d'absence, je profite du fait d'avoir complétement refait mon site pour recommencer mon blog. Cette fois-ci, j'essayerai de poster des billets un peu plus souvent et de manière plus régulière. Je profiterai aussi de l'occasion pour réécrire d'ancien billet pour les remettres au goût du jour.
+Après plus d'un an d'absence, je profite du fait d'avoir complétement refait mon site pour recommencer mon blog. Cette fois-ci, j'essayerai de poster des billets un peu plus souvent et de manière plus régulière. Je profiterai aussi de l'occasion pour réécrire d'ancien billet pour les remettres au goût du jour.
 
 ### Un nouveau site, une nouvelle identité visuelle
 
-Le site est maintenant développé avec **Jekyll**, un générateur de site web statique utilisant Ruby. Anciennement, j'utilisais Hexo, aussi un générateur de site web statique, mais utilisant, lui, Node.js. Le souci de celui-ci c'est que les thèmes étaient un peu plus compliqués à gérer ce que me limitait un peu dans la créativité. Suite à cette modification, j'ai décidé de faire un site minimaliste, sans trop de fioritures, que j'ai entièrement développé *from scratch*.
+Le site est maintenant développé avec **Jekyll**, un générateur de site web statique utilisant Ruby. Anciennement, j'utilisais Hexo, aussi un générateur de site web statique, mais utilisant, lui, Node.js. L'inconvénient de ce dernier, c'est la gestion des thèmes est un peu plus compliqués à gérer ce que me limitait un peu dans la créativité. Suite à cette modification, j'ai décidé de faire un site minimaliste, sans trop de fioritures. Le thème, est un thème wordpress développé par [Tania Rascia](https://www.taniarascia.com/) que j'ai adapté pour Jekyll.
 
-Le site évoluera au fur et à mesure du temps avec quelques modifications du point de vu visuel et accessibilité, mais ca, sa sera pour plus tard :wink:.
+Le site évoluera au fur et à mesure du temps avec quelques modifications du point de vu visuel et accessibilité, mais ca, sa sera pour plus tard 😉.
 
-Pour ceux qui souhaiteraient avoir la stack complète du site, je vous invite à aller voir mon [repository github](https://github.com/lucasctrl/portfolio) que je mets à jour régulièrement quand je fais une modification.
+Pour ceux qui souhaiteraient avoir la stack complète du site, je vous invite à aller voir mon [repository github](https://github.com/lucasctrl/portfolio) qui est mis à jour régulièrement.
 
 ### L'orientation du blog
 
 Étant donné que je fais du développement, il y aura quelques billets concernant ce domaine mais je vais essayer de me diversifier en parlant de différentes choses.
 
 - M'étant lancé dans la fabrication d'une imprimante 3D basée sur la [RepRap iTopie](https://reprap.org/wiki/ITopie), j'en profiterai pour vous faire découvrir les différentes phases de fabrications de celle-ci.
-- Au cours de l'année 2018-2019, je participerai aussi à la fabrication d'un [Teardrop](https://www.pinterest.fr/search/pins/?q=teardrop), ce qui me permettra aussi d'alimenter le blog en essayant de vous présenter toutes les phases de conception et de fabrication.
+- Pour ma dernière année de BTS Développement Réalisation Bois, j'essayerai de partager mes derniers projets avec de petites vidéos.

about.md

@@ -0,0 +1,6 @@
+---
+layout: markdown
+permalink: /me/
+---
+
+## Cette catégorie arrivera dans le futur

assets/css/components/grid.css

@@ -1,11 +1,21 @@
 .main-content {
   margin-top: 70px;
   padding-top: 80px;
+
+  min-height: calc(100vh - 250px)
 }
 
 .container {
   margin: 0 auto;
   padding: 0 15px;
 
   max-width: 850px;
+}
+
+.section {
+  margin: 80px 0;
+}
+
+.section:first-of-type {
+  margin-top: 0; 
 }

assets/css/components/navbar.css

@@ -8,6 +8,8 @@
 
   background-color: #fff;
   border-bottom: 2px solid #eee;
+
+  z-index: 1;
 }
 
 .nav a {

assets/css/components/post.css

@@ -0,0 +1,77 @@
+.single-header {
+  margin-bottom: 60px;
+  text-align: left;
+}
+
+.single-header h1 {
+  margin: 8px 0;
+}
+
+.post {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 16px;
+
+  border-bottom: 2px solid #f2f2f2;
+  border-radius: 3px;
+}
+
+.post:last-of-type {
+  border-bottom: none;
+}
+
+.post:hover {
+  background-color: #f2f2f2;
+  text-decoration: none !important;
+}
+
+.post-thumbnail {
+  margin-right: 20px;
+  width: 30px;
+}
+
+.post-thumbnail img {
+  display: block;
+}
+
+.post-title {
+  flex: 2;
+
+  margin-right: 32px;
+
+  color: #333;
+  font-weight: 500;
+}
+
+.post:hover .post-title{
+  color: #111;
+}
+
+a.post-title:hover {
+  text-decoration: underline;
+}
+
+.post-title, a.post-title {
+  display: block;
+}
+
+.post-description {
+  flex: 8;
+  margin: 0 32px 0 16px;
+  color: #888;
+}
+
+.post-description p {
+  margin: 0;
+}
+
+.post-date {
+  color: #888;
+  font-size: 14px;
+}
+
+.post-date, .post-description {
+  display: block;
+}

assets/css/components/utils.css

@@ -0,0 +1,19 @@
+h1, h2, h3, h4, h5, h6 {
+  color: #111;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+a {
+  color: #3fB0ff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #0046ce;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

assets/css/main.css

@@ -4,10 +4,13 @@
 
 @import url(./components/grid.css);
 @import url(./components/navbar.css);
+@import url(./components/utils.css);
+@import url(./components/post.css);
 @import url(./components/footer.css);
 
 html {
   font-size: 1rem;
+  line-height: 1.5;
 }
 
 body{

blog.html

@@ -3,20 +3,6 @@
 permalink: /blog/
 ---
 
-<div class="posts">
-  {% for post in site.categories.blog %}
-    <div class="post">
-      <a href="{{ post.url }}" class="post-title">
-        <div>
-          {{ post.title }}
-          <div class="post-date">
-            {{ post.date | date: "%d/%m/%Y" }}
-          </div>
-        </div>
-      </a>
-      <div class="post-content">
-        {{ post.excerpt }}
-      </div>
-    </div>
-  {% endfor %}
-</div>
+<section class="section">
+  <h2>Cette catégorie arrivera dans le futur</h2>
+<section>

contact.md

@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: markdown
 permalink: /contact/
 ---