Improve overall styling and add items to portfolio

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

@@ -1,10 +1,14 @@
 .portfolio {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
 
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
+
   @media #{$media-size-tablet} {
     max-width: 600px;
   }
@@ -46,8 +50,12 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
-    max-width: 860px;
+    width: 1060px;
+    max-width: 1060px;
+
+    @media #{$media-size-medium} {
+      max-width: 860px;
+    }
 
     @media #{$media-size-tablet} {
       margin: 20px 0;

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

@@ -1,11 +1,15 @@
 .portfolios {
   width: 100%;
-  max-width: calc(800px + 50px + 80px);
+  max-width: calc(1000px + 50px + 80px);
   text-align: left;
   padding: 20px calc(20px + 50px + 15px);
   margin: 20px auto;
   counter-reset: portfolio;
 
+  @media #{$media-size-medium} {
+    max-width: calc(800px + 50px + 80px);
+  }
+
   @media #{$media-size-tablet} {
     max-width: 660px;
   }
@@ -40,10 +44,15 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
-    margin: 80px 0;
+    margin: 80px auto;
     position: relative;
     counter-increment: portfolio;
 
+    > * {
+      flex: 1;
+      padding: 5px;
+    }
+
     @media #{$media-size-tablet} {
       flex-direction: column-reverse;
     }
@@ -96,6 +105,13 @@
       @include dimmed;
     }
 
+    &-skills {
+      &-title {
+        font-size: 0.9rem;
+        margin: 15px 0 0 0;
+      }
+    }
+
     &::before {
       display: block;
       content: counter(portfolio);

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

@@ -1,6 +1,6 @@
 .post {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
@@ -8,10 +8,13 @@
   @media #{$media-size-tablet} {
     max-width: 600px;
   }
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
 
   &-date {
     &:after {
-      content: '—';
+      content: "—";
     }
   }
 
@@ -46,8 +49,12 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
-    max-width: 860px;
+    width: 1060px;
+    max-width: 1060px;
+
+    @media #{$media-size-medium} {
+      max-width: 860px;
+    }
 
     @media #{$media-size-tablet} {
       margin: 20px 0;
@@ -84,7 +91,7 @@
 
     .feather {
       display: inline-block;
-      vertical-align: -.125em;
+      vertical-align: -0.125em;
       width: 1em;
       height: 1em;
     }
@@ -163,7 +170,7 @@
     background: $dark-background-secondary;
   }
 
-  +.button {
+  + .button {
     margin-left: 10px;
   }
 
@@ -189,4 +196,4 @@
   &.previous .button__icon {
     margin-right: 8px;
   }
-}
+}

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

@@ -1,10 +1,14 @@
 .posts {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
 
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
+
   @media #{$media-size-tablet} {
     max-width: 660px;
   }
@@ -69,4 +73,4 @@
       @include dimmed;
     }
   }
-}
+}

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

@@ -16,9 +16,11 @@ $dark-border-color: #4a4b50;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
+$media-size-medium: "(max-width: 1200px)";
 
 /* variables for js, must be the same as these in @custom-media queries */
 :root {
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);
-}
+  --mediumWidth: (max-width: 1200px);
+}