chore: adjust h2 styles

3 files changed, 15 insertions, 6 deletions

diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
index cacc0d3..b275d63 100644
--- a/src/components/PostPreview/PostPreview.module.scss
+++ b/src/components/PostPreview/PostPreview.module.scss
@@ -31,6 +31,11 @@
   border: fun.convert-px(1) solid var(--color-border);
 }
 
+h2.title {
+  background: none;
+  text-shadow: none;
+}
+
 @include mix.media("screen") {
   @include mix.dimensions("xs") {
     .read-more {
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index fa8bfd0..9cb7752 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -37,7 +37,7 @@ const PostPreview = ({
         </div>
       )}
       <header className={styles.header}>
-        <TitleTag>
+        <TitleTag className={styles.title}>
           <Link href={`/article/${post.slug}`}>
             <a>{post.title}</a>
           </Link>
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 21f0e73..5bf8eea 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -6,7 +6,15 @@ h1 {
 }
 
 h2 {
+  padding-bottom: fun.convert-px(3);
+  background: linear-gradient(
+      to top,
+      var(--color-primary-dark) 0.3rem,
+      transparent 0.3rem
+    )
+    0 0 / 3rem 100% no-repeat;
   font-size: var(--font-size-2xl);
+  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter);
 }
 
 h3 {
@@ -126,11 +134,7 @@ dd {
 }
 
 a {
-  background: linear-gradient(
-      to top,
-      var(--color-primary) 50%,
-      var(--color-bg) 50%
-    )
+  background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
     0 0 / 100% 200% no-repeat;
   color: var(--color-primary);
   text-decoration-thickness: 13%;