responsive font size in articles

RiddleTime · Jun 13, 2024 · f3e99d3 · f3e99d3
1 parent 3fb7a99
commit f3e99d3
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/src/app/pages/guide/[slug].page.ts b/src/app/pages/guide/[slug].page.ts
@@ -10,14 +10,14 @@ import PostAttributes from '../../post-attributes';
   imports: [AsyncPipe, MarkdownComponent, CommonModule],
   template: `
     @if (post | async; as post) {
-    <article class="rounded-lg container mx-auto max-w-4xl px-2 text-pretty">
+    <article class="rounded-lg container mx-auto max-w-4xl px-3 text-pretty">
       <h1 class="text-xl md:text-3xl font-['Conthrax'] select-none 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> >
         }
          {{post.attributes.title}}
       </h1>
-      <div class="container dark:bg-[#050505] pl-3 pr-3 pt-2 rounded-br-xl">
+      <div class="container dark:bg-[#050505] pl-3 pr-[1em] pt-2 rounded-br-xl">
         <analog-markdown class="whitespace-pre-line" [content]="post.content" />
       </div>
     </article>

diff --git a/src/app/pages/guide/index.page.ts b/src/app/pages/guide/index.page.ts
@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [RouterLink, CommonModule],
   template: `
-  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-2">
+  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-3">
     <h1 class="font-['Conthrax'] text-4xl mb-2 md:mb-1 text-center">Guides</h1>
     <div class="container mx-auto flex-wrap">
       @for (post of posts;track post.attributes.slug) {
@@ -19,7 +19,7 @@ import { CommonModule } from '@angular/common';
             <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-xl md:text-3xl pl-1 text-white">{{ post.attributes.title }} </h2>
             </div>
-            <div class="container ml-3 pb-1">
+            <div class="container ml-3 pr-[1em] pb-1 text-pretty">
               <p class="text-sm md:text-lg ml-1 mr-1 text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
             </div>
           </div>

diff --git a/src/app/pages/news/[slug].page.ts b/src/app/pages/news/[slug].page.ts
@@ -10,11 +10,11 @@ import PostAttributes from '../../post-attributes';
   imports: [AsyncPipe, MarkdownComponent, CommonModule],
   template: `
     @if (post | async; as post) {
-    <article class="rounded-lg container mx-auto max-w-4xl px-2 text-pretty">
+    <article class="rounded-lg container mx-auto max-w-4xl px-3 text-pretty">
       <h1 class="text-xl md:text-3xl font-['Conthrax'] select-none 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">
+      <div class="container dark:bg-[#050505] pl-3 pr-[1em] pt-2 rounded-br-xl">
         <p class="select-none text-sm mb-3 text-pretty">{{post.attributes.date !== undefined? (post.attributes.date | date:'longDate') : ''}}</p>
         <analog-markdown class="whitespace-pre-line" [content]="post.content" />
       </div>

diff --git a/src/app/pages/news/index.page.ts b/src/app/pages/news/index.page.ts
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [RouterLink, CommonModule],
   template: `
-  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-2">
+  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-3">
     <h1 class="font-['Conthrax'] text-4xl mb-1 text-center">News</h1>
     <div class="container mx-auto flex-wrap">
       @for (post of posts;track post.attributes.slug) {
@@ -19,7 +19,7 @@ import { CommonModule } from '@angular/common';
               <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">
+            <div class="container ml-3 pr-[1em] pb-1 text-pretty">
               <p class="text-sm md:text-lg ml-1 mr-1 text-[rgba(255,255,255,0.78)]">{{ post.attributes.description }}</p>
             </div>
           </div>

diff --git a/src/styles.css b/src/styles.css
@@ -31,6 +31,9 @@
 
 .analog-markdown {
 
+  font-size: small;
+  @apply md:text-base;
+
   @apply select-none;
   >h1 {
     font-size: large;