🩹 changing healine size on mobile in order to accommodate longer head…

…lines
chrede88 · Dec 10, 2023 · d06e339 · d06e339
1 parent 78debea
commit d06e339
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1870,6 +1870,11 @@ video {
   .md\:p-0 {
     padding: 0px;
   }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {

diff --git a/exampleSite/content/blog/post2/index.md b/exampleSite/content/blog/post2/index.md
@@ -1,5 +1,5 @@
 ---
-title: Blog Post With Extra Long Title
+title: Blog Post With Extra Extra Long Title 
 summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 date: 2023-11-23
 cardimage: photo2_card.jpeg

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
@@ -31,7 +31,7 @@ <h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
           {{ end }}
           <div class="flex flex-col justify-between p-6">
             <div>
-              <h4 class="mb-2 text-2xl font-semibold text-slate-700 antialiased dark:text-slate-200">
+              <h4 class="mb-2 text-base md:text-2xl font-semibold text-slate-700 antialiased dark:text-slate-200">
                 {{ .Title }}
               </h4>
               <p class="mb-4 text-base line-clamp-6 text-slate-500 dark:text-slate-400">