Add breadcrumbs and cleanup writeup ui

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

@@ -225,7 +225,7 @@ figure {
     justify-content: center;
     flex-direction: column;
     background-color: #212020ec;
-    z-index: 100;
+    z-index: 10000;
 
     figcaption {
       color: #ddd3c6;
@@ -460,3 +460,7 @@ table {
   width: 1em;
   height: 1em;
 }
+
+.nostyle {
+  text-decoration: none;
+}

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

@@ -1,10 +1,15 @@
 .masonry {
   display: grid;
+  margin-top: 20px;
   grid-gap: 20px 90px;
   grid-template-columns: repeat(2, minmax(250px, 1fr));
   // grid-auto-rows: 20px; // Set by JavaScript
   // margin-bottom: calc(4 * 20px); // Set by JavaScript
 
+  > * {
+    margin: 0;
+  }
+
   @media #{$media-size-medium} {
     grid-template-columns: 1fr;
   }

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

@@ -45,7 +45,7 @@
   &-content {
     margin-top: 30px;
   }
-  
+
   &-links {
     font-size: 0.8em;
     margin-top: -8px;
@@ -58,22 +58,11 @@
     > * {
       margin-right: 8px;
     }
-
-    // display: flex;
-    // flex-direction: row;
-    // align-items: center;
-    // font-size: 0.9em;
-    // gap: 10px;
-
-
-    // > * {
-    //   margin: 0;
-    // }
   }
 
   &-cover {
     border-radius: 8px;
-    margin: 40px -50px;
+    margin: 30px -50px;
     width: 1060px;
     max-width: 1060px;
 

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

@@ -38,9 +38,21 @@
     @media #{$media-size-phone} {
       font-size: 1.6rem;
     }
+  }
 
-    a {
-      text-decoration: none;
+  &-breadcrumbs {
+    font-size: 1.15rem;
+    margin: 10px 0 5px;
+
+    @media #{$media-size-phone} {
+      font-size: 0.9rem;
+    }
+  }
+
+  &-description {
+    font-size: 1.15rem;
+    @media #{$media-size-phone} {
+      font-size: 1.075rem;
     }
   }
 
@@ -61,9 +73,10 @@
 
   &-cover {
     border-radius: 8px;
-    margin: 40px -50px;
-    width: 1060px;
-    max-width: 1060px;
+    margin: 30px -5.20%;
+    width: 110%;
+    max-width: 110%;
+    text-decoration: none;
 
     @media #{$media-size-medium} {
       max-width: 860px;
@@ -71,7 +84,7 @@
 
     @media #{$media-size-tablet} {
       margin: 20px 0;
-      width: 100%;
+      width: 100% !important;
     }
 
     img {

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

@@ -38,27 +38,23 @@
     list-style: none;
   }
 
-  .post {
-    &.masonry-item {
-      .post-cover {
-        width: 115%;
-        margin: 40px -30px;
+  &-breadcrumbs {
+    margin: 0 0 -25px;
 
-        img {
-          max-height: 20rem;
-          margin: 0 auto;
-          object-fit: contain;
-        }
-      }
+    @media #{$media-size-phone} {
+      font-size: 0.9rem;
+      margin: 0 0 -15px;
     }
+  }
 
+  .post {
     &-title {
       font-size: 1.9rem;
       margin: 5px 0 5px 0;
     }
 
     &-subtitle {
-      font-size: 1.2rem;
+      font-size: 1.1rem;
       margin: 5px 0 10px 0;
       font-weight: 600;
     }
@@ -91,5 +87,15 @@
       margin-left: 1em;
       @include dimmed;
     }
+
+    &-cover {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    &-content {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
   }
 }

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

@@ -17,6 +17,7 @@ $dark-border-color: #4a4b50;
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
 $media-size-medium: "(max-width: 1200px)";
+$media-size-medium-min: "(min-width: 1200px)";
 
 /* variables for js, must be the same as these in @custom-media queries */
 :root {