Merge branch 'master' into template-search

assets/scss/grid.scss

@@ -54,7 +54,7 @@
         }
 
         @media (min-width: $on-desktop) {
-            max-width: 1200px;
+            max-width: 1050px;
 
             .left-sidebar {
                 width: 20%;

assets/scss/partials/article.scss

@@ -75,10 +75,14 @@
 }
 
 .article-title {
-    font-size: 2.4rem;
     font-weight: 600;
     margin: 10px 0;
     color: var(--card-text-color-main);
+    font-size: 2.2rem;
+
+    @media (min-width: $on-desktop-large) {
+        font-size: 2.4rem;
+    }
 
     a {
         color: var(--card-text-color-main);
@@ -88,14 +92,6 @@
         }
     }
 
-    @media (min-width: $on-desktop-large) {
-        font-size: 2.4rem;
-    }
-
-    @media (max-width: $on-desktop) {
-        font-size: 2rem;
-    }
-
     & + .article-subtitle {
         margin-top: 0;
     }
@@ -103,18 +99,14 @@
 
 .article-subtitle {
     font-weight: normal;
-    font-size: 1.8rem;
     color: var(--card-text-color-secondary);
     margin: 5px 0;
     line-height: 1.5;
 
+    font-size: 1.75rem;
     @media (min-width: $on-desktop-large) {
         font-size: 2rem;
     }
-
-    @media (max-width: $on-desktop) {
-        font-size: 1.6rem;
-    }
 }
 
 .article-time {

assets/scss/partials/menu.scss

@@ -126,7 +126,8 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
+    margin-top: var(--sidebar-element-separation);
+    margin-bottom: 0;
     overflow-y: auto;
 
     @media (min-width: $on-desktop-large) {
@@ -179,6 +180,11 @@
             height: 25px;
             stroke-width: 1.33;
             margin-right: 40px;
+
+            @media (max-width: $on-desktop-large) {
+                width: 20px;
+                height: 20px;
+            }
         }
 
         a {
@@ -188,7 +194,7 @@
             color: var(--body-text-color);
             font-size: 1.5rem;
 
-            @media (max-width: $on-desktop) {
+            @media (max-width: $on-desktop-large) {
                 font-size: 1.4rem;
             }
         }

assets/scss/partials/sidebar.scss

@@ -12,6 +12,14 @@
     flex-direction: column;
     flex-shrink: 0;
 
+    --sidebar-avatar-size: 150px;
+    --sidebar-element-separation: 25px;
+
+    @media (max-width: $on-desktop-large) {
+        --sidebar-avatar-size: 120px;
+        --sidebar-element-separation: 20px;
+    }
+
     @media (max-width: $on-phone) {
         width: 100%;
         padding: 30px 0;
@@ -49,6 +57,7 @@
 .site-info {
     z-index: 1;
     transition: box-shadow 0.5s ease;
+
     @media (max-width: $on-phone) {
         padding: 15px 30px;
     }
@@ -56,14 +65,10 @@
     .site-avatar {
         position: relative;
         margin: 0;
-        margin-bottom: 25px;
-        width: 150px;
-        height: 150px;
+        width: var(--sidebar-avatar-size);
+        height: var(--sidebar-avatar-size);
 
-        @media (max-width: $on-desktop-large) {
-            height: 120px;
-            width: 120px;
-        }
+        margin-bottom: var(--sidebar-element-separation);
 
         .site-logo {
             width: 100%;

assets/scss/variables.scss

@@ -6,9 +6,14 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     @media (min-width: $on-phone + 1) {
+        --main-top-padding: 35px;
+    }
+
+    @media (min-width: $on-desktop-large) {
         --main-top-padding: 50px;
     }
 
+
     --body-background: #f5f5fa;
 
     --accent-color: #34495e;

assets/ts/gallery.ts

@@ -236,10 +236,10 @@ function wrap(gallery: HTMLElement[]) {
  */
 function loadPhotoSwipe() {
     const tasks = [
-        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"),
-        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css")
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
+        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"),
+        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css")
     ];
 
     return Promise.all(tasks);

exampleSite/config.toml

@@ -25,7 +25,7 @@ DefaultContentLanguage = "en"                   # Theme i18n support
         math = false
         [params.article.license]
             enabled = true 
-            default = "Licenced under CC BY-NC-SA 4.0"
+            default = "Licensed under CC BY-NC-SA 4.0"
     [params.comments]
         enabled = true
         # Only Disqus is available so far

layouts/rss.xml

@@ -34,7 +34,7 @@
         <description>
             {{- $image := partial "helper/image" (dict "Context" . "Type" "rss") -}}
             {{- if $image.exists -}}
-                {{ "<" | html }}img src="{{ $image.permalink | absURL }}" width="{{ $image.resource.Width }}" height="{{ $image.resource.Height }}" alt="Featured image of post {{ .Title }}" {{ "/>" | html}}
+                {{ "<" | html }}img src="{{ $image.permalink | absURL }}" alt="Featured image of post {{ .Title }}" {{ "/>" | html}}
             {{- end -}}{{ $content }}</description>
         </item>
         {{ end }}

theme.toml

@@ -5,7 +5,7 @@ name = "Stack"
 license = "GPL-3.0-only"
 licenselink = "https://github.com/CaiJimmy/hugo-theme-stack/blob/master/LICENSE"
 description = "Card-style Hugo theme designed for bloggers"
-homepage = "https://blog.jimmycai.com/p/hugo-theme-stack"
+homepage = "https://theme-stack.jimmycai.com"
 tags = [
     "blog", 
     "responsive",