test changes

2023-08-26 15:33:55 -05:00
parent 999b1858ac
commit e4ecb8f2b9
4 changed files with 5 additions and 3 deletions
@@ -0,0 +1,65 @@
+.hexagonGrid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+
+    /* this makes browser use GPU acceleration for blur */
+    will-change: contents;
+
+    filter: blur(2.5px);
+}
+
+.hexagonGrid .row {
+    display: inline-flex;
+    margin-top: -32px;
+    margin-left: -50px;
+}
+
+.hexagonGrid .row:nth-child(even) {
+    margin-left: 2px;
+}
+
+.hexagonGrid .row .hexagon {
+    position: relative;
+    width: 100px;
+    height: 110px;
+    margin: 4px 2px;
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg);
+    opacity: 0.95;
+    transition: 1s;
+}
+
+.hexagonGrid .row .hexagon::after {
+    content: "";
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    background: var(--bg);
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon:hover::before {
+    background: #72acb1;
+    opacity: 1;
+    transition: 0s;
+}
+
+.hexagonGrid .row .hexagon:hover::after {
+    background: var(--bg);
+}