eh

assets/scss/layouts/articles.scss

@@ -3,6 +3,12 @@
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 1.3em;
   grid-row-gap: 1.3em;
+  &.articles-len-1{
+      grid-template-columns:repeat(1,1fr);
+  }
+  &.articles-len-2{
+      grid-template-columns:repeat(2,1fr);
+  }
 
   article {
     height: 100%;

assets/scss/layouts/photos.scss

@@ -13,6 +13,15 @@
 	grid-column-gap: 1.2em;
 	grid-row-gap: 1.2em;
 	justify-content: center;
+	&.photos-list-photos-len-1{
+	    grid-template-columns:repeat(1,1fr);
+	}
+	&.photos-list-photos-len-2{
+	    grid-template-columns:repeat(2,1fr);
+	}
+	&.photos-list-photos-len-3{
+	    grid-template-columns:repeat(3,1fr);
+	}
     }
 
     .photos-list-item {

import.insta.time

@@ -1 +1 @@
-1716788689
+1716874902

index.gzodp

@@ -56,10 +56,14 @@ if(isset($_GET["id"])){
 if(isset($_GET["limit"])){
     $limit = intval($_GET["limit"]);
     $medias = array_slice($medias, 0, $limit);
+    $supclass="";
+    if(count($medias)<4){
+	$supclass = "photos-list-photos-len-".strval(count($medias));
+    }
 }
 ?>
 <div
-class="photos-list-photos">
+class="photos-list-photos <?=$supclass?>">
 <?php
 foreach($medias as $m){
 ?>

layouts/index.html

@@ -25,6 +25,40 @@
               </div>
             </div>
           </div>
+	  <div class="w-full md:w-1/2 flex justify-between" style="flex-direction: column;">
+	  <div class="w-full">
+	      <div class="card card-red mx-2">
+		  <div class="card-title">
+		      <i class="fas fa-newspaper"></i> {{ .Site.Params.articles.title | safeHTML }}
+		  </div>
+		  <div class="card-text">
+		      <h3>{{ .Site.Params.articles.last | safeHTML }}</h3>
+		      {{ partial "articles.html" (dict "context" . "ammount" 1)}}
+		  </div>
+		  <div class="card-actions">
+		      <a href="{{ relLangURL "/blog" }}" class="card-action">
+			  {{ .Site.Params.more | safeHTML }}
+		      </a>
+		  </div>
+	      </div>
+	  </div>
+	  <div class="w-full">
+	      <div class="card card-red mx-2">
+		  <div class="card-title">
+		      <i class="fab fa-instagram"></i> {{ .Site.Params.photos.title | safeHTML }}
+		  </div>
+		  <div class="card-text">
+		      <h3>{{ .Site.Params.photos.last | safeHTML }}</h3>
+		      {{ partial "photos.html" (dict "limit" 1) }}
+		  </div>
+		  <div class="card-actions">
+		      <a href="{{ relLangURL "/photos" }}" class="card-action">
+			  {{ .Site.Params.more | safeHTML }}
+		      </a>
+		  </div>
+	      </div>
+	  </div>
+	  </div>
           <div class="w-full md:w-1/2 ">
             <div class="card card-purple mx-2">
               <div class="card-title">
@@ -43,20 +77,6 @@
               </div>
             </div>
           </div>
-	  <div class="w-full md:w-1/2">
-	      <div class="card card-red mx-2">
-		  <div class="card-title">
-		      HELLOWORLD
-		  </div>
-		  <div class="card-text">
-		      Salut le monde
-		  </div>
-		  <div class="card-actions">
-		      <a href="/blog" class="card-action">Hello</a>
-		      <a href="/photos" class="card-action">World</a>
-		  </div>
-	      </div>
-	  </div>
           <div class="w-full md:w-1/2">
             <div class="card card-green mx-2">
               <div class="card-title">
@@ -81,7 +101,7 @@
           <i class="fa fas fa-newspaper"></i>
           {{ .Site.Params.articles.last | safeHTML }}
         </h2>
-	{{ partial "articles.html" (dict "Paging" true "context" . "ammount" 3)}}
+	{{ partial "articles.html" (dict  "context" . "ammount" 3)}}
         <div class="index-more-section">
           <a
 		  href="{{ relLangURL "/blog" }}"
@@ -95,7 +115,7 @@
         <div class="clear-fix"></div>
         <div class="divider mt-4 mb-5"></div>
         <h2 class="index-icon-title py-2 mb-5">
-          <i class="fa fas fa-newspaper"></i>
+          <i class="fab fa-instagram"></i>
           {{ .Site.Params.photos.last | safeHTML }}
         </h2>
 	{{ partial "photos.html" (dict "limit" 4) }}

layouts/partials/articles.html

@@ -20,7 +20,7 @@
       </div>
       {{ else }}
       <div
-        class="articles">
+	      class="articles {{ if (lt $ammount 3) }}articles-len-{{ $ammount }}{{ end }}">
 	{{ $pageslist := (first $ammount $allposts )}}
 	{{ if .pagination }}
 	{{ $pageslist = ($context.Page.Paginate $allposts (cast.ToInt $ammount)).Pages }}

layouts/partials/photos.html

@@ -1,4 +1,5 @@
-<div id=photoslist class="transition-parent photos-list">
+<div id="photoslist{{ if .limit }}-{{ .limit }}{{ end }}" class="transition-parent photos-list">
+    <span id="number" name="{{if .limit }}{{ .limit }}{{ end }}"></span>
     <div
 	    class="transition-child section-error-container"
 	    style="height: 100%;">
@@ -9,19 +10,21 @@
     </div>
 </div>
 <script defer>
-    function loadimages(){
+    function loadimages(limit=-1){
 	    var http = new XMLHttpRequest();
-	    var url = '/getallphotos{{ if .limit }}?limit={{ .limit }}{{ end }}';
+	    let issetlimit = (limit!=-1);
+	    var url = '/getallphotos'+(issetlimit?('?limit='+limit):'');
 	    http.open('GET', url, false);
 	    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 	    http.onreadystatechange = function() {//Call a function when the state changes.
 		    if(http.readyState == 4 && http.status == 200) {
 			    let responsehtml = http.responseText;
-			    document.querySelector("#photoslist").innerHTML = responsehtml;
+			    document.querySelectorAll("#photoslist"+(issetlimit?`-${limit}`:'')).forEach(
+			    e=>{e.innerHTML = responsehtml});
 			}
 
 		}
 	    http.send();
 	}
-	loadimages();
+	loadimages({{ if .limit }}{{ .limit }}{{ end }});
 </script>