Add functionality to enlarge figure by clicking on it

themes/maik-blog/assets/scss/_main.scss

@@ -184,7 +184,7 @@ figure {
   figcaption {
     font-size: 1.125rem;
     line-height: 1.3;
-    margin: 1.33em 0;
+    margin-top: 0.4em;
     font-weight: bold;
     opacity: 0.8;
 
@@ -204,11 +204,43 @@ figure {
   &.small {
     max-width: 300px;
     width: 90%;
+    margin: 5px 0;
   }
 
   &.inline {
     display: inline-table;
   }
+
+  &.floated-focus {
+    display: flex;
+    position:fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    max-width: unset;
+    height: 100vh;
+    padding: 3rem;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: #212020ec;
+    z-index: 100;
+
+    figcaption {
+      color: #ddd3c6;
+      font-size: 1.5rem;
+    }
+
+    &:after {
+      content: "Close";
+      margin-top: 1rem;
+      text-decoration: underline;
+      cursor: pointer;
+      display: block;
+      color: #999288;
+    }
+  }
 }
 
 code {