feat: responsive bookmark for mobile

skkuding · Feb 24, 2024 · e6e5d0a · e6e5d0a
1 parent d92d193
commit e6e5d0a
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/layouts/shortcodes/bookmark.html b/layouts/shortcodes/bookmark.html
@@ -24,6 +24,8 @@
       padding: 0;
     }
     .bookmark-description {
+      color: #666;
+      font-size: 14px;
       margin: 0;
     }
     .bookmark-image {
@@ -33,6 +35,24 @@
       object-fit: cover;
       border-radius: 0 4px 4px 0;
     }
+    @media (max-width: 440px) {
+      .bookmark {
+        flex-direction: column;
+      }
+      .bookmark-title {
+        font-size: 14px;
+        line-height: 1.5;
+      }
+      .bookmark-description {
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .bookmark-image {
+        width: 100%;
+        height: auto;
+        border-radius: 4px 4px 0 0;
+      }
+    }
     /* .bookmark-image img {
       max-width: 100px;
       height: auto;