From ab4fedcc59fc269a45c753cfb1b9e02ec691ff60 Mon Sep 17 00:00:00 2001
From: Dan <dan@unbo.lt>
Date: Wed, 14 Jan 2026 12:33:26 +0000
Subject: [PATCH] Blog styling tweaks

---
 assets/sass/pages/blog.scss                   | 68 ++++++++++++++++---
 .../index.md                                  |  2 +
 layouts/blog/summary.html                     |  9 +++
 3 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/assets/sass/pages/blog.scss b/assets/sass/pages/blog.scss
index 1723596..d11cde1 100644
--- a/assets/sass/pages/blog.scss
+++ b/assets/sass/pages/blog.scss
@@ -14,7 +14,8 @@
     background: linear-gradient(145deg, #e8e0c8, #c4b89a);
     border-radius: 12px;
     padding: 25px 30px 45px 30px;
-    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8),
+    box-shadow:
+      0 30px 60px rgba(0, 0, 0, 0.8),
       inset 0 2px 4px rgba(255, 255, 255, 0.3),
       inset 0 -2px 4px rgba(0, 0, 0, 0.3);
     position: relative;
@@ -69,7 +70,9 @@
       height: 8px;
       background: #0f0;
       border-radius: 50%;
-      box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
+      box-shadow:
+        0 0 10px #0f0,
+        0 0 20px #0f0;
       animation: pulse 2s ease-in-out infinite;
 
       @include media-down(lg) {
@@ -123,7 +126,8 @@
     border-radius: 8px;
     position: relative;
     overflow: hidden;
-    box-shadow: inset 0 0 80px rgba(0, 255, 100, 0.1),
+    box-shadow:
+      inset 0 0 80px rgba(0, 255, 100, 0.1),
       inset 0 0 40px rgba(0, 255, 100, 0.05),
       inset 3px 3px 8px rgba(255, 255, 255, 0.1),
       inset -3px -3px 8px rgba(0, 0, 0, 0.5);
@@ -141,7 +145,8 @@
       left: -5%;
       right: -5%;
       bottom: -5%;
-      background: radial-gradient(
+      background:
+        radial-gradient(
           ellipse at 30% 30%,
           rgba(255, 255, 255, 0.15) 0%,
           transparent 40%
@@ -289,6 +294,7 @@
         a {
           color: #ff9900;
           text-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
+          border-bottom: 1px dotted rgba(255, 200, 47, 0.5);
 
           &::after {
             background: #ff9900;
@@ -297,6 +303,38 @@
         }
       }
 
+      .blog-summary,
+      .blogs-content {
+        color: #ff9900;
+        text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
+
+        a {
+          color: #ffb13d;
+          text-shadow: 0 0 5px rgba(255, 162, 23, 0.5);
+          border-bottom: 1px dotted rgba(255, 200, 47, 0.5);
+
+          &:hover {
+            border-bottom-color: orange;
+            text-shadow: 0 0 10px rgba(255, 217, 47, 0.8);
+          }
+
+          &::after {
+            background: #ff9900;
+            box-shadow: 0 0 10px #ff9900;
+          }
+        }
+
+        > .read-more {
+          color: #ff9900;
+          text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
+
+          &:after {
+            background: #ff9900;
+            box-shadow: 0 0 10px rgb(255, 213, 47);
+          }
+        }
+      }
+
       .tag-filter-link {
         background: rgba(255, 153, 0, 0.2);
         border-color: rgba(255, 153, 0, 0.5);
@@ -383,6 +421,7 @@
       line-height: 1.6;
       opacity: 0.9;
       color: #0f0;
+      margin-top: 1rem;
 
       @include media-down(lg) {
         font-size: 0.9rem;
@@ -755,7 +794,8 @@
     height: auto;
     border-radius: 12px;
     border: 3px solid transparent;
-    background: linear-gradient(#000, #000) padding-box,
+    background:
+      linear-gradient(#000, #000) padding-box,
       linear-gradient(180deg, #0f0, #000) border-box;
     filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%)
       hue-rotate(60deg) saturate(300%);
@@ -902,7 +942,8 @@
           &:hover {
             background: rgba(0, 255, 0, 0.1);
             border-color: rgba(0, 255, 0, 0.7);
-            box-shadow: 0 0 10px rgba(0, 255, 0, 0.4),
+            box-shadow:
+              0 0 10px rgba(0, 255, 0, 0.4),
               inset 0 0 10px rgba(0, 255, 0, 0.1);
             text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
           }
@@ -911,7 +952,8 @@
         &.active span {
           background: rgba(0, 255, 0, 0.2);
           border-color: rgba(0, 255, 0, 0.8);
-          box-shadow: 0 0 15px rgba(0, 255, 0, 0.5),
+          box-shadow:
+            0 0 15px rgba(0, 255, 0, 0.5),
             inset 0 0 10px rgba(0, 255, 0, 0.2);
           text-shadow: 0 0 10px rgba(0, 255, 0, 1);
         }
@@ -950,7 +992,9 @@
     text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
   }
   to {
-    text-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 0.6);
+    text-shadow:
+      0 0 20px rgba(0, 255, 0, 1),
+      0 0 30px rgba(0, 255, 0, 0.6);
   }
 }
 
@@ -967,10 +1011,14 @@
   0%,
   100% {
     opacity: 1;
-    box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
+    box-shadow:
+      0 0 10px #0f0,
+      0 0 20px #0f0;
   }
   50% {
     opacity: 0.5;
-    box-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
+    box-shadow:
+      0 0 5px #0f0,
+      0 0 10px #0f0;
   }
 }
diff --git a/content/blog/2026-01-12-week-4-got-webmentions/index.md b/content/blog/2026-01-12-week-4-got-webmentions/index.md
index 2c44818..516e890 100644
--- a/content/blog/2026-01-12-week-4-got-webmentions/index.md
+++ b/content/blog/2026-01-12-week-4-got-webmentions/index.md
@@ -18,6 +18,8 @@ draft: false
 
 ## Music
 
+- 📺 [Mortal Kombat x Rhythm is a Dancer](https://www.youtube.com/watch?v=vKxn6P947PE)
+
 ## Next Week
 
 Not necessary
diff --git a/layouts/blog/summary.html b/layouts/blog/summary.html
index 50c1709..5ed05cb 100644
--- a/layouts/blog/summary.html
+++ b/layouts/blog/summary.html
@@ -23,5 +23,14 @@
 	<div class="blog-summary">
 		{{ .Content }}
 	</div>
+	{{ else }}
+	<div class="blog-summary">
+		{{ .Summary }}
+
+		<div class="read-more" >
+			<a href="{{ .Permalink }}">Read More</a>
+		</div>
+		
+	</div>
 	{{ end }}
 </div>