annother hexxo

static/src/vdk2ch.css

@@ -1,48 +1,31 @@
-
+.hex {
-
+    display: block;
-.hex-main {
+    margin: 0 auto;
-    display:flex;
+    position: relative;
-    --s: 100px;  /* size  */
+    width: 320px;
-    --m: 4px;    /* margin */
+    height: 277.12px; /* width * 0.866 */
-    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
+    background: red;
+    box-sizing: border-box;
+    -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-container {
+.hex-background {
-    font-size: 0; /*disable white space between inline block element */
+    position: absolute;
+    background-color: orange; /*color of the main-background*/
+    top: 2px; /* equal to border thickness */
+    left: 2px; /* equal to border thickness */
+    width: 316px; /* container height - (border thickness * 2) */
+    height: 273.12px; /* container height - (border thickness * 2) */
+    -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 img {
-.hex-container img {
+    position: absolute;
-    width: var(--s);
+    width: 100%; 
-    margin: var(--m);
+    height: 100%; 
-    height: calc(var(--s)*1.1547); 
+    object-fit: cover;
-    display: inline-block;
+    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-    font-size:initial;
+    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
-    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); 
-    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
 } 
-
-.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

@@ -61,14 +61,11 @@
     <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">
-
+        <div class="hex-background">
-    <div class="hex-main">
+            <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 class="hex-container"> 
-                <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 %} 
         <svg class="post__file-preview   " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584"  data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg">