fix: center the content on larger screens

valerymelou · Jul 28, 2024 · 5f83557 · 5f83557
1 parent ff3b81d
commit 5f83557
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/libs/blog/feature-article/src/lib/blog-article.component.html b/libs/blog/feature-article/src/lib/blog-article.component.html
@@ -1,4 +1,4 @@
-<article class="relative max-w-3xl pt-10">
+<article class="relative my-10">
   <a routerLink="/blog" ui-flat-button color="accent" class="mb-4">
     <ng-icon name="bootstrapArrowLeft" strokeWidth="5" size="20"></ng-icon>
     <span class="ml-3">Articles</span>

diff --git a/libs/shared/layout/src/lib/base-layout/base-layout.component.html b/libs/shared/layout/src/lib/base-layout/base-layout.component.html
@@ -2,7 +2,7 @@
   <app-navbar></app-navbar>
   <app-social-bar></app-social-bar>
   <main
-    class="mx-5 flex flex-1 flex-col pt-20 lg:mx-[272px] lg:pt-0"
+    class="mx-5 flex w-full max-w-3xl flex-1 flex-col pt-20 lg:mx-auto lg:pt-0"
     [@routeAnimations]="prepareRoute()"
   >
     <router-outlet #outlet="outlet"></router-outlet>

diff --git a/libs/shared/layout/src/lib/footer/footer.component.html b/libs/shared/layout/src/lib/footer/footer.component.html
@@ -1,24 +1,7 @@
-<footer class="mx-5 flex items-center py-8 text-sm font-light lg:mx-[272px]">
+<footer
+  class="mx-5 flex w-full max-w-3xl items-center py-8 text-sm font-light lg:mx-auto"
+>
   <div class="grid grid-cols-2 gap-8">
-    <div class="col-span-2 flex flex-col sm:col-span-1">
-      <p class="mt-auto">
-        The code of this website is available on
-        <a
-          href="https://github.com/valerymelou/valerymelou.com"
-          ui-link
-          target="_blank"
-          rel="noopener"
-          >GitHub</a
-        >.
-      </p>
-      <p>
-        All the content is from me and edited in
-        <a href="https://contentful.com" ui-link target="_blank" rel="noopener"
-          >Contentful</a
-        >.
-      </p>
-      <p class="text-sm">&copy; {{ date | date: 'yyyy' }} Valery Melou.</p>
-    </div>
     <div class="col-span-2 sm:col-span-1">
       <p>
         Coded in
@@ -54,5 +37,24 @@
         >.
       </p>
     </div>
+    <div class="col-span-2 flex flex-col sm:col-span-1">
+      <p class="mt-auto">
+        The code of this website is available on
+        <a
+          href="https://github.com/valerymelou/valerymelou.com"
+          ui-link
+          target="_blank"
+          rel="noopener"
+          >GitHub</a
+        >.
+      </p>
+      <p>
+        All the content is from me and edited in
+        <a href="https://contentful.com" ui-link target="_blank" rel="noopener"
+          >Contentful</a
+        >.
+      </p>
+      <p class="text-sm">&copy; {{ date | date: 'yyyy' }} Valery Melou.</p>
+    </div>
   </div>
 </footer>