feat: fix layouts on very large screen widths

genicsblog · May 30, 2024 · b9f8642 · b9f8642
1 parent 940d016
commit b9f8642
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 9 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -77,7 +77,7 @@
   {% else %}
   {% assign author = site.data.authors[page.author]%}
 
-  <div class="flex flex-col lg:flex-row p-2">
+  <div class="flex flex-col lg:flex-row lg:max-w-screen-2xl lg:mx-auto">
     <div class="flex justify-center items-center lg:w-1/2 md:mb-0">
       {% if page.image %}
       <img

diff --git a/_includes/relatedposts.html b/_includes/relatedposts.html
@@ -8,7 +8,7 @@ <h2>Related content</h2>
 {% assign maxRelatedCounter = 0 %}
 
 <div
-  class="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-4 md:gap-4 lg:gap-6 text-center"
+  class="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-4 md:gap-4 lg:gap-6 text-center lg:max-w-screen-2xl lg:mx-auto"
 >  
   <!-- prettier-ignore -->
   {% for post in site.posts %}

diff --git a/_layouts/archive.html b/_layouts/archive.html
@@ -56,7 +56,7 @@
       <!-- prettier-ignore -->
       {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
 
-      <section class="p-6 sm:p-10">
+      <section class="p-6 sm:p-10 max-w-screen-2xl mx-auto">
         <div
           class="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-4 md:gap-4 lg:gap-6 text-center"
         >

diff --git a/_layouts/author.html b/_layouts/author.html
@@ -216,7 +216,7 @@ <h4>{{ author.role }}</h4>
       <!-- prettier-ignore -->
       {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
 
-      <section class="p-6 sm:p-10">
+      <section class="p-6 sm:p-10 max-w-screen-2xl mx-auto">
         <!-- prettier-ignore -->
         {% assign arrSize = paginator.posts | size %}
         {% if arrSize > 0 %}

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<article class="elevated md:text-lg m-8 md:m-10 lg:m-14 p-6 md:p-8">{{ content | extlinks | optimize_images }}</article>
+<article class="elevated md:text-lg m-8 md:m-10 p-6 md:p-8 lg:mx-auto lg:max-w-[80%] 2xl:max-w-screen-xl">{{ content | extlinks | optimize_images }}</article>
 
 {% if page.showlatest %}
 <div class="m-8 md:m-10 lg:m-14">{% include latestposts.html %}</div>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -14,7 +14,7 @@
 <!-- prettier-ignore -->
 {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
 
-<section class="lg:flex lg:justify-center">
+<section class="lg:flex lg:justify-center lg:max-w-screen-2xl lg:mx-auto">
   <div class="content-area elevated">
     {% if site.sponsor-notice %}
     <div
@@ -290,7 +290,7 @@ <h4 class="mt-4">
 
 <!-- prettier-ignore -->
 {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
-<br />
+<br />  
 {% include_cached cta.html %}
 
 {% if jekyll.environment == 'production' and page.comments != false and page.sitemap != false %}

diff --git a/_pages/index.html b/_pages/index.html
@@ -7,7 +7,7 @@
   enabled: true
 ---
 
-<section class="p-6 sm:p-10">
+<section class="p-6 sm:p-10 max-w-screen-2xl mx-auto">
   {% include featured-content.html %}
 
   <div

diff --git a/assets/css/theme.css b/assets/css/theme.css
@@ -277,7 +277,7 @@ code.highlighter-rouge:not(h1 code, h2 code, h3 code, h4 code, h5 code, h6 code)
 }
 
 .cta {
-  @apply flex justify-center mx-6 md:mx-auto md:max-w-[80%];
+  @apply flex justify-center mx-6 md:mx-auto md:max-w-[80%] 2xl:max-w-screen-xl;
 }
 
 .notice {