From 77b3520b122eec24b10c39e6dfde2d71810f621b Mon Sep 17 00:00:00 2001
From: Simple_Not <44047940+moonbaseDelta@users.noreply.github.com>
Date: Wed, 12 Jul 2023 01:36:34 +1000
Subject: [PATCH] annother hexxo
---
static/src/vdk2ch.css | 75 +++++++++++++++++--------------------------
templates/posts.html | 11 +++----
2 files changed, 33 insertions(+), 53 deletions(-)
diff --git a/static/src/vdk2ch.css b/static/src/vdk2ch.css
index ba99ab3..29fec9a 100644
--- a/static/src/vdk2ch.css
+++ b/static/src/vdk2ch.css
@@ -1,48 +1,31 @@
-
-
-.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%);
- 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%);
+.hex {
+ display: block;
+ margin: 0 auto;
+ position: relative;
+ width: 320px;
+ height: 277.12px; /* width * 0.866 */
background: red;
- margin-bottom: calc(var(--m) - var(--s)*0.2885);
+ 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-background {
+ 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-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));
-}
- */
-
\ No newline at end of file
+
+.hex img {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ 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%);
+}
\ No newline at end of file
diff --git a/templates/posts.html b/templates/posts.html
index fc5dd7d..ce4f76b 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -61,14 +61,11 @@
>>15135633 (OP)
-
-
-
-
-
+
+
+
-
-