From 3c814fca05dce8b93b484180ea55e3d742ee9e4d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sat, 27 Jun 2020 01:00:34 +0100
Subject: [PATCH] Use CSS Grid for page columns

---
 .../opdavies/templates/layout/page.html.twig  | 28 +++++--------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/web/themes/custom/opdavies/templates/layout/page.html.twig b/web/themes/custom/opdavies/templates/layout/page.html.twig
index 003ced5..fccbd86 100644
--- a/web/themes/custom/opdavies/templates/layout/page.html.twig
+++ b/web/themes/custom/opdavies/templates/layout/page.html.twig
@@ -78,7 +78,7 @@
         </div>
       </div>
     </div>
-    <div class="container mx-auto p-4">
+    <div class="{{ is_front ? 'max-w-5xl' : 'max-w-3xl' }} mx-auto p-4">
 
       {{ page.secondary_menu }}
 
@@ -91,29 +91,15 @@
       <main role="main">
         <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-        <div class="
-          -mx-4
-          {% if page.sidebar_first or page.sidebar_second %}
-            md:flex
-          {% endif %}
-        ">
-          <div class="
-            p-4
-            {% if page.sidebar_first or page.sidebar_second %}
-              md:flex-1
-            {% endif %}
-          ">
-            {{ page.content }}
+        <div class="grid lg:grid-cols-4 gap-8">
+          <div class="{{ not page.sidebar_second ? 'lg:col-span-4' : 'lg:col-span-3' }}">
+            <div class="max-w-3xl">
+              {{ page.content }}
+            </div>
           </div>{# /.layout-content #}
 
-          {% if page.sidebar_first %}
-            <aside class="md:w-1/4 p-4" role="complementary">
-              {{ page.sidebar_first }}
-            </aside>
-          {% endif %}
-
           {% if page.sidebar_second %}
-            <aside class="w-full md:w-2/5 lg:w-1/3 px-6" role="complementary">
+            <aside role="complementary">
               {{ page.sidebar_second }}
             </aside>
           {% endif %}