Make articles cickables

Gentux · Sep 9, 2020 · d477dd7 · d477dd7
1 parent d0ee043
commit d477dd7
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 50 deletions.
diff --git a/Gemfile b/Gemfile
@@ -3,3 +3,4 @@ gem "kramdown"
 gem "kramdown-parser-gfm"
 gem "jekyll"
 gem "jekyll-watch"
+gem "jekyll-regex-replace"
diff --git a/_config.yml b/_config.yml
@@ -7,6 +7,9 @@ layouts_dir: ./_layouts
 exclude:     ['vendor', 'Makefile', 'README.md']
 keep_files:  ['.git', '.svn']
 
+plugins:
+  - jekyll-regex-replace
+
 collections:
   formations:
     collection_dir: _formations

diff --git a/css/blog.css b/css/blog.css
@@ -8,3 +8,10 @@
   line-height: 1.4;
   margin-bottom: auto;
 }
+
+#main-page a {
+  color: #3c484e;
+}
+#main-page a:hover {
+  text-decoration: none;
+}
diff --git a/css/homepage.css b/css/homepage.css
@@ -1,23 +1,30 @@
-a {
+footer a {
   text-decoration: none;
-  color: #2c4257;
+  color: #a36328;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
 
-a:hover {
+footer a:hover {
   text-decoration: none;
-  color: #a36328;
+  color: #2c4257;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
 
+#main-page a {
+  color: #3c484e;
+}
+#main-page a:hover {
+  text-decoration: none;
+}
+
 /* Social Links
 ---------------------------------- */
 #social{

diff --git a/css/main.css b/css/main.css
@@ -13,6 +13,10 @@ body {
   */
 }
 
+h1, h2, h3, h4, h5, h6 {
+  color: #a36328;
+}
+
 p, ul{
   font-size: 18px;
   line-height: 24px;

diff --git a/css/posts.css b/css/posts.css
@@ -1,11 +1,9 @@
 article>h1 {
   padding-bottom: 0.5rem;
-  color: #a36328;
 }
 article>h2 {
   padding-bottom: 0.5rem;
   padding-top: 1rem;
-  color: #a36328;
 }
 
 .img-author {

diff --git a/index.html b/index.html
@@ -9,41 +9,42 @@
     <div class="row">
       {% assign posts = site.posts | where:"language","fr" | sort: "toporder" %}
       {% for post in posts limit: 6 %}
+        <a href="{{ post.url }}">
         {% if forloop.index == 1 %}
-        <div class="col-md-12 col-sm-12 col-article">
-          <div class="d-md-flex flex-md-row d-sm-flex flex-sm-column mb-2">
+          <div class="col-md-12 col-sm-12 col-article">
+            <div class="d-md-flex flex-md-row d-sm-flex flex-sm-column mb-2">
         {% endif %}
         {% if forloop.index >= 2 and forloop.index <= 4 %}
-        <div class="col-md-4 col-sm-6 col-article">
-          <div class="d-md-flex flex-md-column d-sm-flex flex-sm-column mb-2">
+          <div class="col-md-4 col-sm-6 col-article">
+            <div class="d-md-flex flex-md-column d-sm-flex flex-sm-column mb-2">
         {% endif %}
         {% if forloop.index >= 5 %}
-        <div class="col-md-6 col-sm-6 col-article">
-          <div class="d-md-flex flex-md-column d-sm-flex flex-sm-column mb-2">
+          <div class="col-md-6 col-sm-6 col-article">
+            <div class="d-md-flex flex-md-column d-sm-flex flex-sm-column mb-2">
         {% endif %}
-            <div class="p-2 image">
-              {% if post.img %}
-                <img src="{{ post.img }}" class="rounded mx-auto d-block img-fluid w-100" alt="" />
-              {% else %}
-                <img src="/img/placeholder.png" class="img-fluid img-thumbnail" alt="" />
-              {% endif %}
-            </div>
+              <div class="p-2 image">
+                {% if post.img %}
+                  <img src="{{ post.img }}" class="rounded mx-auto d-block img-fluid w-100" alt="" />
+                {% else %}
+                  <img src="/img/placeholder.png" class="img-fluid img-thumbnail" alt="" />
+                {% endif %}
+              </div>
 
-            <div class="p-2 content">
-              <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
-              <p class="author-category">
-                Publié le {{ post.date | date: '%d/%m/%Y' }}
-              </p>
-              <div class="intro">
-                {{ post.excerpt }}
+              <div class="p-2 content">
+                <h4>{{ post.title }}</h4>
+                <p class="author-category">
+                  Publié le {{ post.date | date: '%d/%m/%Y' }}
+                </p>
+                <div class="intro">
+                  {{ post.excerpt | regex_replace: '\<a href=".*">', '' | remove: '</a>' }}
+                </div>
+                <p class="read-more">
+                  <a href="{{ post.url }}" class="btn btn-primary">Continuer à lire</a>
+                </p>
               </div>
-              <p class="read-more">
-                <a href="{{ post.url }}" class="btn btn-primary">Continuer à lire</a>
-              </p>
             </div>
-
           </div>
-        </div>
+        </a>
         {% if forloop.index == 1 or forloop.index == 4%}
         <div class="col-md-12 col-sm-12 col-article d-none d-md-block d-lg-block">
           <hr>

diff --git a/posts.html b/posts.html
@@ -20,28 +20,27 @@
         </a>
       </div>
 
-      <div class="p-2 content">
-        <h4>{{ post.title }}</h4>
+      <a href="{{ post.url }}">
+        <div class="p-2 content">
+          <h4>{{ post.title }}</h4>
 
-        <p class="post-author">
-          <small>
-            <span class="tags">
-              <span class="label label-primary">{{ post.language }}</span>
-            </span>
-          </small>
-          <time class="pubdate" datetime="{{ post.date | date_to_xmlschema }}">
-            <i class="fa fa-calendar"></i>
-            {{ post.date | date: '%d/%m/%Y' }}
-          </time>
-        </p>
+          <p class="post-author">
+            <small>
+              <span class="tags">
+                <span class="label label-primary">{{ post.language }}</span>
+              </span>
+            </small>
+            <time class="pubdate" datetime="{{ post.date | date_to_xmlschema }}">
+              <i class="fa fa-calendar"></i>
+              {{ post.date | date: '%d/%m/%Y' }}
+            </time>
+          </p>
 
-        <div class="intro">
-          {{ post.excerpt }}
+          <div class="intro">
+            {{ post.excerpt }}
+          </div>
         </div>
-        <p class="post-more">
-          <a class="btn btn-primary" href="{{ post.url }}">Continuer à lire</a>
-        </p>
-      </div>
+      </a>
     </div>
 
     <hr>