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);
+}

themes/maik-blog/layouts/portfolio/list.html

@@ -1,5 +1,4 @@
 {{ define "main" }}
-{{ $paginator := .Paginate .Data.Pages }}
 
 <main class="portfolios">
     <h1>Portfolio</h1>
@@ -8,15 +7,11 @@
     <div class="content">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="portfolios-list">
-        {{ range $paginator.Pages }}
+        {{ range sort .Data.Pages "Params.end_date" "desc" }}
         <div class="portfolio">
             <div class="portfolio-details">
-                <h1 class="portfolio-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+                <h2 class="portfolio-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
                 <span class="portfolio-company">
                     <a href="{{ .Params.company_url }}" target="_blank">{{ .Params.company_name | markdownify }}</a>
                 </span>
@@ -31,8 +26,12 @@
                     </span>
                     <span class="portfolio-end-date">
                         {{- if eq (printf "%T" .Params.end_date) "time.Time"}}
+                        {{- if lt .Params.end_date now }}
                         {{ .Params.end_date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
                         {{- else }}
+                        Present
+                        {{- end }}
+                        {{- else }}
                         {{ .Params.end_date }}
                         {{- end }}
                     </span>
@@ -60,6 +59,14 @@
                     {{- end }}
                     {{- end }}
                 </div>
+                {{- with .Params.skills }}
+                <h3 class="portfolio-skills-title">Skills used:</h3>
+                <ul class="portfolio-skills">
+                    {{- range . }}
+                    <li class="portfolio-skill">{{ . }}</li>
+                    {{- end }}
+                </ul>
+                {{- end}}
                 {{- if not .Params.hideReadMore }}
                 <div><a class="read-more button"
                         href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
@@ -87,6 +94,5 @@
         {{- end }}
     </div>
 
-    {{ partial "pagination.html" . }}
 </main>
 {{ end }}