items

user/config/plugins/taxonomylist.yaml

@@ -0,0 +1,2 @@
+enabled: true
+route: /blog

user/themes/gilles_acezat/js/site.js

@@ -53,8 +53,8 @@ function ajax() {
             }
         });
     });
-
 }
+
 jQuery(document).ready(function($){
   masonry();
   // card();

user/themes/gilles_acezat/scss/theme/_blog.scss

@@ -1,48 +1,9 @@
-.card{
-  width: calc(100% / 3);
-  padding: 0 10px;
-  .card-header{
-    display: inline-flex;
-    & > div{
-      margin-right: 5px;
-      & > a{
-        vertical-align:  baseline;
-      }
-      & > time{
-        vertical-align:  baseline;
-      }
-    }
-  }
-}
-
 #items{
   .full-works{
     width: 100%;
   }
   .card{
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     min-width: 200px;
   }
 }
-
-#body-wrapper.blog-listing{
-  border-top: 1px solid black;
-  padding-top: 20px;
-  #items{
-    .content-title{
-      display: inline-flex;
-      align-items: baseline;
-    }
-    .e-content{
-      width: calc(33% * 2);
-      column-count: 2;
-      margin: 20px  0;
-      & > p{
-      }
-    }
-    .top{
-      text-align: center;
-      margin-bottom: 20px;
-    }
-  }
-}

user/themes/gilles_acezat/scss/theme/_header.scss

@@ -13,15 +13,8 @@ body{
         &.works-mea{
           display: inline-flex;
           flex-wrap: wrap;
-          // margin-bottom: 70px;
           align-items: flex-end;
           height: 100%;
-          .card{
-            line-height: 0.8!important;
-            .card-header{
-              margin-top: 10px;
-            }
-          }
         }
       }
       h1{

user/themes/gilles_acezat/scss/theme/_typography.scss

@@ -3,24 +3,6 @@ h1, h2{
   font-weight: normal;
 }
 
-body{
-  &>.blog{
-    h1{
-      font-size: $fh1;
-      -webkit-text-stroke:.1rem #111;
-      color: transparent;
-      line-height: 7rem;
-    }
-  }
-}
-
-body{
-  &>.item{
-    h1{
-      font-size: $fh2;
-    }
-  }
-}
 
 h2{
   font-size: $fh2;
@@ -49,7 +31,6 @@ time{
   font-weight: normal;
 }
 
-
 header{
   .contact{
     h3{
@@ -60,31 +41,6 @@ header{
     }
   }
 }
-.card{
-  h5{
-    text-transform: uppercase;
-  }
-  .card-category{
-      font-family: $italic;
-      font-weight: normal;
-      font-size: $fs;
-  }
-  .card-date{
-    font-size: $fs;
-  }
-  .card-footer{
-    span{
-      font-family: $medium;
-      font-weight: normal;
-      font-size: $fs;
-      text-transform: capitalize;
-      a{
-        color: $grey;
-      }
-    }
-  }
-
-}
 
 .scroll{
   p{
@@ -103,30 +59,78 @@ header{
   }
 }
 
-
+body{
-#items{
+  &>.blog{
-  .content-item{
+    h1{
-    .content-title{
+      font-size: $fh1;
-      h2{
+      -webkit-text-stroke:.1rem #111;
-        font-size: $fh2-i;
+      color: transparent;
-      }
+      line-height: 7rem;
-      & > a{
-        font-family: $italic;
-      }
     }
-  }
+    .card{
-  .top{
+      h5{
-    p{
+        text-transform: uppercase;
-      font-family: $bold;
+      }
+      .card-category{
+        font-family: $italic;
+        font-weight: normal;
+        font-size: $fs;
+      }
+      .card-date{
+        font-size: $fs;
+      }
+      .card-footer{
+        span{
+          font-family: $medium;
+          font-weight: normal;
+          font-size: $fs;
+          text-transform: capitalize;
+          a{
+            color: $grey;
+          }
+        }
+      }
     }
   }
 }
 
-
 body{
-  & > .item{
+  & >.item{
+    h1{
+      font-size: $fh2;
+    }
     h2{
       font-size: $fh2-i;
     }
+    .content-item{
+      .content-title{
+        & > a{
+          font-family: $italic;
+        }
+      }
+    }
+    .category{
+        font-family: $italic;
+        font-weight: normal;
+        font-size: $fs-i;
+    }
+    time{
+      font-size: $fs;
+      font-size: $fs-i;
+    }
+    .tags{
+        font-family: $medium;
+        font-weight: normal;
+        font-size: $fs-i;
+        text-transform: capitalize;
+        a{
+          color: $grey;
+        }
+      }
+    .top{
+      p{
+        font-family: $bold;
+      }
+    }
   }
 }

user/themes/gilles_acezat/scss/theme/_variables.scss

@@ -14,6 +14,7 @@ $fh3: 1rem;
 $fh5:0.8rem;
 $fp: 1rem;
 $fs:0.8rem;
+$fs-i: 1.3rem;
 // interline
 
 //interlettre

user/themes/gilles_acezat/scss/theme/all.scss

@@ -30,3 +30,22 @@ header{
     margin-left: 10px;
   }
 }
+
+.card{
+  width: calc(100% / 3);
+  padding: 0 10px;
+  line-height: 0.8!important;
+  .card-header{
+    margin-top: 10px;
+    display: inline-flex;
+    & > div{
+      margin-right: 5px;
+      & > a{
+        vertical-align:  baseline;
+      }
+      & > time{
+        vertical-align:  baseline;
+      }
+    }
+  }
+}

user/themes/gilles_acezat/scss/theme/item.scss

@@ -0,0 +1,41 @@
+body{
+  & >.item{
+    #body-wrapper.blog-listing{
+      border-top: 1px solid black;
+      padding-top: 20px;
+      .header-item{
+        position: relative;
+        .title{
+          display: inline-flex;
+          align-items: baseline;
+          h2{
+            margin-right: 5px;
+          }
+          time{
+            margin-right: 5px;
+          }
+          span{
+            margin-right: 5px;
+          }
+        }
+        .content{
+          width: calc((100% / 3) * 2);
+          .txt{
+            column-count: 2;
+            margin: 20px  0;
+          }
+        }
+        .prev-next{
+          position: absolute;
+          width: calc(100% / 3);
+          top: 0;
+          right: 0;
+        }
+        .top{
+          text-align: center;
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+}

user/themes/gilles_acezat/templates/blog.html.twig

@@ -15,16 +15,8 @@
             {% block item %}
                 <div class="cat-list">
                   <ul>
-
+                    {% include 'partials/taxonomylist.html.twig' with {base_url: my_url, taxonomy: 'category', children_only: true} %}
-                  {% for child in collection if child.template == 'item' %}
-                    {% if child.taxonomy.category %}
-                      <li class="cat">
-                        {% include 'partials/blog/category.html.twig' with {blog: page, page: child} %}
-                      </li>
-                    {% endif %}
-                  {% endfor %}
                 </ul>
-
                 </div>
 
                 <div class="works full-works">

user/themes/gilles_acezat/templates/partials/blog-item.html.twig

@@ -1,65 +1,70 @@
   {% if not hero_image_name %}
-      <div class="content-title text-center">
+  <div class="header-item">
+      <div class="title">
           {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
           {% if page.header.subtitle %}
           <h3 >{{ page.header.subtitle }}</h3>
           {% endif %}
           {% include 'partials/blog/date.html.twig' %}
           {% include 'partials/blog/category.html.twig' %}
-          {% include 'partials/blog/taxonomy.html.twig' %}
+      </div>
-
+      <div class="tags">
+        {% include 'partials/blog/taxonomy.html.twig' %}
       </div>
   {% endif %}
 
-  <p class="prev-next text-center">
 
-      {% if not page.isLast %}
+  <div class="content">
-              <a class="btn" href="{{ page.prevSibling.url }}">
+    <div class="txt">
-
-                <span class="title">{{ page.prevSibling.title }}</span>
-
-                {% if page.prevSibling.taxonomy.category %}
-                <span class="tags">
-                    {% for category in page.prevSibling.taxonomy.category %}
-                  {{ category }}
-                    {% endfor %}
-                </span>
-                {% endif %}
-
-                <span class="blog-date">
-                  <time class="dt-published" datetime="{{ page.date|date("c") }}">
-                      {{ page.prevSibling.date|date("Y") }}
-                  </time>
-                </span>
-            </a>
-      {% endif %}
-
-      {% if not page.isFirst %}
-          <a class="btn" href="{{ page.nextSibling.url }}">
-            <span class="title">{{ page.nextSibling.title }}</span>
-
-          {% if page.nextSibling.taxonomy.category %}
-          <span class="tags">
-              {% for category in page.nextSibling.taxonomy.category %}
-            {{ category }}
-              {% endfor %}
-          </span>
-          {% endif %}
-
-          <span class="blog-date">
-            <time class="dt-published" datetime="{{ page.date|date("c") }}">
-                {{ page.nextSibling.date|date("Y") }}
-            </time>
-          </span>
-  </a>
-
-      {% endif %}
-  </p>
-
-  <div class="e-content">
       {{ page.content|raw }}
+    </div>
   </div>
 
+  <div class="prev-next">
+
+    {% if not page.isLast %}
+    <a class="btn" href="{{ page.prevSibling.url }}">
+
+      <span class="title">{{ page.prevSibling.title }}</span>
+
+      {% if page.prevSibling.taxonomy.category %}
+      <span class="tags">
+        {% for category in page.prevSibling.taxonomy.category %}
+        {{ category }}
+        {% endfor %}
+      </span>
+      {% endif %}
+
+      <span class="blog-date">
+        <time class="dt-published" datetime="{{ page.date|date("c") }}">
+          {{ page.prevSibling.date|date("Y") }}
+        </time>
+      </span>
+    </a>
+    {% endif %}
+
+    {% if not page.isFirst %}
+    <a class="btn" href="{{ page.nextSibling.url }}">
+      <span class="title">{{ page.nextSibling.title }}</span>
+
+      {% if page.nextSibling.taxonomy.category %}
+      <span class="tags">
+        {% for category in page.nextSibling.taxonomy.category %}
+        {{ category }}
+        {% endfor %}
+      </span>
+      {% endif %}
+
+      <span class="blog-date">
+        <time class="dt-published" datetime="{{ page.date|date("c") }}">
+          {{ page.nextSibling.date|date("Y") }}
+        </time>
+      </span>
+    </a>
+    {% endif %}
+  </div>
+</div>
+
   <div class="img">
   {% set image = page.media.images|first %}
   {% if image %}

user/themes/gilles_acezat/templates/partials/blog/category.html.twig

@@ -1,5 +1,7 @@
 {% if page.taxonomy.category %}
+<span class="category">
     {% for category in page.taxonomy.category %}
-    <a href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}" data-filter="{{ category }}" >{{ category }}</a>
+    <a class="label label-rounded {{ label_style ?: 'label-secondary' }} p-category" href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}#body-wrapper">{{ category }}</a>
     {% endfor %}
+</span>
 {% endif %}

user/themes/gilles_acezat/templates/partials/taxonomylist.html.twig

@@ -1,10 +1,12 @@
 {% set taxlist = children_only is defined ? taxonomylist.getChildPagesTags() : taxonomylist.get() %}
 
 {% if taxlist %}
-<span class="tags">
     {% for tax,value in taxlist[taxonomy] %}
         {% set label_class = uri.param(taxonomy) == tax ? 'label-primary' : 'label-secondary' %}
-        <a class="label label-rounded {{ label_class }}" href="{{ base_url }}/{{ taxonomy }}{{ config.system.param_sep }}{{ tax }}">{{ tax }}</a>
+        <li class="cat">
+        <a class="label label-rounded {{ label_class }}" href="{{ base_url }}/{{ taxonomy }}{{ config.system.param_sep }}{{ tax }}">
+            {{ tax }}
+        </a>
+      </li>
     {% endfor %}
-</span>
 {% endif %}