Generalize tiles and use it for plugins

assets/css/tiles.css

@@ -14,9 +14,12 @@
   color: inherit;
   position: relative;
   background-color: var(--tile-color);
-  padding: 30px 35px;
+  padding: 40px 45px;
   box-sizing: border-box;
 }
+.tileWrapper[size="small"] .tile {
+  padding: 30px 35px;
+}
 .nonTouch .tile {
   transition: 0.35s ease-out;
 }
@@ -68,7 +71,14 @@
   margin-bottom: 35px;
 }
 @media (min-width:  600px) {
-  .tileWrapper {
+  .tileWrapper[size="small"] {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+  }
+}
+@media (min-width:  768px) {
+  .tileWrapper[size="big"] {
     display: flex;
     flex-wrap: wrap;
     padding: 0;
@@ -114,18 +124,47 @@
 }
   
 /* Tile: width: (100 - N * margin) / N (with N = number of tiles)  */
+
+/* SMALL TILES */
 @media (min-width:  600px) { /* 2 Tiles */
-  .tileWrapper > div {
+  .tileWrapper[size="small"] > div,
+  .tileWrapper[size="small"] .tile,
+  .tileWrapper[size="small"] > div.tileTitle,
+  .tileWrapper[size="small"] .tile.tileWrapperTitle  {
     width: 49%;
   }
 }
 @media (min-width:  768px){ /* 3 Tiles */
-  .tileWrapper > div {
+  .tileWrapper[size="small"] > div,
+  .tileWrapper[size="small"] .tile,
+  .tileWrapper[size="small"] > div.tileTitle,
+  .tileWrapper[size="small"] .tile.tileWrapperTitle  {
     width: 32.33%;
   }
 }
-@media (min-width:  900px) { /* 4 Tiles */
-  .tileWrapper > div {
-    width: 24%;
+@media (min-width:  1260px) { /* 4 Tiles */
+  .tileWrapper[size="small"] > div,
+  .tileWrapper[size="small"] > .tile,
+  .tileWrapper[size="small"] > div.tileTitle,
+  .tileWrapper[size="small"] > .tile.tileWrapperTitle  {
+      width: 24%;
+  }
+}
+
+/* BIG TILES */
+@media (min-width:  768px) { /* 2 Tiles */
+  .tileWrapper[size="big"] > div,
+  .tileWrapper[size="big"] .tile,
+  .tileWrapper[size="big"] > div.tileTitle,
+  .tileWrapper[size="big"] .tile.tileWrapperTitle  {
+    width: 49%;
   }
 }
+@media (min-width:  1260px){ /* 3 Tiles */
+  .tileWrapper[size="big"] > div,
+  .tileWrapper[size="big"] .tile,
+  .tileWrapper[size="big"] > div.tileTitle,
+  .tileWrapper[size="big"] .tile.tileWrapperTitle  {
+    width: 32.33%;
+  }
+}
\ No newline at end of file

html/documentation.html

@@ -22,7 +22,7 @@ title: Documentation - Frama-C
           <p>The Frama-C kernel and plug-ins have <a href="/html/kernel-plugin.html">a detailed documentation page</a>.
           </p>
 
-          <div class="tileWrapper">
+          <div class="tileWrapper" size="small">
             <div class="tileWrapperTitle">
               <span>Frama-C and ACSL</span>
             </div>
@@ -65,7 +65,7 @@ title: Documentation - Frama-C
             </div>
           </div>
 
-          <div class="tileWrapper">
+          <div class="tileWrapper" size="small">
             <div class="tileWrapperTitle">
               <span>Plug-ins Manuals</span>
             </div>

html/kernel-plugin.html

@@ -6,27 +6,23 @@ active: 1
 ---
 
 
-<div class="pluginListwrap">
 {% for category in site.data.plugins_categories %}
-<section>
-  <div class="pluginListTitle">
+<div class="tileWrapper" size="big">
+  <div class="tileWrapperTitle">
 	<span>{{ category.name }}</span>
   </div>
   {% for distrib in site.data.plugins_distrib_mode %}
 	{% for plugin in site.fc-plugins %}
 	  {% if plugin.key == category.key and plugin.distrib_mode == distrib.key %}
-	  <a role="link" href="{{ plugin.url }}" class="listItem">
-		<div>
-		  <h4 class="listItemTitle"><span>{{ plugin.title }}</span></h4>
-		  <p>{{ plugin.description }}</p>
-		  <p>{{ distrib.name }}</p>
-		</div>
+	  <a role="link" href="{{ plugin.url }}" class="tile">
+		<h4 class="tileTitle"><span>{{ plugin.title }}</span></h4>
+		<p>{{ plugin.description }}</p>
+		<p>{{ distrib.name }}</p>
 	  </a>
 	  {% endif %}
 	{% endfor %}
   {% endfor %}
-</section>
-{% endfor %}
 </div>
+{% endfor %}