From ea7f38498cf77b57cf5e717ae33d4ffe0b4054f9 Mon Sep 17 00:00:00 2001
From: Reinier Klarenberg <reinierklarenberg@gmail.com>
Date: Wed, 12 Jun 2024 23:53:19 +0200
Subject: [PATCH] improve responsive design

---
 src/app/pages/guide/[slug].page.ts | 2 +-
 src/app/pages/guide/index.page.ts  | 4 ++--
 src/app/pages/news/[slug].page.ts  | 2 +-
 src/app/pages/news/index.page.ts   | 4 ++--
 src/styles.css                     | 5 ++++-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/guide/[slug].page.ts b/src/app/pages/guide/[slug].page.ts
index 204f2c12..8df44ccd 100644
--- a/src/app/pages/guide/[slug].page.ts
+++ b/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> >
         }
diff --git a/src/app/pages/guide/index.page.ts b/src/app/pages/guide/index.page.ts
index d7bc7be9..fe4f7b62 100644
--- a/src/app/pages/guide/index.page.ts
+++ b/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>
diff --git a/src/app/pages/news/[slug].page.ts b/src/app/pages/news/[slug].page.ts
index 7f36e2ed..1376ea4e 100644
--- a/src/app/pages/news/[slug].page.ts
+++ b/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">
diff --git a/src/app/pages/news/index.page.ts b/src/app/pages/news/index.page.ts
index bb0db8e6..0c142a16 100644
--- a/src/app/pages/news/index.page.ts
+++ b/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>
diff --git a/src/styles.css b/src/styles.css
index 088fad0c..a9309698 100644
--- a/src/styles.css
+++ b/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;