annother hexxo

static/src/vdk2ch.css

@@ -9,7 +9,7 @@
     -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
     -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
   }
-  
+
 .hex-background {
     position: absolute;
     background-color: orange; /*color of the main-background*/
@@ -28,4 +28,27 @@
     object-fit: cover;
     -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
     -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-} 
+} 
+
+
+.hex-main {
+    display:flex;
+    --s: 100px;  /* size  */
+    --m: 4px;    /* margin */
+    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
+}
+  
+.hex-container {
+    font-size: 0; /*disable white space between inline block element */
+}
+  
+.hex-container img {
+    width: var(--s);
+    margin: var(--m);
+    height: calc(var(--s)*1.1547); 
+    display: inline-block;
+    font-size:initial;
+    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
+    background: red;
+    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
+}

templates/posts.html

@@ -55,8 +55,8 @@
             </a>
         </figure>
         
-        <div class="hex">
-            <div class="hex-background">
+        <div class="hex-main">
+            <div class="hex-container">
                 <img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584"> 
             </div>
         </div>