4 files changed, 72 insertions, 6 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 491604b6..8e03cc1d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -25,6 +25,10 @@
 
     .card-title {
         margin: 0;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
     }
 
     .card-content {
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 8f937d11..798fd665 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -24,7 +24,7 @@
     gap: 0.5rem;
     align-items: center;
 
-    .post-date, .post-tag {
+    .post-date, .tag {
       color: var(--secondary-text-color)
     }
 
diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index 022f97bd..57c6b18f 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -31,7 +31,7 @@
                 time {
                     font-family: var(--mono-font-family);
                 }
-                a.post-tag {
+                a.tag {
                     font-size: 0.8rem;
                     color: var(--secondary-text-color);
                 }
@@ -102,10 +102,6 @@
             &.active .icon-link {
                 opacity: 1;
             }
-            &.active .icon-link {
-                display: inline-block;
-                transform: scale(1.1) rotate(90deg);
-            }
         }
 
         #search-instruction {
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index 52de0999..934417d3 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -137,3 +137,69 @@
 .sidenote-content {
     font-size: 1rem
 }
+
+/* blog links */
+
+.linkroll {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+a.blog-link {
+  position: relative;
+  background-color: var(--block-background-color);
+  text-decoration: none;
+  color: var(--text-color);
+  padding: 1rem 2rem;
+  padding-right: 4rem;
+  border-radius: 1rem;
+  width: calc(50% - 2rem);
+  box-sizing: border-box;
+  overflow: hidden;
+
+  h4, p {
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  .link-content {
+    z-index: 10;
+  }
+
+  img {
+    --size: 5rem;
+    display: block;
+    position: absolute;
+    right: -1rem;
+    bottom: -1rem;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 100%;
+    z-index: 0;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  a.blog-link {
+    font-size: 1.2rem;
+    padding: 0.5rem 1rem;
+    padding-right: 2rem;
+    width: 100%;
+  }
+}
+
+a.podcast-link {
+    text-decoration: none;
+    color: inherit;
+    width: calc(25% - 1rem);
+    .link-image {
+        overflow: hidden;
+        border-radius: 5px;
+        img { margin: 0 }
+    }
+}