improve responsive design

src/app/pages/guide/[slug].page.ts

@@ -11,7 +11,7 @@ import PostAttributes from '../../post-attributes';
   template: `
     @if (post | async; as post) {
     <article class="rounded-lg container mx-auto max-w-4xl px-7">
-      <h1 class="text-3xl font-['Conthrax'] select-none border-l-2 pl-2 border-red-800 dark:text-gray-300 dark:bg-black rounded-tl-xl border-l-2 pl-2 pr-2 pt-1 pb-1 border-red-800">
+      <h1 class="text-xl md:text-3xl font-['Conthrax'] select-none border-l-2 pl-2 border-red-800 dark:text-gray-300 dark:bg-black rounded-tl-xl border-l-2 pl-2 pr-2 pt-1 pb-1 border-red-800">
         @if(post.attributes.type !== undefined){
           <a href="/guide">Guides</a> >
         }

src/app/pages/guide/index.page.ts

@@ -17,10 +17,10 @@ import { CommonModule } from '@angular/common';
         <a [routerLink]="['/guide/', post.attributes.slug]">
           <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] rounded-br-lg rounded-tl-xl  max-w-4xl mx-auto">
             <div class="container text-gray-300 bg-[#030303] rounded-tl-xl pl-2 pr-2 pt-1 pb-1 border-l-2 border-[red]">
-              <h2 class="font-['Conthrax'] text-3xl pl-1 text-white">{{ post.attributes.title }} </h2>
+              <h2 class="font-['Conthrax'] text-xl md:text-3xl pl-1 text-white">{{ post.attributes.title }} </h2>
             </div>
             <div class="container ml-3 pb-1">
-              <p class="text-lg text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
+              <p class="text-sm md:text-lg ml-1 mr-1 text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
             </div>
           </div>
         </a>

src/app/pages/news/[slug].page.ts

@@ -11,7 +11,7 @@ import PostAttributes from '../../post-attributes';
   template: `
     @if (post | async; as post) {
     <article class="rounded-lg container mx-auto max-w-4xl px-7">
-      <h1 class="text-3xl font-['Conthrax'] select-none border-l-2 pl-2 border-red-800 dark:text-gray-300 dark:bg-black rounded-tl-xl border-l-2 pl-2 pr-2 pt-1 pb-1 border-red-800">
+      <h1 class="text-xl md:text-3xl font-['Conthrax'] select-none border-l-2 pl-2 border-red-800 dark:text-gray-300 dark:bg-black rounded-tl-xl border-l-2 pl-2 pr-2 pt-1 pb-1 border-red-800">
         <a href="/news">News</a> > {{post.attributes.title}}
       </h1>
       <div class="container dark:bg-[#050505] pl-3 pr-3 pt-2 rounded-br-xl">

src/app/pages/news/index.page.ts

@@ -16,11 +16,11 @@ import { CommonModule } from '@angular/common';
         <a [routerLink]="['/news/', post.attributes.slug]">
           <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] rounded-br-lg rounded-tl-xl  max-w-4xl mx-auto">
             <div class="container text-gray-300 bg-[#030303] rounded-tl-xl pl-2 pr-2 pt-1 pb-1 border-l-2 border-[red]">
-              <h2 class="font-['Conthrax'] text-3xl pl-1 text-white">{{ post.attributes.title }} </h2>
+              <h2 class="font-['Conthrax'] text-xl md:text-3xl pl-1 text-white">{{ post.attributes.title }} </h2>
               <p class="text-xs ml-1 mt-1 text-[rgba(255,70,0,0.8)] mx-auto">{{post.attributes.date | date:'longDate'}}</p>
             </div>
             <div class="container ml-3 pb-1">
-              <p class="text-lg text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
+              <p class="text-sm md:text-lg ml-1 mr-1 text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
             </div>
           </div>
         </a>

src/styles.css

@@ -33,7 +33,8 @@
 
   @apply select-none;
   >h1 {
-    font-size: x-large;
+    font-size: large;
+    @apply md:text-xl;
     font-weight: 700;
     margin-bottom: -0.8em;
     @apply rounded-tl-xl;
@@ -44,6 +45,8 @@
   }
 
   >h2 {
+    font-size: medium;
+    @apply md:text-lg;
     font-size: large;
     font-weight: 600;
     margin-bottom: -1em;