Add image variant

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/css/image/feed.css

@@ -0,0 +1,108 @@
+:root {
+  --grid-gap: 12px;
+}
+
+.post-caption {
+  display: none;
+}
+
+.post-link {
+  display: block;
+}
+
+.post-link:hover {
+  opacity: 1;
+}
+
+.post-lightbox {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: scale(0.8);
+}
+
+.post-link:hover+.post-lightbox,
+.post-lightbox:hover {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.post-feed {
+  margin: 0 auto;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s var(--animation-base);
+}
+
+.post-feed.initialized {
+  visibility: visible;
+  opacity: 1;
+}
+
+.post-feed .grid-item {
+  position: absolute;
+  width: 330px;
+}
+
+.post-feed .post {
+  position: relative;
+  margin: var(--grid-gap);
+}
+
+.post-feed .post-image {
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .post-feed {
+    --grid-gap: 4px;
+
+    max-width: calc(100% - (calc(var(--gap) - var(--grid-gap))) * 2);
+  }
+
+  .post-feed .grid-item {
+    width: 50%;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1019px) {
+  .post-feed {
+    --grid-gap: 8px;
+
+    max-width: calc(100% - (calc(var(--gap) - var(--grid-gap))) * 2);
+  }
+
+  .post-feed .grid-item {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 1020px) {
+  .post-feed {
+    max-width: 990px;
+  }
+}
+
+@media (min-width: 1350px) {
+  .post-feed {
+    max-width: 1320px;
+  }
+}
+
+@media (min-width: 1680px) {
+  .post-feed {
+    max-width: 1650px;
+  }
+}