annother hexxo

static/src/vdk2ch.css

@@ -0,0 +1,37 @@
+
+
+.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 div {
+    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); 
+}
+.hex-container div:nth-child(odd) {
+    background:green;
+}
+.hex-container::before {
+    content: "";
+    width: calc(var(--s)/2 + var(--m));
+    float: left;
+    height: 120%;
+    shape-outside: repeating-linear-gradient(     
+                        #0000 0 calc(var(--f) - 3px),      
+                        #000  0 var(--f));
+}
+  
+  

templates/posts.html

@@ -59,6 +59,17 @@
     </div>
     <article id="m15135655" class="post__message ">
     <a href="/news/res/15135633.html#15135633" class="post-reply-link" data-thread="15135633" data-num="15135633">&gt;&gt;15135633 (OP)</a><br>
+ 
+
+
+
+    <div class="hex-main">
+        <div class="hex-container">
+            <div> 
+                <img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" class="post__file-preview   " data-type="2" data-title="image.png" data-width="954" data-height="960" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170">
+            </div>
+        </div>
+    </div>
 <!--     
     
     {% for pic in thread.pic_links %}