fixed size of container between content pages and index apges

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

Hide file tree

Showing 5 changed files with 12 additions and 13 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,9 +15,9 @@ import { SocialsComponent } from "./components/socials/socials.component";
         <p class="text-center font-['Conthrax']">Provides Solutions for Sim Racing</p>
       </div>
 
-      <div class="border-t-2 border-[grey] mb-2 container mx-auto md:max-w-xl" ></div>
+      <div class="border-t-2 border-[grey] mb-2 container mx-auto md:max-w-2xl" ></div>
 
-      <div class="mx-auto container place-content-center grid max-w-xl md:max-w-3xl grid-cols-2 md:grid-cols-1">
+      <div class="mx-auto container place-content-center grid max-w-2xl md:max-w-3xl grid-cols-2 md:grid-cols-1">
 
         <nav class="select-none text-lg font-['Conthrax'] md:mx-auto ml-6  place-content-start md:place-content-center md:text-2xl flex flex-wrap flex-col md:flex-row">
           <a href="/news" class="mx-auto text-center mb-2 md:mb-0 text-[white] hover:text-[red] hover:bg-[rgba(0,0,0,0.8)] ml-1 mr-1 pl-2 pr-2 bg-[rgba(0.2,0.2,0.2)] rounded-tl-lg rounded-br-lg">News</a>
@@ -29,7 +29,7 @@ import { SocialsComponent } from "./components/socials/socials.component";
         <app-socials class="md:mx-auto mr-6" />
       </div>
 
-      <div class="border-t-2 border-[grey] mt-1 md:mt-2 container mx-auto md:max-w-xl" ></div>
+      <div class="border-t-2 border-[grey] mt-1 md:mt-2 container mx-auto md:max-w-2xl" ></div>
 
       <router-outlet class="mt-4 md:mt-4"></router-outlet>
 

diff --git a/src/app/pages/guide/[slug].page.ts b/src/app/pages/guide/[slug].page.ts
@@ -10,15 +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-7">
-      <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">
+    <article class="rounded-lg container mx-auto max-w-4xl px-2 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">
-        <p class="select-none">{{post.attributes.date !== undefined? (post.attributes.date | date:'longDate') : ''}}</p>
         <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,12 +10,12 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [RouterLink, CommonModule],
   template: `
-  <div class="mx-auto px-7 rounded-lg shadow-lg select-none container">
+  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-2">
     <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) {
         <a [routerLink]="['/guide/', post.attributes.slug]">
-          <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] hover:border-[transparent] hover:border-l-2 rounded-br-lg rounded-tl-xl  max-w-4xl mx-auto">
+          <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] hover:border-[transparent] hover:border-l-2 rounded-br-lg rounded-tl-xl  max-w-4xl mx-auto text-pretty">
             <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>

diff --git a/src/app/pages/news/[slug].page.ts b/src/app/pages/news/[slug].page.ts
@@ -10,12 +10,12 @@ 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-7">
-      <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">
+    <article class="rounded-lg container mx-auto max-w-4xl px-2 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">
-        <p class="select-none text-sm">{{post.attributes.date !== undefined? (post.attributes.date | date:'longDate') : ''}}</p>
+        <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>
     </article>

diff --git a/src/app/pages/news/index.page.ts b/src/app/pages/news/index.page.ts
@@ -9,12 +9,12 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [RouterLink, CommonModule],
   template: `
-  <div class="mx-auto px-7 rounded-lg shadow-lg select-none container">
+  <div class="mx-auto rounded-lg shadow-lg select-none container max-w-4xl px-2">
     <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) {
         <a [routerLink]="['/news/', post.attributes.slug]">
-          <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] hover:border-[transparent] hover:border-l-2 rounded-br-lg rounded-tl-xl  max-w-4xl mx-auto">
+          <div class="container bg-[rgba(0,0,0,0.7)] mb-3 hover:bg-[#191919] hover:border-[transparent] hover:border-l-2 rounded-br-lg rounded-tl-xl  mx-auto text-pretty">
             <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>
               <p class="text-xs ml-1 mt-1 text-[rgba(255,70,0,0.8)] mx-auto">{{post.attributes.date | date:'longDate'}}</p>